flutter 带未读消息的底部导航

Posted 2023-04-27

参考技术A bottom_tab_bar,
用法和bottom_navigation_bar一样，但是新增了一些属性的用法

bottom navigation bar 里面的 icon and title.

回调，带的是tab的index
The callback that is called when a item is tapped.

The widget creating the bottom navigation bar needs to keep track of the current index and call setState to rebuild it with the newly provided index.

The index into [items] of the current active item.
当前激活的是哪一个tab

Defines the layout and behavior of a [BottomTabBar].

See documentation for [BottomTabBarType] for information on the meaning of different types.

The color of the selected item when bottom navigation bar is [BottomTabBarType.fixed].

If [fixedColor] is null then the theme's primary color, [ThemeData.primaryColor], is used. However if [BottomTabBar.type] is [BottomTabBarType.shifting] then [fixedColor] is ignored.

The size of all of the [BottomTabBarItem] icons.

See [BottomTabBarItem.icon] for more information.

动画是否开启，默认是开起的

未读消息的颜色，默认是fixedColor

按压水墨屏效果是否开启，默认是开启的，
还是带动画的，不太适合我们的正常项目

未读消息，是一个widget，可以自定义样式

未读消息

first import dependeny in pubspec.yaml

example:

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

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

重要消息

• flutter从入门 到精通 系列文章

---

本文章实现的效果如下：

在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),

  )
];

---

完毕