Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部
import 'package:flutter/material.dart'; import './pages/home_page.dart';
import './pages/book_page.dart';
import 'package:bottom_nav_bar_test/pages/movie_page.dart';
import 'package:bottom_nav_bar_test/pages/music_page.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom Navigation',
home: Main(),
theme: ThemeData(primaryColor: Colors.orange),
);
}
} class Main extends StatefulWidget {
@override
_MainState createState() => _MainState();
} class _MainState extends State<Main> {
int _currentIndex = ;
final List<Widget> _children = [Home(), Book(), Music(), Movie()]; final List<BottomNavigationBarItem> _list = <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.book),
title: Text('Book'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.music_video),
title: Text('Music'),
//backgroundColor: Colors.orange
),
BottomNavigationBarItem(
icon: Icon(Icons.movie),
title: Text('Movie'),
//backgroundColor: Colors.orange
),
]; @override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Bottom Navigation'),
),
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
onTap: onTabTapped,
currentIndex: _currentIndex,
items: _list,
),
//body: _children[_currentIndex],
body: IndexedStack(
index: _currentIndex,
children: _children,
),
);
} void onTabTapped(int index) {
setState(() {
_currentIndex = index;
});
}
}
Flutter - BottomNavigationBar底部导航栏切换后,状态丢失。底部的更多相关文章
- Flutter - BottomNavigationBar底部导航栏切换后,状态丢失
如果你用过BottomNavigationBar.TabBar.还有Drawer,你就会发现,在切换页面之后,原来的页面状态就会丢失. 要是上一页有一个数据列表,很多数据,你滚动到了下头,切换页面后, ...
- Flutter - TabBar导航栏切换后,状态丢失
上一篇讲到了 Flutter - BottomNavigationBar底部导航栏切换后,状态丢失 里面提到了TabBar,这儿专门再写一下吧,具体怎么操作,来不让TabBar的状态丢失.毕竟大家99 ...
- Flutter实战视频-移动电商-04.底部导航栏切换效果
04.底部导航栏切换效果 博客地址: https://jspang.com/post/FlutterShop.html#toc-291 我们要做的效果图: 新建四个页面 home_page.dart ...
- mui底部导航栏切换分页
使用Hbuilder的mui框架开发移动端非常便利.高效: 底部导航栏切换功能也是移动APP开发中必须实现的: 引入mui文件.下面会用到jquery,同时引进 <link href=" ...
- MUI底部导航栏切换效果
首先是html代码: <nav class="mui-bar mui-bar-tab"> <a href="view/templates/home/ho ...
- Flutter 底部导航栏bottomNavigationBar
实现一个底部导航栏,包含3到4个功能标签,点击对应的导航标签可以切换到对应的页面内容,并且页面抬头显示的内容也会跟着改变. 实际上由于手机屏幕大小的限制,底部导航栏的功能标签一般在3到5个左右,如果太 ...
- 【Flutter学习】基本组件之BottomNavigationBar底部导航栏
一,概述 BottomNavigationBar即是底部导航栏控件,显示在页面底部的设计控件,用于在试图切换,底部导航栏包含多个标签.图标或者两者搭配的形式,简而言之提供了顶级视图之间的快速导航. 二 ...
- Flutter——BottomNavigationBar组件(底部导航栏组件)
BottomNavigationBar常用的属性: 属性名 说明 items List<BottomNavigationBarItem> 底部导航条按钮集合 iconSize icon c ...
- Flutter移动电商实战 --(4)打通底部导航栏
关于界面切换以及底栏的实现可参考之前写的一篇文章:Flutter实 ViewPager.bottomNavigationBar界面切换 1.新建4个基本dart文件 在pages目录下,我们新建下面四 ...
随机推荐
- Namespace declaration statement has to be the very first statement in the script-去除bom头
今天准备测试小程序的签名加密,但是刚引入官方的“加密数据解密算法”文件到项目里,然后为每个文件添加命名空间的时候,不管怎么加都报“Namespace declaration statement has ...
- Vs code常用插件
Vs code常用插件 1.View In Browser 由于 VSCode 没有提供直接在浏览器中打开文件的内置界面,所以此插件在快捷菜单中添加了在默认浏览器查看文件选项,以及在客户端(Firef ...
- Oracle课程档案,第十五天
restore:恢复数据文件 recover:写日志 1.redo(roll forward)重做 (前进) 2.undo(roll back) 撤销 (回滚) cp -r:删除一个目录 archiv ...
- 渗透常用dos命令,http协议及数据提交方式。 hack 某某
dir查看目录 cd 切换目录 strat www.xxx.com 打开网页 del 删除文件 cls 清屏幕命令 ipconfig 查看ip地址 netstat -an 显示网络连接.路由 ...
- ELK之使用heartbeat监控WEB站点
简介 无论您要测试同一台主机上的服务,还是要测试开放网络上的服务,Heartbeat 都能轻松生成运行时间数据和响应时间数据 Heartbeat 能够通过 ICMP.TCP 和 HTTP 进行 pin ...
- Codeforces 1136C - Nastya Is Transposing Matrices
题目链接:https://codeforces.com/problemset/problem/1136/C 题意: 给出 $n \times m$ 的矩阵 $A,B$,你可以对其中任意某个 $k \t ...
- Python-----redis数据库
# redis数据库:基于内存的高性能key-value数据库,整个数据库统统加载在内存当中进行操作,定期通过异步操作把数据库数据flush到硬盘上进行保存:#缺点:1.数据库容量受到物理内存的限制, ...
- 实验二《Java面向对象程序设计》的一点说明
实验二<Java面向对象程序设计>的一点说明 本周的实验要求是: 完成实验二<Java面向对象程序设计>中的内容 其中Eclipse相关的内容参考Intellj IDEA 简易 ...
- 手写RPC框架
https://www.bilibili.com/video/av23508597?from=search&seid=6870947260580707913 https://github.co ...
- Hive中MetaServer与HiveServer2的应用
在hive中有metaServer与hiveServer2两种服务,看了好多文章说这两个的区别,文章内容有对有错,不够全面,故在这里好好总结一下. 首先,下面这个hive构架图,我们一定不陌生,它反应 ...