Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
本文地址:https://blog.csdn.net/qq_40785165/article/details/116953235,转载需附上此地址
大家好,我是小黑,一个还没秃头的程序员~~~
空袋子,难直立 。
今天分享的内容是Flutter的BottomNavigationBar组件,用来定义底部导航栏,源码地址:https://gitee.com/fjjxxy/flutter-study.git,效果如下:
type=BottomNavigationBarType.fixed,当数量<=3时默认是这个类型的导航栏
type=BottomNavigationBarType.shifting,当数量>3时默认是这个类型的导航栏
BottomNavigationBar的参数:
items |
BottomNavigationBarItem集合,代表子项 |
onTap | 子项点击事件监听,参数为子项索引index |
currentIndex | 当前页面对应的子项索引 |
type | 导航栏的类型-BottomNavigationBarType.fixed/BottomNavigationBarType.shifting |
BottomNavigationBarItem的参数:
backgroundColor | 当选中这个子项时的背景颜色 |
icon | 图标,Icon组件 |
title | 子项的名称 |
以上是Demo中有用到的参数,其他的像选中时的文字颜色,文字大小也有相应的参数,大家可以下载源码自己试一下
好的,开始正文,BottomNavigationBar需要在Scaffold中使用,需要为Scaffold设置bottomNavigationBar参数,BottomNavigationBar的参数上面已列举,更多的参数大家可以自己尝试一下,代码如下:
List _pageList = [TabPage1(), TabPage2(), TabPage3(), TabPage4()];
return Scaffold(appBar: AppBar(title: Text("导航栏"),),body: this._pageList[_index],bottomNavigationBar: BottomNavigationBar(type: BottomNavigationBarType.fixed,currentIndex: this._index,onTap: (int index) {print("点击位置===============$index");setState(() {_index = index;});},items: [BottomNavigationBarItem(backgroundColor: Colors.deepPurpleAccent,icon: Icon(Icons.search,color: Colors.red,),title: Text("标签1")),BottomNavigationBarItem(backgroundColor: Colors.deepOrangeAccent,icon: Icon(Icons.home, color: Colors.red),title: Text("标签2")),BottomNavigationBarItem(backgroundColor: Colors.pinkAccent,icon: Icon(Icons.tab, color: Colors.red),title: Text("标签3")),BottomNavigationBarItem(backgroundColor: Colors.teal,icon: Icon(Icons.favorite, color: Colors.red),title: Text("标签4")),]));
从上面的代码中可以看出,items是BottomNavigationBarItem的集合,用来设置子项,点击事件中通过setState修改_index参数从而修改当前索引currentIndex,从而修改显示页,如果想要在跳转到导航页时指定显示的页面组件,可以使用命名路由跳转传参的方式,进行默认索引的修改,不了解路由的同学可以看我上一篇博客:Flutter学习日记之使用路由进行页面切换,代码如下:
class NavigationBarPage extends StatefulWidget {final arguments;NavigationBarPage({this.arguments});@override_NavigationBarPageState createState() =>_NavigationBarPageState(arguments:this.arguments);
}class _NavigationBarPageState extends State<NavigationBarPage> {Map arguments;var _index;_NavigationBarPageState({this.arguments}) {this._index = arguments["index"];//_index到时候赋值给导航栏的当前索引参数}
}
RaisedButton(onPressed: () {Navigator.pushNamed(context, "/tabs", arguments: {"index":2//传值给导航页表示默认显示第三个页面});}, //这个属性不能为空,不然背景颜色无效child: Text("导航栏",style: TextStyle(color: Colors.white),),color: Colors.red,)
其中的标签显示页面都只是简单的带文字的组件,代码如下:
import 'package:flutter/material.dart';
class TabPage1 extends StatefulWidget {@override_TabPage1State createState() => _TabPage1State();
}class _TabPage1State extends State<TabPage1> {@overrideWidget build(BuildContext context) {return Center(child: Text("页面1"),);}
}
到这里为止,一个底部导航栏+页面切换就实现了,导航栏在App开发中还是经常出现的,相信大家可以在不断的练习与探索中变得越来越熟练,最后,希望喜欢我文章的朋友们可以帮忙点赞、收藏、评论,也可以关注一下,如果有问题可以在评论区提出,后面我会持续更新Flutter的学习记录,与大家分享,谢谢大家的支持与阅读!
Flutter学习日记之底部导航栏BottomNavigationBar组件的使用相关推荐
- Flutter底部导航栏BottomNavigationBar页面状态保持解决方案
网易云[玩转大前端]配套课程 EDU配套 教程 Flutter开发的点滴积累系列文章 一行代代码置灰应用?对就是这么干 在实际应用开发中,一般应用的首页面会有这种结构,在Flutter应用开发中,有多 ...
- Android 底部导航栏 BottomNavigationBar
大部分app,都采用导航栏的方式,无论是顶部导航栏还是底部导航栏,这是一个app的根骨,本文是采用Google最近添加到Material design中的底部导航栏BottomNavigationBa ...
- Flutter底部导航栏BottomNavigationBar
BottomNavigationBar是底部的导航栏,一般应用在多个视图进行选择.类比于Android的底部导航栏,由Text文本和Icon图标组成. 这里创建一个List为显示内容提供容器: sta ...
- flutter BottomAppBar 实现不规则底部导航栏
更多文章请查看 lutter从入门 到精通 实现底部导航栏并点击切换页面可简述为有三种方式 TabBar + TabBarView BottomNavigationBar + BottomNaviga ...
- Flutter仿闲鱼底部导航栏实现
概述 本文主要实现一个仿闲鱼底部导航栏实现,这种效果在项目中经常用到,接下来我们就从头开始实现. 仿闲鱼底部导航栏 要实现闲鱼底部导航栏的效果我们需要使用到BottomNavigationBar和Fl ...
- 暑期学习日记32:导航栏和导航下拉菜单
今天学习了用HTML+CSS制作导航栏和下拉菜单.代码如下: <!doctype html> <html> <head> <meta charset=&quo ...
- 【Flutter】底部导航栏页面框架 ( BottomNavigationBar 底部导航栏 | PageView 滑动页面 | 底部导航与滑动页面关联操作 )
文章目录 一.BottomNavigationBar 底部导航栏 二.PageView 滑动页面 三.BottomNavigationBar 与 PageView 关联 四.完整代码示例 1.核心导航 ...
- 【Flutter】StatefulWidget 组件 ( 底部导航栏组件 | BottomNavigationBar 组件 | BottomNavigationBarItem 组件 | 选项卡切换 )
文章目录 一.BottomNavigationBar 组件 二.BottomNavigationBarItem 组件 三.BottomNavigationBar 底部导航栏代码示例 四.BottomN ...
- Android学习之BottomNavigationBar实现Android特色底部导航栏
Android底部导航栏的实现方式特别多,例如TabHost,TabLayout,或者TextView等,都可以实现底部导航栏的效果,但是却没有Google官方统一的导航栏样式,今天讲的就是Googl ...
最新文章
- 表单高级应用和语义化
- KDD Cup 2020 推荐系统赛道:数据分析
- LINQ to Entities 不识别方法“System.String ToString()”,因此该方法无法转换为存储表达式。...
- C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十五)完美捕捉精灵之神器 -- HitTest...
- Java享元模式之字符串享元
- QT的QSvgGenerator类的使用
- 实现接口java_Java – 实现接口
- Vue.js基础体验(一)
- Unity(四):使用场景Ⅰ:建立类型映射
- apache2.4.39 php,win7 配置AMP环境(apache2.4.39 + php7.1.28)
- 网络安全管理实践(第2版)
- JBS与盒马签署战略合作 将为后者提供2亿元美国进口谷饲牛肉
- 一文读懂802.1x协议,随便秒杀面试官
- linux dns函数,Linux DNS (1)的基本概念
- android--关于apk加密那点事的思考
- HCIE大师之路(四)——OSPF双塔奇兵综合实验
- c语言编写aoi程序,AOI编程步骤
- linux运维基本英语词汇,13425616_英语词汇的奥秘 高级版.pdf
- XML文件的操作--上
- 一个仿知乎的问答论坛