01 | class 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 |
15 | class DemoPage extends StatefulWidget { |
16 | DemoPage({Key key}) : super (key: key); |
17 |
18 | @override |
19 | _DemoPageState createState() => _DemoPageState(); |
20 | } |
21 |
22 | class _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 | } |