Flutter 优雅的实现底部导航栏菜单（flutter web app）

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

本文章实现的效果如下：

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

classNavaHomePage1extendsStatefulWidget{ . o( X+ y; K$ k/ w- ~ @overrideState createState(){ 9 `1 E5 [! a7 l: b8 z return _NavaHomePageState();( N* z4 _0 w2 k" Y: \' V }1 }/ G; Z2 h3 @ }, R0 s8 w; _+ K1 P" S- e+ i 5 e& Q. W7 d+ S! M! O _+ `- y

class_NavaHomePageStateextendsState { * n: z/ m. m6 r0 H0 a: J! d ///当前显示的页面角标int _currentIndex = 0;* x e- N! N/ A$ m @override

Widget build(BuildContext context){ 1 [; g; C! R/ e4 V+ W return Scaffold( 5 C8 }4 z( g p$ _9 C+ ` appBar: AppBar(; t+ Q7 ^' {+ [! P% [" }6 H* E title: Text("底部导航"

), % @2 u7 v2 r( |8 S9 y' g ), 3 K! c$ Y. u8 d1 |. S% D; E$ f- s body: Text("这里是body $_currentIndex"), / R+ {5 Y* Q$ S4 g //底部导航栏% s8 }- |4 c* X" j" f5 ?! Q2 l bottomNavigationBar: NavigationBar( 7 I% _! J: p* d8 y) d

//菜单组- q+ D6 v7 x* f! s% c# C destinations: navigationList,# i2 m# G7 P2 F L# r0 j //当前选中的 " ~. c! p# K4 ~8 t- p, a( ^' Q" ^ selectedIndex:_currentIndex , . A& U& p* `# G

//选择点击事件 . }- f7 H P, {$ S5 b% W onDestinationSelected: (int index){ ; B# S f6 ]2 u5 Z* C( d9 r setState(() {/ x j6 W8 \9 W% |6 k6 I _currentIndex = index; v- }3 ?: K8 I6 K# j/ `: F" b });- _! L' f- t; k+ ]/ [9 d1 I },; q9 L Q x4 f: x, X: O

//背景颜色 ! [" O( E' z6 g# D5 D backgroundColor: Colors.white,8 [, |4 x) F5 ]0 E3 g8 a. T+ U$ \0 a //表面覆盖的一层浅色 * A' r0 k1 k3 D surfaceTintColor: Colors.red, + U. g9 R# h5 S9 v; ^ ), & H6 y; L' n0 P* o# F );. E3 I% E+ Q: F2 W% M' U; _ } ' R! n* z T# {& t1 L0 \ ... K$ u$ O- E" J* { }

Scaffold 意为脚手架，在Flutter开发中，可以理解为页面的结构组件，一个空的页面，基本都是以Scaffold来布局Scaffold的属性appBar配置的是页面的顶部标题Scaffold的属性body配置的是页面中间显示的内容主体，在本实例中显示的是一个简单的文本，读者可以替换为对应的具体的实现页页面。

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

staticconst List 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),)];小编的书籍，大家有兴趣可以阅读：（此处已添加书籍卡片，请到今日头条客户端查看）