Flutter BottomNavigationBar


简介

BottomNavigationBar “底部导航栏”

  • 显示在应用程序底部的导航栏,由文本标签，图标或两者形式的多个项目组成;
  • 它提供了应用程序顶级视图之间的快速导航;

基本用法

BottomNavigationBar 底部导航栏通常与Scaffold结合使用

  • 它作为 Scaffold.bottomNavigationBar 参数;
  • BottomNavigationBar 3-5个之间个底部按钮数量是合理的，理论上 icon 大小合适，可以支持更多;
  • 默认0-3个底部按钮数量时，BottomNavigationBar采用fixed的模式摆放底部按钮，当有4个时默认使用 BottomNavigationBarType.shifting 模式摆放底部按钮;
  • 下面的底部导航即是效果;

实例演示

import 'package:flutter/material.dart';

/*
* BottomNavigationBar 默认的实例
* */
class BottomNavigationBarFullDefault extends StatefulWidget {
  const BottomNavigationBarFullDefault() : super();
  @override
  State<StatefulWidget> createState() => _BottomNavigationBarFullDefault();
}

/*
* BottomNavigationBar 默认的实例,有状态
* */
class _BottomNavigationBarFullDefault extends State {
   int _currentIndex = 1;

  void _onItemTapped(int index) {
    if(mounted) {
      setState(() {
        _currentIndex = index;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      type: BottomNavigationBarType.fixed, // BottomNavigationBarType 中定义的类型，有 fixed 和 shifting 两种类型
      iconSize: 24.0, // BottomNavigationBarItem 中 icon 的大小
      currentIndex: _currentIndex, // 当前所高亮的按钮index
      onTap: _onItemTapped, // 点击里面的按钮的回调函数，参数为当前点击的按钮 index
      fixedColor: Colors.deepPurple, // 如果 type 类型为 fixed，则通过 fixedColor 设置选中 item 的颜色
      items: <BottomNavigationBarItem> [
        BottomNavigationBarItem(
            title:  Text("Home"), icon:  Icon(Icons.home)),
        BottomNavigationBarItem(
            title:  Text("List"), icon:  Icon(Icons.list)),
        BottomNavigationBarItem(
            title:  Text("Message"), icon:  Icon(Icons.message)),
        BottomNavigationBarItem(
            title:  Text("add"), icon:  Icon(Icons.add)),
        BottomNavigationBarItem(
            title:  Text("menu"), icon:  Icon(Icons.menu)),
        BottomNavigationBarItem(
            title:  Text("other"), icon:  Icon(Icons.devices_other)),

      ],
    );
  }
}