Flutter 中 BottomNavigationBar 定義底部導航條

BottomNavigationBar 是底部導航條，可以讓我們定義底部 Tab 切換，在Scaffold 元件中通過配置bottomNavigationBar來實現該功能。

常見的屬性：

1. items 底部導航條按鈕集合。值的型別為List；

2. iconSize 圖示大小。值的型別為double；

3. currentIndex 預設選中Tab的下標。值的型別為int；

4. fixedColor 選中Tab的顏色。值的型別為Colors；

5. type 按鈕的顯示型別。常用以下兩種值：

(1). BottomNavigationBarType.fixed 固定效果；

(2). BottomNavigationBarType.shifting 動畫效果；

6. onTap 點選Tab時的回撥函式。

利用BottomNavigationBar實現一個App的分頁切換。

首先是入口檔案 main.dart。

import 'package:flutter/material.dart';

// 引入拆分的Tabs元件
import 'pages/Tabs.dart';

void main(){
    runApp(MyApp());
}

// 抽離成一個單獨的元件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Tabs(),
            // 主題
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

以下是入口檔案main.dart中引入的Tabs.dart。

// lib/pages/Tabs.dart

import "package:flutter/material.dart";

// 引入子頁面
import 'tabs/Home.dart';
import 'tabs/Category.dart';
import 'tabs/Setting.dart';


class Tabs extends StatefulWidget {
    Tabs({Key key}) : super(key: key);
    _TabsState createState() => _TabsState();
}

class _TabsState extends State<Tabs>{

    // 當前選中標籤的下標
    int _currentIndex = 0;
    // 當前頁面陣列
    List _pageList = [
        HomePage(),
        CategoryPage(),
        SettingPage()
    ];
    
    @override
    Widget build(BuildContext context) {
    return Container(
        child: Scaffold(
            // 導航條
            appBar:AppBar(title:Text('Flutter App')),
            // 主體
            body:this._pageList[this._currentIndex],
            // 底部導航條
            bottomNavigationBar: BottomNavigationBar(
                // 當前選單下標
                currentIndex: this._currentIndex,
                // 點選事件,獲取當前點選的標籤下標
                onTap: (int index){
                    setState(() {
                       this._currentIndex=index;
                    });
                },
                // 圖示大小
                iconSize: 30.0,
                // 選中圖示的顏色
                fixedColor: Colors.red,
                // 配置底部可以有多個Tab標籤頁(5個時就需要)
                type: BottomNavigationBarType.fixed,
                items: [
                    // 只能是BottomNavigationBarItem的型別
                    BottomNavigationBarItem(
                        icon:Icon(Icons.home),
                        label:"首頁"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.category),
                        label:"分類"
                    ),
                    BottomNavigationBarItem(
                        icon:Icon(Icons.settings),
                        label:"設定"
                    )
                ]
            ),
        ));
    }
}

Tabs.dart中引入的Home.dart。

// lib/pages/tabs/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
    HomePage({Key key}) : super(key: key);
  	_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
    @override
    Widget build(BuildContext context) {
        return Container(
            child:Text("我是首頁")
        );
    }
}

Tabs.dart中引入的Gategory.dart。

// lib/pages/tabs/Category.dart

import "package:flutter/material.dart";

class CategoryPage extends StatefulWidget {
    CategoryPage({Key key}) : super(key: key);
    _CategoryPageState createState() => _CategoryPageState();
}

class _CategoryPageState extends State<CategoryPage> {
    @override
    Widget build(BuildContext context) {
        return Container(
            child:Text("我是分類頁面")
        );
    }
}

Tabs.dart中引入的Setting.dart。

// lib/pages/tabs/Setting.dart

import "package:flutter/material.dart";

class SettingPage extends StatefulWidget {
    SettingPage({Key key}) : super(key: key);
    _SettingPageState createState() => _SettingPageState();
}

class _SettingPageState extends State<SettingPage> {
    @override
    Widget build(BuildContext context) {
      return Container(
        child: Text("我是設定頁面")
    );
  }

以下是效果圖：