Flutter组件————BottomNavigationBar

server/2024/12/22 23:09:47/

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/server/152344.html

相关文章

springboot中——Logback介绍

程序中的日志&#xff0c;是用来记录应用程序的运行信息、状态信息、错误信息等。 Logback基本使用 springboot的依赖自动传递了logback的依赖&#xff0c;所以不用再引入依赖 之后在resources文件下创建logback.xml文件&#xff0c;写入 <?xml version"1.0" …

图形 3.3 曲面细分与几何着色器_大规模草渲染

细分后的顶点曲面细分与几何着色器 大规模草渲染 B站视频&#xff1a;图形 3.3 曲面细分与几何着色器 大规模草渲染 文章目录 细分后的顶点曲面细分与几何着色器 大规模草渲染着色器执行顺序曲面细分着色器概述曲线和曲面相关概念输入与输出总体流程Hull Shader常量外壳着色器…

云计算赋能:TSP 问题求解与创新定价机制的全景剖析

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;编程探索专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年12月18日14点02分 神秘男子影, 秘而不宣藏。 泣意深不见, 男子自持重, 子夜独自沉。 论文源地址&#xff1a; Aspiringco…

基于Web的病历管理系统

一、系统背景与意义 随着医疗技术的不断进步和患者数量的不断增加&#xff0c;传统的纸质病历管理方式已经无法满足现代医疗机构的需求。纸质病历存在易丢失、难查询、难共享等问题&#xff0c;而基于Web的病历管理系统则能够很好地解决这些问题。通过该系统&#xff0c;医疗机…

【ELK】Filebeat采集Docker容器日志

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 介绍filebeat是如何工作的 使用部署filebeat 介绍 Filebeat 是一个用于转发和集中日志数据的轻量级传送器。 Filebeat 作为agent安装在服务器上&#xff0c;监视指…

【Mars3d】设置backgroundImage、map.scene.skyBox、backgroundImage来回切换

相关链接&#xff1a; http://mars3d.cn/editor-vue.html?keyex_1_2_1&idmap/other/backgroundImg 实现代码&#xff1a; export function show1() {map.setOptions({scene: {backgroundType: "image",backgroundImage: "url(//data.mars3d.cn/img/busin…

C# 从控制台应用程序入门

总目录 前言 从创建并运行第一个控制台应用程序&#xff0c;快速入门C#。 一、新建一个控制台应用程序 控制台应用程序是C# 入门时&#xff0c;学习基础语法的最佳应用程序。 打开VS2022&#xff0c;选择【创建新项目】 搜索【控制台】&#xff0c;选择控制台应用(.NET Framew…

深入理解STL list erase

1、list erase后&#xff0c;当前的迭代器失效&#xff0c;返回指向下一个节点的迭代器 #include<list> #include<iostream> #include<vector> using namespace std;int main() {list<int> ls;ls.push_back(1);ls.push_back(2);ls.push_back(3);list&…