線上直播系統原始碼，自定義底部 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，更多內容歡迎關注之後的文章