Flutter 底部导航栏（规则与不规则）

一、规则的“Tabbar”

微信.jpg

CSDN.jpg

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State {
  final List bottomBars = [
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.home), 
      title: Text('首页')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.search),
      title: Text('分类')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.shopping_cart), 
      title: Text('购物车')
    ),
    BottomNavigationBarItem(
      icon: Icon(CupertinoIcons.profile_circled), 
      title: Text('会员中心')
    ),
  ];

  /// 自行创建
  final List tabBodys = [
    HomePage(),
    CategoryPage(),
    CartPage(),
    MemberPage()
  ];

  int currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    super.initState();
    currentPage = tabBodys[currentIndex];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 244, 244, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        items: bottomBars,
        currentIndex: currentIndex,
        type: BottomNavigationBarType.fixed,
        onTap: (index){
          setState(() {
            print('点击了底部的第${index+1}个');
            currentIndex = index;
            currentPage = tabBodys[currentIndex];
          });
        },
      ),
      body: currentPage,
    );
  }
}

二、不规则的“Tabbar”

印象笔记.jpg

      bottomNavigationBar: BottomAppBar(
        color: Colors.lightBlue,
        shape: CircularNotchedRectangle(),
        child: Row(
          mainAxisSize: MainAxisSize.max,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.home),
              tooltip: '长按提示1',
              onPressed: () {
                print('按了第1个');
              },
            ),
            IconButton(
              color: Colors.white,
              icon: Icon(Icons.person),
              tooltip: '长按提示2',
              onPressed: () {
                print('按了第2个');
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          print('中间的');
        },
        tooltip: '提示',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

效果如图

demo.jpg