【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigation

开心就好2025
191 阅读4分钟

Flutter 底部导航栏组件详解

文章目录

  • 一、BottomNavigationBar 组件
  • 二、BottomNavigationBarItem 组件
  • 三、BottomNavigationBar 底部导航栏代码示例
  • 四、BottomNavigationBar 底部导航栏选中状态切换代码示例
  • 五、BottomNavigationBar 底部导航栏切换选项卡界面
  • 六、相关资源

一、BottomNavigationBar 组件

BottomNavigationBar 组件是底部导航栏，用于设置给 Scaffold 组件的 bottomNavigationBar 字段。

下面是 BottomNavigationBar 组件的构造函数源码，该构造函数的可选参数列表就是可以设置的字段属性：

class BottomNavigationBar extends StatefulWidget {
  const BottomNavigationBar({
    Key key,
    @required this.items, // 当前的若干 BottomNavigationBarItem 组件
    this.onTap,
    this.currentIndex = 0, // 当前选中条目
    this.elevation = 8.0,
    BottomNavigationBarType type,
    Color fixedColor,
    this.backgroundColor,
    this.iconSize = 24.0,
    Color selectedItemColor,
    this.unselectedItemColor,
    this.selectedIconTheme = const IconThemeData(),
    this.unselectedIconTheme = const IconThemeData(),
    this.selectedFontSize = 14.0,
    this.unselectedFontSize = 12.0,
    this.selectedLabelStyle,
    this.unselectedLabelStyle,
    this.showSelectedLabels = true,
    bool showUnselectedLabels,
  })
}

二、BottomNavigationBarItem 组件

BottomNavigationBarItem 组件是 BottomNavigationBar 的 items 字段值，可以给该 items 字段设置多个 BottomNavigationBarItem 组件。

BottomNavigationBarItem 组件常用设置：

  • 默认状态图标：icon
  • 图标下显示的标题：title
  • 激活状态的图标：activeIcon
  • 背景颜色：backgroundColor

BottomNavigationBarItem 组件构造函数源码：

class BottomNavigationBarItem {
  const BottomNavigationBarItem({
    @required this.icon,  // 默认状态图标
    this.title, // 图标下显示的标题
    Widget activeIcon,  // 激活状态的图标
    this.backgroundColor, // 背景颜色
  }) : activeIcon = activeIcon ?? icon,
       assert(icon != null);
}

三、BottomNavigationBar 底部导航栏代码示例

代码示例：

// 底部导航栏 BottomNavigationBar 设置
// items 可以设置多个 BottomNavigationBarItem
bottomNavigationBar: BottomNavigationBar(items: [
  // 设置底部导航栏条目, 每个条目可以设置一个图标
  BottomNavigationBarItem(
    // 默认状态下的图标
    icon: Icon(Icons.home, color: Colors.grey),
    // 激活状态下的图标
    activeIcon: Icon(Icons.home, color: Colors.red),
    // 设置标题
    title: Text("主页")
  ),
  // 设置底部导航栏条目, 每个条目可以设置一个图标
  BottomNavigationBarItem(
    // 默认状态下的图标
    icon: Icon(Icons.settings, color: Colors.grey),
    // 激活状态下的图标
    activeIcon: Icon(Icons.settings, color: Colors.red),
    // 设置标题
    title: Text("设置")
  )
]),

完整代码示例：

import 'package:flutter/material.dart';

class StatefulWidgetPage extends StatefulWidget {
  @override
  _StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}

class _StatefulWidgetPageState extends State<StatefulWidgetPage> {
  @override
  Widget build(BuildContext context) {
    // 文本组件样式 , 可以设置给 Text 文本组件
    // 设置字体大小 20, 颜色红色
    TextStyle textStyle = TextStyle(fontSize: 20, color: Colors.red);

    return MaterialApp(
      title: 'StatefulWidgetPage 组件示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        // 顶部标题栏
        appBar: AppBar(title: Text('StatefulWidgetPage 组件示例')),
        
        // 底部导航栏 BottomNavigationBar 设置
        bottomNavigationBar: BottomNavigationBar(items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home, color: Colors.grey),
            activeIcon: Icon(Icons.home, color: Colors.red),
            title: Text("主页")
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings, color: Colors.grey),
            activeIcon: Icon(Icons.settings, color: Colors.red),
            title: Text("设置")
          )
        ]),
        
        body: Container(
          decoration: BoxDecoration(color: Colors.white),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[],
          ),
        ),
      ),
    );
  }
}

四、BottomNavigationBar 底部导航栏选中状态切换代码示例

BottomNavigationBar 底部导航栏每个 BottomNavigationBarItem 都有一个选中状态，通过 StatefulWidget 可以改变页面状态。

设置一个成员变量，标识当前选中的索引值：

/// 当前被选中的底部导航栏索引
int _currentSelectedIndex = 0;

将 BottomNavigationBar 组件的 currentIndex 设置为 _currentSelectedIndex 成员变量：

bottomNavigationBar: BottomNavigationBar(
  // 设置当前选中的底部导航索引
  currentIndex: _currentSelectedIndex,
)

设置 BottomNavigationBar 组件的 onTap 回调事件，传入一个匿名回调函数，在该匿名方法中回调 StatefulWidget 组件的 setState 设置状态的方法，修改当前选中索引，之后 BottomNavigationBar 组件会自动更新当前选中的选项卡：

bottomNavigationBar: BottomNavigationBar(
  // 设置当前选中的底部导航索引
  currentIndex: _currentSelectedIndex,
  // 设置点击底部导航栏的回调事件 , index 参数是点击的索引值
  onTap: (index){
    // 回调 StatefulWidget 组件的 setState 设置状态的方法 , 修改当前选中索引
    // 之后 BottomNavigationBar 组件会自动更新当前选中的选项卡
    setState(() {
      // 改变 int _currentSelectedIndex 变量的状态
      _currentSelectedIndex = index;
    });
  },
)

五、BottomNavigationBar 底部导航栏切换选项卡界面

BottomNavigationBar 底部导航栏的 onTap 回调方法中，设置当前选中的选项卡索引，根据该索引值修改 Scaffold 组件的 body 对应组件，如果选项卡索引为 0，显示组件 0，如果选项卡索引为 1，那么显示组件 1。

设置 body 字段值时，根据当前的被中选的选项卡索引值，判断应该显示哪个组件：

body: _currentSelectedIndex == 0 ? 组件0 : 组件1,

完整代码：

import 'package:flutter/material.dart';

class StatefulWidgetPage extends StatefulWidget {
  @override
  _StatefulWidgetPageState createState() => _StatefulWidgetPageState();
}

class _StatefulWidgetPageState extends State<StatefulWidgetPage> {
  /// 当前被选中的底部导航栏索引
  int _currentSelectedIndex = 0;
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatefulWidgetPage 组件示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidgetPage 组件示例')),
        
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: _currentSelectedIndex,
          onTap: (index){
            setState(() {
              _currentSelectedIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home, color: Colors.grey),
              activeIcon: Icon(Icons.home, color: Colors.red),
              title: Text("主页")
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings, color: Colors.grey),
              activeIcon: Icon(Icons.settings, color: Colors.red),
              title: Text("设置")
            )
          ],
        ),
        
        body: _currentSelectedIndex == 0 ?
          Container( // 对应底部导航栏主界面选项卡
            decoration: BoxDecoration(color: Colors.white),
            alignment: Alignment.center,
            child: Column(
              children: <Widget>[
                Text("主页面选项卡")
              ],
            ),
          )
          :
          Container( // 对应底部导航栏设置选项卡
            decoration: BoxDecoration(color: Colors.white),
            alignment: Alignment.center,
            child: Column(
              children: <Widget>[
                Text("设置页面选项卡")
              ],
            ),
          ),
      ),
    );
  }
}

六、相关资源

Flutter 开发工具推荐：

  • AppUploader：一款专业的 iOS App 开发助手，可以帮助开发者快速打包、上传应用到 App Store，简化了复杂的发布流程。

参考资料：

GitHub 地址：

avatar
文章
阅读
粉丝