Flutter組件學習九-BottomNavigationBar（底部導航欄）

1、BottomNavigationBar

是底部導航條，可以讓我們定義底部Tab切換，bottomNavigationBar是Scaffold組件的參數

1.1、屬性

屬性	說明
items	List底部導航條按鈕集合
iconSize	圖標大小
currentIndex	默認選中第幾個
onTap	選中變化回調函數
fixedColor	選中的顏色
type	BottomNavigationBarType.fixed BottomNavigationBarType.shifting

1.2、代碼實現

MyBottomNavigationBar

import 'package:flutter/material.dart';
import 'package:flutter_app/pages/Home.dart';
import 'package:flutter_app/pages/CategoryPage.dart';
import 'package:flutter_app/pages/SettingPage.dart';

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  // 當前顯示頁面的index
  int _currentIndex = 0;

  // 頁面集合
  List _pageList=[
    HomePage(),
    CategoryPage(),
    SettingPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 設置title
      appBar: AppBar(title: Text("jeklsjflk")),
      body: this._pageList[this._currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          currentIndex:this._currentIndex,
          onTap: (int index){
            setState(() {
              this._currentIndex = index;
            });
          },
          type: BottomNavigationBarType.fixed,
          items: [
            BottomNavigationBarItem(
              title: Text('首頁'),
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              title: Text('分類'),
              icon: Icon(Icons.category),
            ),
            BottomNavigationBarItem(
              title: Text('設置'),
              icon: Icon(Icons.settings),
            ),
          ]),
    );
  }
}

pages/CategoryPage.dart

import 'package:flutter/material.dart';

class CategoryPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("CategoryPage"),
    );
  }
}

pages/Home.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("CategoryPage"),
    );
  }
}

pages/SettingPage.dart

import 'package:flutter/material.dart';

class SettingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text("SettingPage"),
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:flutter_app/MyBottomNavigationBar.dart';

void main() => runApp(MyMaterialApp());

class MyMaterialApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        title: "test",
        home: MyBottomNavigationBar(),
    );
  }
}