Flutter -------- BottomNavigationBar 界面切换

忘是亡心i 2022-01-16 04:19 432阅读 0赞

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][]

Android 中有BottomNavigationBar+Fragment切换

而在Flutter也有的BottomNavigationBar

效果图

![1041439-20190430143654393-202233256.png][]

底部有两种情况

底部导航栏的类型更改其项目的显示方式。如果未指定，则 当少于四个项时，它会自动设置为BottomNavigationBarType.fixed， 否则为BottomNavigationBarType.shifting。

BottomNavigationBarType.fixed，当少于四个项目时的默认值。如果选中的项为非null，则使用fixedColor渲染，否则使用主题的ThemeData.primaryColor。导航栏的背景颜色是默认的材质背景颜色，ThemeData.canvasColor（基本上是不透明的白色）。

BottomNavigationBarType.shifting，当有四个或更多项时的默认值。所有项目都以白色呈现，导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同 。在这种情况下，假设每个项目将具有不同的背景颜色，并且背景颜色将与白色形成鲜明对比。

超出4个默认情况：

![1041439-20190430143720298-34796901.png][]

代码：

class BottomNavigationBarLnt extends StatefulWidget {
      BottomNavigationBarLnt({Key key}) : super(key: key);
    
      @override
      BottomNavigationBarTest createState() => BottomNavigationBarTest();
    }
    
    class BottomNavigationBarTest extends State<BottomNavigationBarLnt>{
    
      int _cuurentIndex = 0;
      final List<Widget> chiledList = [Home(),Tab2(),Tab3(),Home()];
      final List<BottomNavigationBarItem> _listItem = <BottomNavigationBarItem>[
        BottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text("Home")
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.book),
          title: Text("book")
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.music_video),
          title: Text("music")
        ),
        BottomNavigationBarItem(
            icon: Icon(Icons.movie),
            title: Text("movie")
        ),
      ];
    
      @override
      Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          bottomNavigationBar: BottomNavigationBar(
              items: _listItem,
              fixedColor: Colors.blue,
             // type: BottomNavigationBarType.fixed,
              currentIndex: _cuurentIndex,
              onTap: _onItemTapped,
          ),
          body: chiledList[_cuurentIndex],
        );
      }
    
      void _onItemTapped(int index) {
        setState(() {
          _cuurentIndex = index;
        });
      }
    }

超过4个item时添加类型 type: BottomNavigationBarType.fixed,

把上面注释的代码打开就行

![1041439-20190430143741761-983793928.png][]

官方文档  
[https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html][https_docs.flutter.io_flutter_material_BottomNavigationBar-class.html]

转载于:https://my.oschina.net/zhangqie/blog/3046760

[2019_Python_]: https://my.oschina.net/u/2663968/blog/3061697
[hot3.png]: /images/20220114/c41bea140d1642448cb1909d80cdc55d.png
[1041439-20190430143654393-202233256.png]: /images/20220114/53aa90bb7aaf4c22a3f70a63c0fc9ab5.png
[1041439-20190430143720298-34796901.png]: /images/20220114/af7f3306b524448c87b674adea510ac8.png
[1041439-20190430143741761-983793928.png]: /images/20220114/885796bc70e840ccaf4e887824186dfb.png
[https_docs.flutter.io_flutter_material_BottomNavigationBar-class.html]: https://www.cnblogs.com/zhangqie/p/%20%E5%AE%98%E6%96%B9%E6%96%87%E6%A1%A3%20https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html