BottomNavigationBar - Lab.Lawliet

388 字

2 分钟

BottomNavigationBar

2021-11-07

2026-10-12

Flutter

无标签

前言#

开发一个应用，界面的开始大部分情况下都是一个底部标签控制器。而在Flutter中就是 BottomNavigationBar 。

一、创建 BottomNavigationBar#

这里我想创建一个类似微信的底部标签，Widget内我会这样写：

1
  @override
2
  Widget build(BuildContext context) {
3
    return Scaffold(
4
      bottomNavigationBar: BottomNavigationBar(
5
        items: const [
6
          BottomNavigationBarItem(
7
            icon: Icon(Icons.chat),
8
            label: '微信',
9
          ),
10
          BottomNavigationBarItem(
11
            icon: Icon(Icons.contact_mail),
12
            label: '通讯录',
13
          ),
14
          BottomNavigationBarItem(
15
            icon: Icon(Icons.nature_people),
16
            label: '发现',
17
          ),
18
          BottomNavigationBarItem(
19
            icon: Icon(Icons.settings),
20
            label: '我',
21
          ),
22
        ],
23
      ),
24
    );
25
  }

显示问题#

看看效果：

怎么什么都没有？仔细看下其实都是白色的，我们设置一下颜色看看：

1
  @override
2
  Widget build(BuildContext context) {
3
    return Scaffold(
4
      bottomNavigationBar: BottomNavigationBar(
5
        selectedItemColor: Colors.green,
6
        unselectedItemColor: Colors.grey,
7
        ...
8
      ),
9
    );
10
  }

但是选中的标签的样式会比较突出，怎么改成我们熟悉的样式呢？

1
  @override
2
  Widget build(BuildContext context) {
3
    return Scaffold(
4
      bottomNavigationBar: BottomNavigationBar(
5
        type: BottomNavigationBarType.fixed,
6
        selectedItemColor: Colors.green,
7
        unselectedItemColor: Colors.grey,
8
        ...
9
      ),
10
    );
11
  }

二、选中标签#

这里明显是需要 StatefulWidget 的。通过 BottomNavigationBar: onTap 修改选中的标签

1
class MyHomePage extends StatefulWidget {
2
  const MyHomePage({Key? key}) : super(key: key);
3

4
  @override
5
  State<StatefulWidget> createState() {
6
    return _MyHomePageDataSource();
7
  }
8
}
9

10
class _MyHomePageDataSource extends State<MyHomePage> {
11
  int _selectedTab = 0;
12

13
  @override
14
  Widget build(BuildContext context) {
15
    return Scaffold(
16
      bottomNavigationBar: BottomNavigationBar(
17
        ...
18
        currentIndex: _selectedTab,
19
        onTap: (idx) {
20
          setState(() {
21
            _selectedTab = idx;
22
          });
23
        },
24
        ...
25
      ),
26
    );
27
  }
28
}

三、页面切换#

选中了标签我们也需要切换到对应的页面才行，而具体显示哪个页面是由 Scaffold 的 body 控制的。

1
class _MyHomePageDataSource extends State<MyHomePage> {
2
  int _selectedTab = 0;
3
  final List<Widget> _pages = [MessagePage(), ContactsPage(), MommentPage(), MinePage()];
4

5
  @override
6
  Widget build(BuildContext context) {
7
    return Scaffold(
8
      body: _pages[_selectedTab],// 切换页面
9
      bottomNavigationBar: BottomNavigationBar(
10
        ...
11
        currentIndex: _selectedTab,
12
        onTap: (idx) {
13
          setState(() {
14
            _selectedTab = idx; // 切换选中标签
15
          });
16
        },
17
        ...
18
      ),
19
    );
20
  }
21
}