|
' V4 T! r1 ^2 B% _! j. Q+ O
在业务开发中，开发者开发的业务中可能会用不到某一块的技术，但是小编建议，用不到的时候，可以顺便看看，当用到的时候就有足够的知识储备了，你可通会说，这会看了，时间长了就忘记了，小编要说的是，忘记不怕，你可以收藏或者关注我，当你忘记的时候，可以回来一看，小编会每周不定时更新内容每周必然会有更新，这是程序员的动力
& K2 L+ f- B2 E9 a5 N3 o 本文章实现的效果如下： 
) i L0 d5 C s* U. o G 页面的主体是继承于StatefulWidgetStatefulWidget是一个可以更新页面显示样式的Widget，在Flutter开发中，如果未使用到状态管理框架如Getx这一类的内容，那么开发的所有的页面，只要涉及到页面中有数据更新，就需要使用StatefulWidget。 ?3 b' Z1 C3 i5 M6 r
classNavaHomePage1extendsStatefulWidget{( L# r& U1 [* F. ?1 b3 m* ?/ e
@overrideState createState(){
) d5 J$ x( e% P$ j; i( h! L return _NavaHomePageState();4 x! t0 R R% a* s. }
}
# D5 e! ~0 ?4 \ }
$ `) F' Q: c7 b! K/ L3 o. ^; X6 n
9 c1 Z- o3 e1 W& s/ v
* _( A2 I4 ], \4 {) `! T6 L9 q: B class_NavaHomePageStateextendsState {& ~8 h A9 J+ Y* k
///当前显示的页面角标int _currentIndex = 0;0 x. b6 I. p$ W; B
@override
9 ]+ e/ O1 Y. o* N Widget build(BuildContext context){
+ |' R* N% _' I" o. i! O# ]- o return Scaffold(
Y% o' z& c" n) P2 w0 M2 K appBar: AppBar(, r+ l. [" f' r' b* [3 W
title: Text("底部导航" 9 l" j, V0 f. ~* V
),2 V& M. k2 }' B: D! [0 k( K
)," j+ z ]! |. w; N) V3 D+ i
body: Text("这里是body $_currentIndex")," a. w4 c9 ^, t9 F' y4 L! q. T2 D
//底部导航栏
5 s2 ?0 G7 q( H7 K; Y bottomNavigationBar: NavigationBar(% j! ?/ w c+ k% E& l
+ M; [: v. S( _% b5 z6 O //菜单组
, d X% C: s" r& l8 C* B destinations: navigationList,4 [/ \6 P% w- z. Z/ m, T
//当前选中的 @2 g7 o5 {* \; }/ U6 v
selectedIndex:_currentIndex ,/ t- x' z* e2 d2 o1 ?2 k' v, E
/ {. a, z# M9 }; k+ @' x
//选择点击事件* E$ o1 R$ `" A, m2 \
onDestinationSelected: (int index){ x5 D6 T! O% T$ `7 @3 }: _
setState(() {% c1 d2 a: ~* Z, t# ]
_currentIndex = index;
9 o& {1 d' c8 U `5 m });; e( B. Y3 Z: V- G) P
},- `# Z# J2 U U/ L, ^/ i# o
" q% m2 ]# `; [9 L. j6 k; N! Z
//背景颜色# a- S- p9 f% ~7 A
backgroundColor: Colors.white,7 q6 R# p/ }1 |& I
//表面覆盖的一层浅色
' S, Z/ `- f: u5 B- @! | surfaceTintColor: Colors.red,0 V2 m8 i# f) ^2 l
),7 D# i$ a' |" \7 p% M' ~
);9 }) _% A! M e+ a- R6 |4 H, H6 ^
}
. T3 l: a. U6 z/ h ...# w, o+ X5 L. l( q4 ~1 R
}
- W* q3 m9 E% O8 v Scaffold 意为脚手架，在Flutter开发中，可以理解为页面的结构组件，一个空的页面，基本都是以Scaffold来布局Scaffold的属性appBar配置的是页面的顶部标题Scaffold的属性body配置的是页面中间显示的内容主体，在本实例中显示的是一个简单的文本，读者可以替换为对应的具体的实现页页面。 3 G0 B9 y0 e+ V. b/ C$ }
Scaffold的属性bottomNavigationBar配置的就是页面的底部的导航栏菜单，这里使用了NavigationBar，NavigationBar中destinations属性用来配置菜单选项，要求最少有两个子菜单选项，本实现中定义如下： $ @1 t) ^5 ~2 z: j/ Z! u
staticconst List navigationList = [NavigationDestination(tooltip: "",icon: Icon(Icons.widgets_outlined),
5 _) H& O$ a* Z# W1 Z; @7 a9 {0 B label: "菜单",selectedIcon: Icon(Icons.widgets),),NavigationDestination(tooltip: "",icon: Icon(Icons.file_open_outlined),
) |+ F; m( G3 h6 T# i label: "发现",selectedIcon: Icon(Icons.file_open),),NavigationDestination(tooltip: "",icon: Icon(Icons.text_fields), ( ]6 A7 |' l1 w5 ^
label: "列表",selectedIcon: Icon(Icons.text_fields_outlined),),NavigationDestination(tooltip: "",icon:
% d# g: D; U( a& L) ^) n Icon(Icons.people_alt_outlined),label: "我的",selectedIcon: Icon(Icons.people),)];小编的书籍，大家有兴趣可以阅读：（此处已添加书籍卡片，请到今日头条客户端查看） % i& Z+ S& p, L8 Y( {! I& C" I
* f9 E* |: _$ x# |( O! I' p- m- Z
# Y5 F; g- V: r+ ~7 e
6 T* \% q9 p8 x! H3 K, }6 a
5 ` s4 u! ?& g, b | 
