Flutter——BottomNavigationBar組件（底部導航欄組件）

BottomNavigationBar常用的屬性：

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

 

 

import 'package:flutter/material.dart';


void main() {
  runApp(MaterialApp(
    title: "BottomNavigationBarWidget",
    home: MyApp(),
  ));
}


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("底部導航欄")),
      body: Tabs(),
    );
  }
}


class Tabs extends StatefulWidget {
  @override
  _TabsState createState() => _TabsState();
}


class _TabsState extends State<Tabs> {
  int _currentIndex = 0;
  List _pageList = [Page("首頁頁面"), Page("分類頁面"), Page("設置頁面")];

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


class Page extends StatelessWidget {
  String text;

  Page(this.text);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text(text),
    );
  }
}