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 createState() {
    return new HomeState();
  }
}

class HomeState extends State {

  BottomNavigationBar _bottomNavigationBar;
  List _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,
      ),
    );
  }

}

Flutter Material Components Widgets之BottomNavigationBar_第1张图片

你可能感兴趣的:(flutter)