在线直播系统源码，自定义底部 BottomNavigationBar

一、封装viewmodel

在 viewmodel 中，我们需要定义一个当前选中下标，所有tabItem 的数组，还需要一个选中下标的切换方法

<br>int currentIndex = 0;<br>  List barItemList = [<br>    {<br>      "title": "首页",<br>      "normalIcon": 'assets/images/ic_error.png',<br>      "selectIcon": 'assets/images/ic_error.png'<br>    },<br>    {<br>      "title": "通讯录",<br>      "normalIcon": 'assets/images/ic_error.png',<br>      "selectIcon": 'assets/images/ic_error.png'<br>    },<br>    {<br>      "title": "发现",<br>      "normalIcon": 'assets/images/ic_error.png',<br>      "selectIcon": 'assets/images/ic_error.png'<br>    },<br>    {<br>      "title": "我",<br>      "normalIcon": 'assets/images/ic_error.png',<br>      "selectIcon": 'assets/images/ic_error.png'<br>    },<br>  ];<br>  // 选中下标的切换<br>  changeBottomTabIndex(int index) {<br>    currentIndex = index;<br>    notifyListeners();<br>  } 

为了提升后期的可扩展性，我将使用PageController 来管理我的页面，因此我们还需要初始化一个 PageController

1	`<br> PageController tabPageController = PageController();`

二、封装 bottomNavigationWidget

前面我们封装了tabItem 的属性，交互等功能，现在我们就要来实现UI部分的封装了。

bottomWidget 的封装，我这里直接封装成一个组件，并且在组件中自定义了整个样式

static Widget bottomNavigationWidget(TabNavigationViewModel model) {<br>    return Container(<br>      height: 56.h + Get.mediaQuery.padding.bottom,<br>      decoration: BoxDecoration(<br>          color: Colors.red,<br>          borderRadius: BorderRadius.only(<br>            topRight: Radius.circular(24.r),<br>            topLeft: Radius.circular(24.r),<br>          ),<br>          boxShadow: [BoxShadow(color: Colors.green, blurRadius: 0.12.r)]),<br>      child: Row(<br>        mainAxisAlignment: MainAxisAlignment.spaceAround,<br>        children: List<Widget>.generate(model.barItemList.length,<br>            (index) => _barItem(model.barItemList[index], model, index)),<br>      ),<br>    );<br>  } 

从上面代码中，可以看到 height 的高度，我给了一个56的高度，再加上一个bottom 的高度，因为有些手机是有底部bottom 的，所以我们需要把这个高度给预留出来。

然后使用 List.generate 的方式，生成单独的itemBar ,接下来看一下 _barItem 组件的封装

<br>  static Widget _barItem(item, TabNavigationViewModel model, int index) {<br>    return InkWell(<br>      onTap: () {<br>        if (model.currentIndex != index) {<br>          model.currentIndex = index;<br>          model.changeBottomTabIndex(index);<br>          model.tabPageController.jumpToPage(index);<br>        }<br>      },<br>      child: Column(<br>        mainAxisAlignment: MainAxisAlignment.center,<br>        children: [<br>          Image.asset(<br>            model.currentIndex == index<br>                ? item['selectIcon']<br>                : item['normalIcon'],<br>            width: 24,<br>            height: 24,<br>            fit: BoxFit.cover,<br>          ),<br>          const SizedBox(<br>            height: 10,<br>          ),<br>          Text(<br>            item['title'],<br>            style: TextStyle(<br>              color: model.currentIndex == index ? Colors.white : Colors.black,<br>            ),<br>          ),<br>        ],<br>      ),<br>    );<br>  } 

代码写到这里，我们需要使用的整个BottomNavigationBar 就已经封装完成了。

三、自定义 BottomNavigationBar 的使用

前面封装完成了整个BottomNavigationBar 的自定义，那么我们该怎么使用呢？

<br>Scaffold(<br>            body: PageView(<br>              controller: model.tabPageController,<br>              // physics: const NeverScrollableScrollPhysics(),<br>              children: [<br>                const HomePage(),<br>                Container(<br>                  color: Colors.grey,<br>                ),<br>                Container(<br>                  color: Colors.red,<br>                ),<br>                Container(<br>                  color: Colors.grey,<br>                ),<br>              ],<br>              onPageChanged: (index) {<br>                model.currentIndex = index;<br>                model.changeBottomTabIndex(index);<br>              },<br>            ),<br>            bottomNavigationBar:<br>              TabNavigationWidget.bottomNavigationWidget(model),<br>          )

以上就是在线直播系统源码，自定义底部 BottomNavigationBar，更多内容欢迎关注之后的文章