Flutter 搭建具有 Drawer 和 BottomNavigationBar 的靜態項目框架

文章目錄

• 相關文章推薦
• 實現效果
• 實現分析
  • 首頁實現
  • 側邊欄實現
• 源碼

相關文章
Flutter Widget 靜態佈局實戰
Flutter 容器類 Widget
Flutter 入門實現 ListView 列表頁面以及收藏頁面
Flutter 環境搭建以及填坑指南（Win10 系統且已有 Android 開發環境

實現效果截圖

實現分析

首頁實現分析

• 底部 tab 實現

Flutter 提供了一整套的 Material Design組件供我們使用
地址是：Material Components Widgets

而底部導航欄，我們這裏使用的就是 Material Design 組件中的 BottomNavigationBar 組件
文檔地址是：BottomNavigationBar 官方文檔

先定義好要使用的數據：tab 對應的圖標和問題，以及頁面。
僞代碼如下：

void _initData() {
    /*
     * 初始化選中和未選中的icon
     */
    tabImages = [
      [
        getTabImage('images/bar_home_unselected.png'),
        getTabImage('images/bar_home_selected.png')
      ],
      [
        getTabImage('images/bar_publish_unselected.png'),
        getTabImage('images/bar_publish_selected.png')
      ],
      [
        getTabImage('images/bar_me_unselected.png'),
        getTabImage('images/bar_me_selected.png')
      ]
    ];
    /*
     * 三個子界面
     */
    _pageList = [
      new HomePage(),
      new FunctionPage(),
      new MinePage(),
    ];
  }

ps: 每個頁面創建可查看文末的源碼

可以先看官方文檔中給的例子，也可以查看我這裏實現的例子，僞代碼如下：

_initData();
 return Scaffold(     
      // 內容
      body: _pageList[_tabIndex],
      // 導航欄
      bottomNavigationBar: new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: getTabIcon(0), title: getTabTitle(0)),
          new BottomNavigationBarItem(
              icon: getTabIcon(1), title: getTabTitle(1)),
          new BottomNavigationBarItem(
              icon: getTabIcon(2), title: getTabTitle(2)),
        ],
        // 點擊 item 會有淡入淡出效果
        type: BottomNavigationBarType.shifting,
        //默認選中首頁
        currentIndex: _tabIndex,
        // 圖標大小
        iconSize: 24.0,
        // 點擊事件
        onTap: _onItemTapped,
      ),
    );

• Scaffold Widget 提供了基本的 Material Design 佈局所以我們直接 return new Scaffold組件。

• body: _pageList[_tabIndex]
  body 每個 tab 組件顯示的內容，這裏通過一個集合來裝載tab對應的頁面，然後通過點擊獲取到 _tabIndex索引，最後再去集合中索引出對應的頁面。

• bottomNavigationBar
  底部tab欄，items集合存放的就是每個tab item 。而BottomNavigationBarItem 就是具體tab顯示的圖片和文字信息。type表示底部導航欄的樣式，這裏有兩個值，一個是shifting，也就是截圖中的效果，另一個是fixed，就是常規的底部導航欄。onTap: _onItemTapped表示點擊後的操作。

ps：方法前加_表示方法是私有的

_onItemTapped 的僞代碼如下：

  void _onItemTapped(int index) {
    setState(() {
      _tabIndex = index;
    });
  }

主要就是刷新了_tabIndex的值，使body: _pageList[_tabIndex] 能夠刷新到對應的頁面。

側邊欄實現分析

• 側邊欄頂部沉浸式
• 側邊欄自定義圖標以及全局打開方式

實現的僞代碼如下：

 // 初始化數據
    _initData();
    return Scaffold(
      key: _globalKey,
      // 側邊欄
      drawer: new Drawer(
        child: ListView(
          // 去除頂部灰色條
          padding: EdgeInsets.zero,
          children: <Widget>[
            userHeader,
            ListTile(
              title: Text("註冊登錄"),
              leading: Icon(Icons.favorite),
              onTap: () => _onPageOpen(context, "註冊登錄"),
            ),
            ListTile(
              title: Text("設置"),
              leading: Icon(Icons.settings),
              onTap: () => _onPageOpen(context, "設置"),
            ),
          ],
        ),
      ),
      // 內容
      body: _pageList[_tabIndex],
      // 導航欄
      bottomNavigationBar: new BottomNavigationBar(),
    );

側邊欄頂部padding: EdgeInsets.zero,即可去掉頂部灰色條條。

側邊欄的打開方式有兩種：

• 一個是在當前的Scaffold 組件下的drawer 裏邊通過點擊事件調用

Scaffold.of(context).openDrawer();

• 定義一個全局的key，例如我們本例中實現的。
  由於是全局的側邊欄可打開，因此我們在MainPage.dart文件中聲明全局對的key,然後通過構造方法傳參的方式將key傳遞給HomePage.dart頁面，那麼這時候點擊HomePage.dart頁面左上角的圖標的時候就可以通過下面的代碼來打開側邊欄了

 leading: Builder(builder: (context) {
            return IconButton(
              icon: Icon(Icons.menu), //自定義圖標
              onPressed: () {
                // 打開抽屜菜單
                _globalKey.currentState.openDrawer();
              },
            );

側邊欄關閉可通過點擊事件調用

 Navigator.pop(context); // 關閉側邊欄

更多側邊欄相關內容可查看這篇博客 Flutter之drawer詳細分析（你要的操作都有）

源碼

如果對你有幫助，請幫忙點個star，謝謝~

如有錯誤歡迎指出，共同進步。
源碼地址：FlutterTest