Flutter组件————BottomNavigationBar

devtools/2024/12/28 1:42:30/

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

参数

参数名类型描述
itemsList定义导航栏中的每个项目,通常包含图标和标签。
onTapValueChanged当用户点击导航栏中的项目时触发的回调函数,接收一个整数参数,表示被点击项目的索引。
currentIndexint指定当前选中的项目索引,默认值为0。
typeBottomNavigationBarType指定导航栏的类型,有 BottomNavigationBarType.fixedBottomNavigationBarType.shifting 两种。
iconSizedouble设置图标大小,默认值为24.0。
elevationdouble设置阴影的大小,默认值根据Material Design规范设置。
selectedFontSizedouble设置选中状态下标签文本的字体大小,默认值为14.0。
unselectedFontSizedouble设置未选中状态下标签文本的字体大小,默认值为12.0。
selectedIconThemeIconThemeData设置选中状态下的图标主题,如颜色、大小等。
unselectedIconThemeIconThemeData设置未选中状态下的图标主题,如颜色、大小等。
selectedLabelStyleTextStyle设置选中状态下的标签样式,如字体大小、颜色等。
unselectedLabelStyleTextStyle设置未选中状态下的标签样式,如字体大小、颜色等。
backgroundColorColor设置导航栏的背景颜色。
showSelectedLabelsbool控制是否显示选中状态下的标签文本,默认是显示的。
showUnselectedLabelsbool控制是否显示未选中状态下的标签文本,默认是显示的。
mouseCursorMouseCursor定义鼠标悬停在导航栏项目上时的光标样式,默认是系统默认光标。
landscapeLayoutBottomNavigationBarLandscapeLayout在横屏模式下定义底部导航栏的布局方式,默认值为 BottomNavigationBarLandscapeLayout.spread

示例代码

dart">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();}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, //分别控制是否显示选中和未选中的标签文本,默认都是显示的),);}
}

效果

在这里插入图片描述
在这里插入图片描述


http://www.ppmy.cn/devtools/144033.html

相关文章

Hyperledger Fabric 2.x 环境搭建

Hyperledger Fabric 是一个开源的企业级许可分布式账本技术&#xff08;Distributed Ledger Technology&#xff0c;DLT&#xff09;平台&#xff0c;专为在企业环境中使用而设计&#xff0c;与其他流行的分布式账本或区块链平台相比&#xff0c;它有一些主要的区别。 环境准备…

开放词汇目标检测(Open-Vocabulary Object Detection, OVOD)综述

定义 开放词汇目标检测&#xff08;Open-Vocabulary Object Detection, OVOD&#xff09;是一种目标检测任务&#xff0c;旨在检测和识别那些未在训练集中明确标注的物体类别。传统的目标检测模型通常只能识别有限数量的预定义类别&#xff0c;而OVOD模型则具有识别“开放词汇…

C++的interface与抽象类

提示&#xff1a;文章 文章目录 前言一、背景二、C的interface与抽象类c 有interface关键词吗&#xff1f;c抽象类有abstract关键词吗&#xff1f;所以c抽象类和abstract没有关系。那什么是抽象类&#xff1f;题目1题目2什么是抽象函数&#xff1f;抽象函数和纯虚函数的区别&am…

单点登录平台Casdoor搭建与使用,集成gitlab同步创建删除账号

一&#xff0c;简介 一般来说&#xff0c;公司有很多系统使用&#xff0c;为了实现统一的用户名管理和登录所有系统&#xff08;如 GitLab、Harbor 等&#xff09;&#xff0c;并在员工离职时只需删除一个主账号即可实现权限清除&#xff0c;可以采用 单点登录 (SSO) 和 集中式…

【实用技能】如何在 SQL Server 中处理 Null 或空值?

在使用数据库时&#xff0c;我们经常会遇到缺少数据的行。这些缺失数据可能是由于未知或不适用的值、数据导入或输入过程中的错误或涉及不存在值的特定计算造成的。在这种情况下&#xff0c;有两种表示缺失数据的方法&#xff1a;NULL 和空值&#xff08;或空白值&#xff09;。…

用python写一个接口

在Python中&#xff0c;创建一个接口&#xff08;API&#xff09;通常涉及使用Web框架&#xff0c;如Flask、Django或FastAPI。这些框架使得创建和管理API端点变得简单且高效。以下是使用Flask创建简单RESTful API的示例。 使用Flask创建简单API ‌1、安装Flask‌ 首先&…

PHP:构建动态网站的后端基石

在当今的Web开发领域&#xff0c;PHP&#xff08;Hypertext Preprocessor&#xff0c;超文本预处理器&#xff09;依然是一种极具影响力和广泛使用的服务器端脚本语言。自1995年由Rasmus Lerdorf首次发布以来&#xff0c;PHP凭借其灵活性、跨平台兼容性和丰富的功能库&#xff…

Flink执行模式(批和流)如何选择

DataStream API支持不同的运行时执行模式(batch/streaming),你可以根据自己的需求选择对应模式。 DataStream API的默认执行模式就是streaming,用于需要连续增量处理并且预计会一直保持在线的无界(数据源输入是无限的)作业。 而batch执行模式则用于有界(输入有限)作业…