首页 > 建站教程 > APP开发,混合APP >  Flutter笔记5:BottomNavigationBar底部导航栏详解正文

Flutter笔记5:BottomNavigationBar底部导航栏详解

BottomNavigationBar是设置底部导航栏的wiget,和BottomAppBar很相似,通过BottomNavigationBarType属性,有两种选中样式可选,一种是改变颜色表示选中效果,一种是通过是否显示文字体现出来:
01class MyApp extends StatelessWidget {
02  @override
03  Widget build(BuildContext context) {
04    return MaterialApp(
05      title: 'BottomAppBar组件',
06      home: Scaffold(
07        appBar: AppBar(title: Text('BottomAppBar组件')),
08        //底部导航栏BottomNavigationBar
09        bottomNavigationBar: DemoPage(),
10      ),
11    );
12  }
13}
14 
15class DemoPage extends StatefulWidget {
16  DemoPage({Key key}) : super(key: key);
17 
18  @override
19  _DemoPageState createState() => _DemoPageState();
20}
21 
22class _DemoPageState extends State<DemoPage> {
23  //默认当前选中的项
24  int _currentIndex = 0;
25  void _onItemTapped(int index) {
26    setState(() {
27      _currentIndex = index;
28    });
29  }
30 
31  @override
32  Widget build(BuildContext context) {
33    // return BottomNavigationBar(
34    //   //底部按钮类型 fixed  图标下文字始终显示
35    //   type: BottomNavigationBarType.fixed,
36    //   //按钮大小
37    //   iconSize: 20.0,
38    //   //按钮点击事件
39    //   onTap: _onItemTapped,
40    //   //当前选中项
41    //   currentIndex: _currentIndex,
42    //   //当BottomNavigationBarType时,选中的颜色
43    //   fixedColor: Colors.orange,
44    //   items: <BottomNavigationBarItem>[
45    //     BottomNavigationBarItem(title: Text('聊天'), icon: Icon(Icons.chat)),
46    //     BottomNavigationBarItem(title: Text('朋友圈'), icon: Icon(Icons.refresh)),
47    //     BottomNavigationBarItem(title: Text('我的'), icon: Icon(Icons.person)),
48    //   ],
49    // );
50    return BottomNavigationBar(
51      //底部按钮类型 shifting 移位样式 图标下文字选中时显示
52      type: BottomNavigationBarType.shifting,
53      //按钮大小
54      iconSize: 20.0,
55      //按钮点击事件
56      onTap: _onItemTapped,
57      //当前选中项
58      currentIndex: _currentIndex,
59      items: <BottomNavigationBarItem>[
60        BottomNavigationBarItem(
61            title: Text(
62              '聊天',
63              style: TextStyle(color: Colors.red),
64            ),
65            icon: Icon(
66              Icons.chat,
67              color: Colors.red,
68            )),
69        BottomNavigationBarItem(
70            title: Text('朋友圈', style: TextStyle(color: Colors.red)),
71            icon: Icon(Icons.refresh, color: Colors.red)),
72        BottomNavigationBarItem(
73            title: Text('我的', style: TextStyle(color: Colors.red)),
74            icon: Icon(Icons.person, color: Colors.red)),
75      ],
76    );
77  }
78}