Flutter NavigationBar 优雅的实现底部导航栏菜单

﹏ヽ暗。殇╰゛Y 2023-10-07 20:56 3阅读 0赞

> 程序员如果敲一会就停半天，抱着一杯茶，表情拧巴，那才是在编程，在之前我要实现一级标签效果，我还在苦苦写了好多嵌套的代码，当我看到 Clip 时，泪奔啊，原来一个组件就可以实现，所以从事Flutter开发的小伙伴可以瞅瞅效果，万一用上呢 。

**重要消息**

*  [flutter从入门 到精通 系列文章][flutter_ _]

--------------------

本文章实现的效果如下：  
![在这里插入图片描述][e2aca1cd8b974161996a8d63a9f532ca.png]

在Flutter开发中NavigationBar 学用来配置底部菜单栏选项。

##### 1 页面的主体是继承于StatefulWidget #####

StatefulWidget是一个可以更新页面显示样式的Widget，在Flutter开发中，如果未使用到状态管理框架如Getx这一类的内容，那么开发的所有的页面，只要涉及到页面中有数据更新，就需要使用StatefulWidget。

class NavaHomePage1 extends StatefulWidget {
        
      @override
      State<StatefulWidget> createState() {
        
        return _NavaHomePageState();
      }
    }
    
    class _NavaHomePageState extends State<NavaHomePage1> {
        
      ///当前显示的页面角标
      int _currentIndex = 0;
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text("底部导航"),
          ),
          body: Text("这里是body $_currentIndex"),
          //底部导航栏
          bottomNavigationBar: NavigationBar(
            //菜单组
            destinations: navigationList,
            //当前选中的
            selectedIndex:_currentIndex ,
            //选择点击事件
            onDestinationSelected: (int index){
        
              setState(() {
        
                _currentIndex = index;
              });
            },
            //背景颜色
            backgroundColor: Colors.white,
            //表面覆盖的一层浅色
            surfaceTintColor: Colors.red,
          ),
        );
      }
      ...
    }

Scaffold 意为脚手架，在Flutter开发中，可以理解为页面的结构组件，一个空的页面，基本都是以Scaffold来布局。

Scaffold的属性appBar配置的是页面的顶部标题。

Scaffold的属性body配置的是页面中间显示的内容主体，在本实例中显示的是一个简单的文本，读者可以替换为对应的具体的实现页页面。

Scaffold的属性bottomNavigationBar配置的就是页面的底部的导航栏菜单，这里使用了NavigationBar，NavigationBar中destinations属性用来配置菜单选项，要求最少有两个子菜单选项，本实现中定义如下：

static const List<NavigationDestination> navigationList = [
      NavigationDestination(
        tooltip: "",
        icon: Icon(Icons.widgets_outlined),
        label: "菜单",
        selectedIcon: Icon(Icons.widgets),
    
      ),
      NavigationDestination(
        tooltip: "",
        icon: Icon(Icons.file_open_outlined),
        label: "发现",
        selectedIcon: Icon(Icons.file_open),
    
      ),
      NavigationDestination(
        tooltip: "",
        icon: Icon(Icons.text_fields),
        label: "列表",
        selectedIcon: Icon(Icons.text_fields_outlined),
    
      ),
      NavigationDestination(
        tooltip: "",
        icon: Icon(Icons.people_alt_outlined),
        label: "我的",
        selectedIcon: Icon(Icons.people),
    
      )
    ];

--------------------

完毕

[flutter_ _]: https://blog.csdn.net/zl18603543572/article/details/93532582
[e2aca1cd8b974161996a8d63a9f532ca.png]: https://img-blog.csdnimg.cn/e2aca1cd8b974161996a8d63a9f532ca.png