当前位置：首页 > article >正文

Flutter组件————BottomNavigationBar

article 2024/12/21 12:04:37

BottomNavigationBar 是Flutter中用于在屏幕底部显示导航栏的组件，它允许用户在几个主要视图之间进行切换。

参数

参数名	类型	描述
items	List	定义导航栏中的每个项目，通常包含图标和标签。
onTap	ValueChanged	当用户点击导航栏中的项目时触发的回调函数，接收一个整数参数，表示被点击项目的索引。
currentIndex	int	指定当前选中的项目索引，默认值为0。
type	BottomNavigationBarType	指定导航栏的类型，有 `BottomNavigationBarType.fixed` 和 `BottomNavigationBarType.shifting` 两种。
iconSize	double	设置图标大小，默认值为24.0。
elevation	double	设置阴影的大小，默认值根据Material Design规范设置。
selectedFontSize	double	设置选中状态下标签文本的字体大小，默认值为14.0。
unselectedFontSize	double	设置未选中状态下标签文本的字体大小，默认值为12.0。
selectedIconTheme	IconThemeData	设置选中状态下的图标主题，如颜色、大小等。
unselectedIconTheme	IconThemeData	设置未选中状态下的图标主题，如颜色、大小等。
selectedLabelStyle	TextStyle	设置选中状态下的标签样式，如字体大小、颜色等。
unselectedLabelStyle	TextStyle	设置未选中状态下的标签样式，如字体大小、颜色等。
backgroundColor	Color	设置导航栏的背景颜色。
showSelectedLabels	bool	控制是否显示选中状态下的标签文本，默认是显示的。
showUnselectedLabels	bool	控制是否显示未选中状态下的标签文本，默认是显示的。
mouseCursor	MouseCursor	定义鼠标悬停在导航栏项目上时的光标样式，默认是系统默认光标。
landscapeLayout	BottomNavigationBarLandscapeLayout	在横屏模式下定义底部导航栏的布局方式，默认值为 `BottomNavigationBarLandscapeLayout.spread`。

示例代码

class _MyHomePageState extends State<MyHomePage> {
  int pageIndex = 0;
  //所有右侧行为按钮
  List<Widget> actionList = const [
    Icon(Icons.social_distance),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.cyclone),
    SizedBox(
      width: 30,
    ),
    Icon(Icons.manage_accounts),
    SizedBox(
      width: 40,
    )
  ];
  List<Widget> pageList = const [
    Text("首页"),
    Text("新增"),
    Text("用户"),
  ];

  void floatBtnFunc() {
    debugPrint("点击了悬浮按钮");
    HapticFeedback.vibrate();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        //省略样式代码
      ), //顶部栏
      body: Center(
        child: ListView(
          padding: const EdgeInsets.only(top: 15),
          children: [
            Row(
              children: [pageList[pageIndex]],
            )
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: floatBtnFunc, //点击事件
        tooltip: "悬浮按钮", //长按提示信息
        backgroundColor: Colors.blue, //背景颜色
        foregroundColor: Colors.white, // 内部组件颜色
        elevation: 10, //阴影
        shape: ShapeBorder.lerp(
            const CircleBorder(), const CircleBorder(), 0.5), //按钮形状
        mini: false, //是否小尺寸
        hoverColor: Colors.green, //悬浮颜色
        splashColor: Colors.yellow, //点击颜色
        focusColor: Colors.red, //获取焦点颜色
        autofocus: true, //是否自动获取焦点

        clipBehavior: Clip.hardEdge, //裁剪方式
        child: const Icon(Icons.info), // //按钮内部组件
      ), //浮动按钮
      floatingActionButtonLocation:
          FloatingActionButtonLocation.centerDocked, //浮动按钮位置
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home), //图标
            label: "首页",  //标签
            tooltip: "首页",  //长按提示信息
            backgroundColor: Colors.blueAccent,  //背景颜色
            activeIcon: Icon(Icons.home_filled),  //选中图标
          ),
          BottomNavigationBarItem(icon: Icon(Icons.add), label: "新增"),
          BottomNavigationBarItem(icon: Icon(Icons.verified_user), label: "用户"),
        ], //底部导航栏
        currentIndex: pageIndex, //当前页面索引
        onTap: (index) {
          setState(() {
            pageIndex = index;
          });
        }, //点击事件
        type: BottomNavigationBarType.fixed, //导航栏的类型
        iconSize: 25,  //图标大小
        elevation: 20, //阴影
        selectedFontSize: 12, //选中字体大小
        unselectedFontSize: 12, //未选中字体大小
        selectedItemColor: Colors.blue, //选中颜色
        unselectedItemColor: Colors.black, //未选中颜色
        showUnselectedLabels: true, //是否显示未选中的标签
        selectedLabelStyle: const TextStyle(color: Colors.blue), //选中文本样式
        unselectedLabelStyle: const TextStyle(color: Colors.black), //未选中文本样式
        backgroundColor: const Color.fromARGB(255, 99, 255, 247),
        showSelectedLabels: true, //分别控制是否显示选中和未选中的标签文本，默认都是显示的
      ),
    );
  }
}