一般app有几个功能tab模块、登录模块、工具模块。
我这个demo项目就简单搞3个tab,1个common,多了也是重复操作。common中包含router,复杂项目也可以将router单独抽出一个模块。
先放个效果图。
1
创建个新的Flutter项目。
使用Android Studio。
2
根据模块再创建几个Flutter项目。
创建好了在磁盘上拖到主模块内。
然后在Android Studio内就可以直接开发这几个模块。
3
主工程pubspec.yaml中写好依赖(别忘了pub get)。
每个模块需要一个Router作为入口管理页面的跳转,使用main_router.dart(在common中)的MainRouter单例集中使用,在main.dart中初始化好。
页面UI就不说了,这里只放了新闻页的代码,其他模块一样的。
业务实现推荐使用get这个状态管理,整体MVP就行,如果是能预料到的很复杂的项目,直接VIPER。
其实VIPER也就是在MVP基础上把M继续拆分。
V(view,页面)
I(interactor,接口,后台网络请求)
P(presenter,业务逻辑处理、跳转等)
E(entity,就是纯数据模型,负责接口字段对应而已)
R(router,对外跳转接口,这个每个小业务不用再实现了,由整个模块的Router负责)
main.dart
import 'package:flutter/material.dart';
import 'main_home.dart';
import 'package:demo_common/main_router.dart';
import 'package:demo_news/news_router.dart';
import 'package:demo_discover/discover_router.dart';
import 'package:demo_mine/mine_router.dart';
import 'package:get/get.dart';
void main() {
// 注册routes
MainRouter().initRoutes([NewsRouter.routes, DiscoverRouter.routes, MineRouter.routes]);
// 启动
runApp(const MyApp());
// 建议用get但不建议整体用GetMaterialApp
// runApp(const GetMaterialApp(home: MyApp()));
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
navigatorKey: MainRouter().navigatorKey,
routes: MainRouter().routes,
onGenerateRoute: MainRouter().generateRoute,
home: HomePage(),
);
}
}
main_home.dart
import 'package:flutter/material.dart';
import 'package:demo_news/news_home.dart';
import 'package:demo_discover/discover_home.dart';
import 'package:demo_mine/mine_home.dart';
class HomePage extends StatefulWidget {
@override
State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
// 3个主页
final List<Widget> _pageList = [
NewsHomePage(),
DiscoverHomePage(),
MineHomePage()
];
// 4个按钮
final List<BottomNavigationBarItem> _items = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "新闻",
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
label: "发现",
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "我的",
)
];
// 当前页面
int _currentIndex = 0;
PageController? _pageController;
// 点击事件
void onTap(int index) {
setState(() {
_currentIndex = index;
_pageController!.jumpToPage(index);
});
}
@override
void initState() {
super.initState();
_pageController = PageController();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: PageView(
controller: _pageController,
children: _pageList,
physics: NeverScrollableScrollPhysics(), // 禁止滑动
),
bottomNavigationBar: Theme(
// 去除水波纹
data: ThemeData(
brightness: Brightness.light,
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
),
child: BottomNavigationBar(
selectedFontSize: 12.0,
unselectedFontSize: 12.0,
type: BottomNavigationBarType.fixed,
items: _items,
currentIndex: _currentIndex,
onTap: onTap,
),
),
);
}
}
main.router.dart
import 'package:flutter/cupertino.dart';
class MainRouter {
// 全局NavigatorState
GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
// 单例
factory MainRouter() => _sharedInstance();
static MainRouter? _instance;
MainRouter._internal();
static MainRouter _sharedInstance() {
_instance ??= MainRouter._internal();
return _instance!;
}
// 保存所有routes
Map<String, WidgetBuilder> routes = {};
// 拦截器
final RouteFactory generateRoute = (settings) {};
// 初始化routes
void initRoutes(List<Map<String, WidgetBuilder>> routeList) {
routes = {};
for (var route in routeList) {
routes.addAll(route);
}
print('初始化routes完毕:$routes');
}
// 跳转
static push(String name, Object? arguments) {
MainRouter().navigatorKey.currentState?.pushNamed(name, arguments: arguments);
print('跳转$name参数$arguments');
}
// 返回
static pop([Object? result]) {
MainRouter().navigatorKey.currentState?.pop(result);
print('返回$result');
}
}
news_home.dart
import 'package:flutter/material.dart';
import 'package:demo_common/main_router.dart';
import 'news_router.dart';
class NewsHomePage extends StatefulWidget {
@override
NewsHomePageState createState() => NewsHomePageState();
}
class NewsHomePageState extends State<NewsHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("新闻"),
),
body: Center(
child: Column(
children: [
TextButton(
onPressed: () => MainRouter.push(NewsRouter.ROUTE_NEWS_PAGE1, null),
child: Text('页面1-截屏'),
),
],
),
),
);
}
}
news_router.dart
import 'package:flutter/cupertino.dart';
import 'news_home.dart';
import 'news_page1.dart';
class NewsRouter {
static const ROUTE_NEWS_HOME = '/news_home/news_home';
static const ROUTE_NEWS_PAGE1 = '/news_home/news_page1';
static Map<String, WidgetBuilder> routes = {
ROUTE_NEWS_HOME : (context) => NewsHomePage(),
ROUTE_NEWS_PAGE1 : (context) => NewsPage1(),
};
}