Flutter 优雅的实现底部导航栏菜单

 

在业务开发中，开发者开发的业务中可能会用不到某一块的技术，但是小编建议，用不到的时候，可以顺便看看，当用到的时候就有足够的知识储备了，你可通会说，这会看了，时间长了就忘记了，小编要说的是，忘记不怕，你可以收藏或者关注我，当你忘记的时候，可以回来一看，小编会每周不定时更新内容每周必然会有更新，这是程序员的动力

本文章实现的效果如下：

页面的主体是继承于StatefulWidget

StatefulWidget是一个可以更新页面显示样式的Widget，在Flutter开发中，如果未使用到状态管理框架如Getx这一类的内容，那么开发的所有的页面，只要涉及到页面中有数据更新，就需要使用StatefulWidget。

class NavaHomePage1 extends StatefulWidget { @override State<StatefulWidget> createState() { return _NavaHomePageState(); } } class _NavaHomePageState extends State<NavaHomePage1> { ///当前显示的页面角标 int _currentIndex = 0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("底部导航"), ), body: Text("这里是body $_currentIndex"), //底部导航栏 bottomNavigationBar: NavigationBar( //菜单组 destinations: navigationList, //当前选中的 selectedIndex:_currentIndex , //选择点击事件 onDestinationSelected: (int index){ setState(() { _currentIndex = index; }); }, //背景颜色 backgroundColor: Colors.white, //表面覆盖的一层浅色 surfaceTintColor: Colors.red, ), ); } ... }

Scaffold 意为脚手架，在Flutter开发中，可以理解为页面的结构组件，一个空的页面，基本都是以Scaffold来布局。

Scaffold的属性appBar配置的是页面的顶部标题。

Scaffold的属性body配置的是页面中间显示的内容主体，在本实例中显示的是一个简单的文本，读者可以替换为对应的具体的实现页页面。

Scaffold的属性bottomNavigationBar配置的就是页面的底部的导航栏菜单，这里使用了NavigationBar，NavigationBar中destinations属性用来配置菜单选项，要求最少有两个子菜单选项，本实现中定义如下：

static const List<NavigationDestination> navigationList = [ NavigationDestination( tooltip: "", icon: Icon(Icons.widgets_outlined), label: "菜单", selectedIcon: Icon(Icons.widgets), ), NavigationDestination( tooltip: "", icon: Icon(Icons.file_open_outlined), label: "发现", selectedIcon: Icon(Icons.file_open), ), NavigationDestination( tooltip: "", icon: Icon(Icons.text_fields), label: "列表", selectedIcon: Icon(Icons.text_fields_outlined), ), NavigationDestination( tooltip: "", icon: Icon(Icons.people_alt_outlined), label: "我的", selectedIcon: Icon(Icons.people), ) ];

小编的书籍，大家有兴趣可以阅读：