Flutter -------- BottomNavigationBar 界面切换
Android 中有BottomNavigationBar+Fragment切换
而在Flutter也有的BottomNavigationBar
效果图
底部有两种情况
底部导航栏的类型更改其项目的显示方式。如果未指定,则 当少于四个项时,它会自动设置为BottomNavigationBarType.fixed, 否则为BottomNavigationBarType.shifting。
BottomNavigationBarType.fixed,当少于四个项目时的默认值。如果选中的项为非null,则使用fixedColor渲染,否则使用主题的ThemeData.primaryColor。导航栏的背景颜色是默认的材质背景颜色,ThemeData.canvasColor(基本上是不透明的白色)。
BottomNavigationBarType.shifting,当有四个或更多项时的默认值。所有项目都以白色呈现,导航栏的背景颜色与所选项目的BottomNavigationBarItem.backgroundColor相同 。在这种情况下,假设每个项目将具有不同的背景颜色,并且背景颜色将与白色形成鲜明对比。
超出4个默认情况:
代码:
class BottomNavigationBarLnt extends StatefulWidget {
BottomNavigationBarLnt({Key key}) : super(key: key); @override
BottomNavigationBarTest createState() => BottomNavigationBarTest();
} class BottomNavigationBarTest extends State<BottomNavigationBarLnt>{ int _cuurentIndex = 0;
final List<Widget> chiledList = [Home(),Tab2(),Tab3(),Home()];
final List<BottomNavigationBarItem> _listItem = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text("Home")
),
BottomNavigationBarItem(
icon: Icon(Icons.book),
title: Text("book")
),
BottomNavigationBarItem(
icon: Icon(Icons.music_video),
title: Text("music")
),
BottomNavigationBarItem(
icon: Icon(Icons.movie),
title: Text("movie")
),
]; @override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: _listItem,
fixedColor: Colors.blue,
// type: BottomNavigationBarType.fixed,
currentIndex: _cuurentIndex,
onTap: _onItemTapped,
),
body: chiledList[_cuurentIndex],
);
} void _onItemTapped(int index) {
setState(() {
_cuurentIndex = index;
});
}
}
超过4个item时添加类型 type: BottomNavigationBarType.fixed,
把上面注释的代码打开就行
官方文档
https://docs.flutter.io/flutter/material/BottomNavigationBar-class.html
Flutter -------- BottomNavigationBar 界面切换的更多相关文章
- 5、Flutter 实现 ViewPager、bottomNavigationBar 界面切换
1.前言 首先我们想一下,如果在 Android 中实现 布局切换,通常的思路是: 做一个 viewpager 一组 Fragment 每个 Fragment 绑定一个 xml 最后填充至 viewp ...
- 给 Flutter 界面切换来点特效
本文微信公众号「AndroidTraveler」首发. 背景 我们知道页面之间如果直接切换,会比较生硬,还会让用户觉得很突兀,用户体验不是很好. 因此一般情况下,页面之间的切换为了达到平滑过渡,都会添 ...
- 15 Flutter BottomNavigationBar自定义底部导航条 以及实现页面切换 以及模块化
效果: /** * Flutter BottomNavigationBar 自定义底部导航条.以及实现页面切换: * BottomNavigationBar是底部导航条,可以让我们定义底部Tab ...
- Unity iOS混合开发界面切换思路
Unity iOS混合开发界面切换思路 最近有很多博友QQ 私信 或则 留言联系我,请教iOS和Unity界面之前相互切换的问题,源代码就不私下发你们了,界面跳转功能的代码我直接贴到下面好了,顺带说i ...
- Linux启动界面切换:图形界面-字符界面(转)
Linux字符界面切换到图形界面 由字符界面切换到图形界面可用两种简单方法实现: 1.在字符界面输入startx或init 5 . 2.通过编辑/etc/inittab文件实现默认进入图形界面. 把其 ...
- Html5 Egret游戏开发 成语大挑战(五)界面切换和数据处理
经过前面的制作,使用Egret的Wing很快完成了开始界面和选关卡界面,下面通常来说就是游戏界面,但此时界面切换和关卡数据还没有准备好,这次讲解界面的切换和关卡数据的解析.前面多次修改了Main.ts ...
- php-- Linux图形界面与字符界面切换
转自:http://blog.163.com/wang_ly2442/blog/static/9494340720128355054551/ 1. 启动时进入字符界面,后来想切换到图形界面:使用sta ...
- 参考_Android中,如何新建一个界面,并且实现从当前界面切换到到刚才新建的(另外一个)界面
参考地址: http://www.crifan.com/android_how_to_create_new_ui_and_switch_to_another_new_ui/ 想要实现,在Android ...
- WPF如何实现类似iPhone界面切换的效果(转载)
WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...
随机推荐
- ISCC之msc2
倒立屋 Flag:9102_cCsI 一道典型的LSB隐写,不过提交格式嘛,就很坑了 Stegsolve打开分析图片,注意到RGB三类图片的最低位基本相同,可能藏了东西. 有一个IsCc_2019,反 ...
- Java 使用Builder解决构造函数参数过多的问题
原文:https://blog.csdn.net/michael_f2008/article/details/77715075 //Builder Pattern public class Nutri ...
- [08001] Could not create connection to database server. Attempted reconnect 3 times. Giving up.
使用idea连接数据库的时候,报错为 [08001] Could not create connection to database server. Attempted reconnect 3 tim ...
- jemeter 查看结果树 分析
查看结果树,可以看到测试通过,通过 的测试通常为绿色.红色则代表失败了.可以查看到取样器结果,请求,响应数据 取样器结果中可以查看到响应头,响应数据大小,响应时间等信息. Thread Name: 线 ...
- zmq使用记录
zmq套接字介绍 https://www.cnblogs.com/fengbohello/p/4354989.html zmq示例 https://github.com/booksbyus/zguid ...
- C#延迟初始化Lazy<T>
1. 概述 我们创建某一个对象需要很大的消耗,而这个对象在运行过程中又不一定用到,为了避免每次运行都创建该对象,这时候延迟初始化(也叫延迟实例化)就出场了. 延迟初始化出现于.NET 4.0,主要用于 ...
- python - django (视图)
# """ 一:# 视图 (接收请求返回响应的那部分) FBV版:基于 函数的 请求 CBV版:基于 类的 请求 注册方法: url(r'^add_publisher/' ...
- Java中复合赋值运算符自动进行强制类型转换
public class Operation { public static void main(String[] args) { int num1 = 10; num1 = num1 / 2.2; ...
- source insight parse link
source insight parse link \([a-zA-Z_]*\.[chCH]\) ([^)]*) line \([0-9][0-9]*\)
- 数据结构实验之排序一:一趟快排( SDUT 3398)
#include <stdio.h> #include <string.h> int a[110000]; void qusort(int l, int r, int a[]) ...