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随时复制粘贴肯定是需要源码的

完整源码在这里

在这里插入图片描述

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

早起的年轻人 CSDN认证博客专家 移动开发 项目管理 Java
只要用心去做,每一件事情还是有可能成功的,当然成功是没有界限的,只不过是达到自己心里的那个目标,公众号:我的大前端生涯,一个爱喝茶的程序员,通常会搞搞SpringBoot 、Herbinate、Mybatiys、Android、iOS、Flutter、Vue、小程序等.
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页