現如今開啟一個 App，比如微信、支付寶，都能看到一個底部導航欄，用來切換到不同的展示頁。今天就用 Flutter 實現一下這種效果。

在 Flutter 裡，基本上所有的東西都是元件。Flutter 也已經有了現成的底部導航欄元件了 -- BottomNavigationBar，所以用 Flutter 實現底部導航，其實是很簡單地一件事情，只需要知道怎麼使用就好了。

1. 首先，利用 IDE 實現程式碼大致的結構

import 'package:flutter/material.dart';

class BottomNav extends StatefulWidget {
  @override
 

  _BottomNavState createState() => _BottomNavState();
}

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    return Container(

    );
  }
}
複製程式碼

筆者用的是 vs code，然後有安裝 flutter 、dart 的外掛。要實現上述的結構，只要在編輯器中輸入 stful，然後就會有提示出來了，如圖所示：

vs code 編輯器會 dart 的支援是十分友好的了，也有很多提示，在編碼時可以充分利用。目前唯一的缺點應該就是缺少 flutter inspector 了。

2. 實現_BottomNavState 的 build 方法

class _BottomNavState extends State<BottomNav> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Bottom Navigation Demo')),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home'
 
)),
          BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Business')),
          BottomNavigationBarItem(icon: Icon(Icons.school), title: Text('School')),
        ],
        fixedColor: Colors.green,
        currentIndex: 0,
        onTap: (int idx) {}
      ),
    );
  }
}
複製程式碼

這時候，用模擬器看到的效果如下：

3. 新增互動

到這裡，我們已經實現了大概的效果，但是你會發現，點選底部的圖示切換，是沒有效果的。現在，就給底部導航新增互動行為。

• 定義變數_currentIndex，並將 BottomNavagationBar 的 currentIndex 的值用變數 _currentIndex 代替

int _currentIndex = 0;
複製程式碼

• 實現 BottomNavagationBar 的 onTap 方法

void onItemTapped(int idx) {
  setState(() {
    _currentIndex = idx;
  })
}
複製程式碼

至此，就完成了底部導航欄的功能啦。

完成程式碼請看這裡 bottom_navagation_bar.dart

最後

筆者最近在學習flutter，會持續地記錄自己的學習過程，並放在 github 上。

有問題歡迎提出，大家一起討論，一起進步。

參考資料

BottomNavigationBar class