zoukankan      html  css  js  c++  java
  • Flutter -------- BottomNavigationBar 界面切换

    Android 中有BottomNavigationBar+Fragment切换

    而在Flutter也有的BottomNavigationBar


    效果图

    底部有两种情况

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

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

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

    超出4个默认情况:

    代码:

    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, 

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


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

  • 相关阅读:
    vuejs中使用echart图表
    锚点链接
    如何动态修改网页的标题(title)?
    如何为图片添加热点链接?(map + area)
    cookie
    如何为你的网站添加标志性的图标(头像)呢?
    图片拖拽上传至服务器
    js定时器之setTimeout的使用
    input[type=file]中使用ajaxSubmit来图片上传
    input[type=file]样式更改以及图片上传预览
  • 原文地址:https://www.cnblogs.com/zhangqie/p/10795922.html
Copyright © 2011-2022 走看看