一、设置总Tabs类
我们设置Tabs用于来管理页面和底部按钮。
1、设置属性arguments，供外部调用，选定某个位置的tabbar。 这个是可选项，可以不写，工程中一般默认选第一个界面。
2、创建各个页面的List。
List<Widget> _pageList = [
GHHomePage(),
GHCategoryPage(),
GHShopCartPage(),
GHUserPage()
];
3、在build中的脚手架中的PageView属性中获取当前页面的Controller索引
List中什么类型的就填写什么，不要笼统的去写，不然汇报错
List<BottomNavigationBarItem> _bottomNavigationBaeList = [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text(
"首页",
style: TextStyle(fontSize: 12),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.category),
title: Text(
"分类",
style: TextStyle(fontSize: 12),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_cart),
title: Text(
"购物车",
style: TextStyle(fontSize: 12),
),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text(
"我的",
style: TextStyle(fontSize: 12),
),
)
];
4、添加item的底部title和图片，设置tabbar图片/文字点击颜色。
// tab
class Tabs extends StatefulWidget {
Map arguments; //非私有的，供外部调用，选定某个位置
Tabs({Key key, this.arguments}) : super(key: key);
_TabsState createState() => _TabsState();
}
class _TabsState extends State<Tabs> {
int _currentIndex = 0;
PageController _pageController;
@override
void initState() {
super.initState();
if (widget.arguments != null) {
this._currentIndex = widget.arguments["index"];
} else {
this._currentIndex = 0;
}
this._pageController = new PageController(initialPage: this._currentIndex);
GHSqflite sq = GHSqflite();
sq.create();
}
List<Widget> _pageList = [
GHHomePage(),
GHCategoryPage(),
GHShopCartPage(),
GHUserPage()
];
@override
Widget build(BuildContext context) {
ScreenAdaper.init(context);
return Scaffold(
body: PageView(
controller: this._pageController,
children: this._pageList,
physics: NeverScrollableScrollPhysics(), // 禁止滑动
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: this._currentIndex,
onTap: (index) {
setState(() {
this._currentIndex = index;
this._pageController.jumpToPage(index);
});
},
type: BottomNavigationBarType.fixed,
fixedColor: Colors.red,
items: _bottomNavigationBaeList,
),
);
}
}
二、配置路由
这里设置跟路由'/'为Tabs，
final routes = {
'/': (context,{arguments}) => Tabs(arguments:arguments),
'/search': (context) => SearchPage(),
'/login': (context) => GHLoginPage(),
'/GHAddressList': (context,{arguments}) => GHAddressList(),
'/GHAddressEdit': (context,{arguments}) => GHAddressEdit(arguments:arguments),
'/OnlinePayments': (context,{arguments}) => GHOnlinePayments(arguments:arguments),
'/GHGoodsList': (context,{arguments}) => GHGoodsList(),
'/GHGoodsDetails': (context,{arguments}) => GHGoodsDetails(arguments:arguments),
/// 订单确认页
'/GHCheckOutPage': (context,{arguments}) => GHCheckOutPage(arguments:arguments),
/// 订单列表
'/GHOrderListPage': (context) => GHOrderListPage(),
};
三、设置路由以及默认界面
initialRoute: '/'默认为Tabs的路由，同时内部传参选择了特定的界面。
优化点：设置统一的路由名称管理类RouterName，方便识别管理。
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
/// 隐藏debug
debugShowCheckedModeBanner: false,
/// 配置路由
initialRoute: '/',
routes: routes,
onGenerateRoute: onGenerateRoute,
/// 设置主题
theme: ThemeData(
primaryColor: Colors.white,
),
);
}
}
示例图如下：
