Flutter组件————BottomNavigationBar

embedded/2024/12/22 15:09:01/

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/embedded/147859.html

相关文章

MATLAB深度学习实战PCB缺陷检测

本文采用YOLO作为核心算法框架&#xff0c;结合Matlab构建用户界面&#xff0c;使用MATLAB进行开发。YOLO以其高效的实时检测能力&#xff0c;在多个目标检测任务中展现出卓越性能。本研究针对PCB电路板缺陷数据集进行训练和优化&#xff0c;该数据集包含丰富的PCB电路板缺陷图…

解决Apache/2.4.39 (Win64) PHP/7.2.18 Server at localhost Port 80问题

配置一下apache里面的配置文件&#xff1a;httpd.conf 和 httpd.vhosts.conf httpd.conf httpd-vhosts.conf 重启服务 展示&#xff1a; 浏览器中中文乱码问题&#xff1a;

AI呼入机器人详解

AI呼入机器人详解 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc AI呼入机器人&#xff0c;也称为智能客服系统或虚拟客服助手&#xff0c;是利用人工智能技术来自动处理和响应客户来电的解决方案。这类机器人…

*【每日一题 基础题】 [蓝桥杯 2023 省 B] 飞机降落

题目描述 N 架飞机准备降落到某个只有一条跑道的机场。其中第 i 架飞机在 Ti 时刻到达机场上空&#xff0c;到达时它的剩余油料还可以继续盘旋 Di 个单位时间&#xff0c;即它最早可以于 Ti 时刻开始降落&#xff0c;最晚可以于 Ti Di 时刻开始降落。降落过程需要 Li个单位时间…

kubeadm_k8s_v1.31高可用部署教程

kubeadm_k8s_v1.31高可用部署教程 实验环境部署拓扑图**部署署架构****Load Balance****Control plane node****Worker node****资源分配&#xff08;8台虚拟机&#xff09;**集群列表 前置准备关闭swap开启ipv4转发更多设置 1、Verify the MAC address and product_uuid are u…

Verilog中initial的用法

在 Verilog 语言中&#xff0c;initial 语句用于在仿真开始时执行一次性初始化操作。它是顺序执行的&#xff0c;用来描述在仿真启动时立即运行的代码块&#xff0c;通常用于赋初值、生成波形或控制信号行为。 语法 initial begin // 语句1 // 语句2 ... end特点 只…

爬取Q房二手房房源信息

文章目录 1. 实战概述2. 网站页面分析3. 编写代码爬取Q房二手房房源信息3.1 创建项目与程序3.2 运行程序&#xff0c;查看结果 4. 实战小结 1. 实战概述 本次实战项目旨在通过编写Python爬虫程序&#xff0c;抓取深圳Q房网上的二手房房源信息。我们将分析网页结构&#xff0c;…

少儿编程教育系统|Java|SSM|JSP|

【技术栈】 1⃣️&#xff1a;架构: B/S、MVC 2⃣️&#xff1a;系统环境&#xff1a;Windowsh/Mac 3⃣️&#xff1a;开发环境&#xff1a;IDEA、JDK1.8、Maven、Mysql5.7 4⃣️&#xff1a;技术栈&#xff1a;Java、Mysql、SSM、Mybatis-Plus、JSP、jquery,html 5⃣️数据库可…