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

文章目錄

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

相關文章

Flutter 環境搭建以及填坑指南（Win10 系統且已有 Android 開發環境 ）

Flutter 入門實現 ListView 列表頁面以及收藏頁面

Flutter Widget 靜態佈局實戰

Flutter 容器類 Widget

實現效果截圖

實現分析

首頁實現分析

• 底部 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