关于ios:Flutter-31Flutter进阶教程底部导航栏BottomNavigationBar使用

28次阅读

共计 2576 个字符，预计需要花费 7 分钟才能阅读完成。

作者 | 弗拉德
起源 | 弗拉德（公众号：fulade_me)

BottomNavigationBar 和 BottomNavigationBarItem 配合来独特展现 Flutter 外面的底部状态栏，底部状态栏是在挪动端很重要的控件。

先看一下 BottomNavigationBar构造方法


BottomNavigationBar({
    // key
    Key key,
    /// BottomNavigationBarItem 数组
    @required this.items,
    /// 点击事件办法
    this.onTap,
    /// 以后选中的 元素下标
    this.currentIndex = 0,
    ///  底部导航栏的 Z 坐标
    this.elevation,
    /// 默认是 BottomNavigationBarType.shifting 个别咱们应用 BottomNavigationBarType.fixed
    this.type,
    /// 选中我的项目色彩的值
    Color fixedColor,
    /// 背景色彩
    this.backgroundColor,
    /// BottomNavigationBarItem 图标的大小
    this.iconSize = 24.0,
    /// 选中时图标和文字的色彩
    Color selectedItemColor,
    /// 未选中时图标和文字的色彩
    this.unselectedItemColor,
    // 选中时的子 Item 的款式
    this.selectedIconTheme,
    /// 未选中时的子 Item 的款式
    this.unselectedIconTheme,
    // 选中时字体大小
    this.selectedFontSize = 14.0,
    /// 未选中时的字体大小
    this.unselectedFontSize = 12.0,
    /// 选中的时候的字体款式
    this.selectedLabelStyle,
    /// 未选中时的字体款式
    this.unselectedLabelStyle,
    /// 是否为未抉择的 BottomNavigationBarItem 显示标签
    this.showSelectedLabels = true,
    //// 是否为选定的 BottomNavigationBarItem 显示标签
    this.showUnselectedLabels,
    /// pc 端或 web 端应用
    this.mouseCursor,
})

咱们来做一个点击底部状态栏按钮切换色彩的 Demo

class _BottomNavigationBarDemoPageState
    extends State<BottomNavigationBarDemoPage> {
  int selectedIndex = 0;
  List<Container> containerList = [
    Container(color: Colors.red,),
    Container(color: Colors.blue,),
    Container(color: Colors.yellow,),
    Container(color: Colors.green,)
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("BottomNavigationBarDemo"),
        backgroundColor: Colors.blue,
      ),
      body: containerList[selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        /// 这个很重要
        type: BottomNavigationBarType.fixed,
        currentIndex: selectedIndex,
        onTap: (index) {setState(() {selectedIndex = index;});
        },
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(title: Text('F1'),
            icon: Icon(Icons.home),
          ),
          BottomNavigationBarItem(title: Text('F2'),
            icon: Icon(Icons.book),
          ),
          BottomNavigationBarItem(title: Text('F3'),
            icon: Icon(Icons.school),
          ),
          BottomNavigationBarItem(title: Text('F4'),
            icon: Icon(Icons.perm_identity),
          ),
        ],
      ),
    );
  }
}

Scaffold接管一个 BottomNavigationBar 作为 bottomNavigationBar 的参数，而后 BottomNavigationBar 接管一个 items 的数组，这个数组外面传入了 4 个 BottomNavigationBarItem 对象别离命名为F1、F2、F3、F4
type参数传入的是 BottomNavigationBarType.fixed，默认是BottomNavigationBarType.shifting，默认的成果是只有在选中BottomNavigationBarItem 时才会显示文字。设置成 BottomNavigationBarType.fixed 非选中状态下也会显示文字和图标
onTap实现的是一个办法，参数是被点击的以后 BottomNavigationBarItem 的下标，在这里被点击后调用 setState 来刷新页面的色彩