1. 程式人生 > >Flutter Material Components Widgets之BottomNavigationBar

Flutter Material Components Widgets之BottomNavigationBar

BottomNavigationBar 底部導航條,可以很容易地在tap之間切換和瀏覽頂級檢視。

BottomNavigationBar 顯示在應用程式底部的Widget,用於在少量檢視中進行選擇,通常在3到5之間。

建構函式

 BottomNavigationBar({
    Key key,
    @required this.items,
    this.onTap,
    this.currentIndex = 0,
    BottomNavigationBarType type,
    this.fixedColor,
    this.iconSize = 24.0,
  }) 
  • items → List < BottomNavigationBarItem >
    BottomNavigationBar 底部導航欄中的各項,其中每個專案都是一個BottomNavigationBarItem 包含了圖示和標題。

  • onTap → ValueChanged < int >
    點選某一項時回撥int引數為點選的具體某一項

  • currentIndex → int
    指定選中的一項

  • type → BottomNavigationBarType
    定義BottomNavigationBar的佈局和行為

    BottomNavigationBarType.fixed
    每一項都固定寬並且點選時不會移動
    BottomNavigationBar 的背景顏色為 ThemeData.canvasColor

    BottomNavigationBarType.shifting
    點選某一項時會有移動並且,只有選中的項才顯示其文字標籤。
    BottomNavigationBar 的背景顏色與所選項的BottomNavigationBarItem.backgroundColor相同

  • fixedColor → Color
    底部導航欄為的type為BottomNavigationBarType.fixed時所選中項的顏色

  • iconSize → double
    所有BottomNavigationBarItem圖示的大小預設24

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new HomeState();
  }
}

class HomeState extends State<Home> {

  BottomNavigationBar _bottomNavigationBar;
  List<BottomNavigationBarItem> _items;
  int _currentIndex = 0;

  @override
  void initState() {
    super.initState();
    _items = [
      new BottomNavigationBarItem(
        icon: new Icon(Icons.assessment),
        title: new Text("test1"),
        backgroundColor: Colors.green
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.minimize),
        title: new Text("test2"),
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.hdr_strong),
        title: new Text("test3"),
      ),
      new BottomNavigationBarItem(
        icon: new Icon(Icons.menu),
        title: new Text("test4"),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    _bottomNavigationBar = new BottomNavigationBar(items: _items,
      currentIndex: _currentIndex,
      type: BottomNavigationBarType.fixed,
      fixedColor: Colors.purple,
      onTap: (index) {
        setState(() {
          _currentIndex = index;
        });
      },
    );

    return new MaterialApp(
      title: "BottomNavigationBar",
      theme: new ThemeData(primarySwatch: Colors.blue,
      ),
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("BottomNavigationBar"),
        ),
        body: new Center(
          child: new Text("$_currentIndex"),
        ),
        bottomNavigationBar: _bottomNavigationBar,
      ),
    );
  }

}

在這裡插入圖片描述