|
# ~; Q- s, s2 I 在业务开发中，开发者开发的业务中可能会用不到某一块的技术，但是小编建议，用不到的时候，可以顺便看看，当用到的时候就有足够的知识储备了，你可通会说，这会看了，时间长了就忘记了，小编要说的是，忘记不怕，你可以收藏或者关注我，当你忘记的时候，可以回来一看，小编会每周不定时更新内容每周必然会有更新，这是程序员的动力
* ]' z$ O4 D8 Y0 s X6 a5 o9 C 本文章实现的效果如下：  ' ^$ y: o9 g% U* k g, T" B
页面的主体是继承于StatefulWidgetStatefulWidget是一个可以更新页面显示样式的Widget，在Flutter开发中，如果未使用到状态管理框架如Getx这一类的内容，那么开发的所有的页面，只要涉及到页面中有数据更新，就需要使用StatefulWidget。 , b9 _" W0 y- w% o" A2 W! Z
classNavaHomePage1extendsStatefulWidget{: y9 P2 t6 q/ F) ^3 w- e/ w& p
@overrideState createState(){
1 M( k$ \5 C" f: t% l: ` return _NavaHomePageState();
7 _' {, W6 Q6 w; ` }
1 u& ]4 m0 k5 U! X/ {/ S1 ] }
; W7 L6 F) U1 ~# K8 e% q- `$ n# v2 \ H+ _( u
d+ a& ^: l$ Y class_NavaHomePageStateextendsState {
; V$ B6 @4 F: [5 k3 B; U ///当前显示的页面角标int _currentIndex = 0;
A+ [- X% f( c' t+ D @override
, }1 T! z5 P- D" X4 b, V Widget build(BuildContext context){! s- D+ O y( a- n8 C9 P
return Scaffold(
! @ o+ j( p) k: M3 i [ appBar: AppBar(
' U" ^0 W& Q; r- K title: Text("底部导航"
& c" K5 }0 e6 b. O4 L( n4 U8 k ),
\. B" Y, }" h+ T$ ^" X ),2 Y, l) ~# E! D: [1 p! ]# }: U
body: Text("这里是body $_currentIndex"),
6 p9 y/ P' c4 M" q4 X //底部导航栏
: g" |9 e- ?! {" ?2 V bottomNavigationBar: NavigationBar(
# G2 F, N8 D, r" b+ K. W% N - Y% [, g9 k" D8 H% b
//菜单组
k# P% m6 m2 V) W destinations: navigationList,
% Y" w% T: N7 N* D, Z //当前选中的+ f3 k0 d: I/ G/ \; `8 I0 g% X9 L; \
selectedIndex:_currentIndex ,
4 D7 B- D. A! R. r! X& ]$ ? # A5 c7 D9 z# i4 o/ ?# p! F9 T+ }* Q
//选择点击事件/ ?7 G N# \, I. @1 e
onDestinationSelected: (int index){6 q. c# D3 p7 M
setState(() {9 }& U' F4 r$ e7 m2 b+ z
_currentIndex = index;
1 T1 ^8 @6 Y! a9 A6 Z7 ` });8 n# m4 H l/ S0 V* P% B
},
% t) r8 D4 t0 S9 M e; y ( x0 J$ I$ e7 o5 ]4 t
//背景颜色
0 F" o% B1 n8 i+ Q' T- X backgroundColor: Colors.white,
; A E4 b$ w& r0 y3 ] //表面覆盖的一层浅色) ]; ]& v; X R2 @2 Z" E8 J' \4 Z9 r
surfaceTintColor: Colors.red,* F& l) ~, _9 {
),
- U. ?3 J7 ]& t- y5 w! X, j" P );3 }. L( d/ `, Y
}
3 U5 V8 i) s( r, I2 B3 V ..." k& j8 i; f6 o% e
} , ^ E' _; D6 w, G7 \% i( O
Scaffold 意为脚手架，在Flutter开发中，可以理解为页面的结构组件，一个空的页面，基本都是以Scaffold来布局Scaffold的属性appBar配置的是页面的顶部标题Scaffold的属性body配置的是页面中间显示的内容主体，在本实例中显示的是一个简单的文本，读者可以替换为对应的具体的实现页页面。 2 R" A' ^4 u: Q. m; n
Scaffold的属性bottomNavigationBar配置的就是页面的底部的导航栏菜单，这里使用了NavigationBar，NavigationBar中destinations属性用来配置菜单选项，要求最少有两个子菜单选项，本实现中定义如下：
% U* `& `) E' m- G4 E6 \3 ` staticconst List navigationList = [NavigationDestination(tooltip: "",icon: Icon(Icons.widgets_outlined),
- ]% K# S5 U- E9 x2 U$ I* _. X' q label: "菜单",selectedIcon: Icon(Icons.widgets),),NavigationDestination(tooltip: "",icon: Icon(Icons.file_open_outlined), 6 Z$ ]; F4 z2 u0 V' e8 k/ W/ W B
label: "发现",selectedIcon: Icon(Icons.file_open),),NavigationDestination(tooltip: "",icon: Icon(Icons.text_fields), ; g4 ~' w7 H) a! T( \; t! W
label: "列表",selectedIcon: Icon(Icons.text_fields_outlined),),NavigationDestination(tooltip: "",icon:
* d& m0 ~# Y" w$ ?# {/ L Icon(Icons.people_alt_outlined),label: "我的",selectedIcon: Icon(Icons.people),)];小编的书籍，大家有兴趣可以阅读：（此处已添加书籍卡片，请到今日头条客户端查看）
9 ]* N! T. f, \. p6 A3 |
/ ?6 d8 {( v' m* [* z9 f! }! b" A1 @) P
" _' _8 O9 k! b% H! M
8 b, J- r- c/ b3 m& P" g! I
| 
