Flutter BottomNavigationBar 三分钟实现一个常用APP首页底部导航菜单栏

题记 —— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过 文章底部扫码关注

【x2】各种系列的视频教程 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

【x4】三分钟视频快速带你浏览构建

【x5】一目了然的源码

如下图所示，默认情况下使用 BottomNavigationBar 来实现的底部菜单标签栏。

void main() {
  runApp(RootPage());
}

class RootPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class _HomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //标题栏
      appBar: AppBar(
        title: Text("测试"),
      ),
      //页面主体
      body: homeItemList[_selectIndex],
      //底部菜单栏
      bottomNavigationBar: buildBottom(),
    );
  }
  ... ...
}

  //所有的子页面
  List<HomeItemPage> homeItemList = [
    HomeItemPage(0),
    HomeItemPage(1),
    HomeItemPage(2),
  ];
  //当前选中的页面
  int _selectIndex = 0;

  //底部菜单栏
  buildBottom() {
    return BottomNavigationBar(
      items: [
        BottomNavigationBarItem(icon: Icon(Icons.home), label: "首页"),
        BottomNavigationBarItem(icon: Icon(Icons.message), label: "消息"),
        BottomNavigationBarItem(icon: Icon(Icons.people), label: "我的"),
      ],
      currentIndex: _selectIndex, //当前显示的页面索引
      //点击菜单栏的回调
      onTap: (int index) {
        setState(() {
          _selectIndex = index;
        });
      },
    );
  }

一个普通的子页面

class HomeItemPage extends StatelessWidget {
  int index = 0;
  HomeItemPage(this.index);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: selectColor(),
      body: Container(
        child: Text("页面  $index"),
      ),
    );
  }

  selectColor() {
    if (index == 0) {
      return Colors.grey;
    } else if (index == 1) {
      return Colors.blueGrey;
    } else {
      return Colors.green;
    }
  }
}

以小编的性格，要实现百万Demo随时复制粘贴肯定是需要源码的

完整源码在这里

当然以小编的性格，肯定是要有视频录制的，点击这里查看，有兴趣 你可以关注一下 西瓜视频 --- 早起的年轻人