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

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

一、封装viewmodel

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

 

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

​

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

 

  PageController tabPageController = PageController(); 

 

二、封装 bottomNavigationWidget

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

 

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

 

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

 

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

 

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

 

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

 

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

 

三、自定义 BottomNavigationBar 的使用

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

 

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

 

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