Flutter项目搭建之底部TabBar创建

一、设置总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,
      ),
    );
  }
}

示例图如下：