实现底部导航栏并点击切换页面可简述为有三种方式 1,BottomNavigationBar 2,自定义 BottomAppBar 3,TabBar + TabBarView

最新推荐文章于 2024-06-07 17:51:58 发布
最新推荐文章于 2024-06-07 17:51:58 发布
阅读量920 收藏
点赞数 1
分类专栏： 跨平台 android studio Flutter 文章标签： flutter android studio android ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdx_1136346879/article/details/105582431
版权

在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，并且带来了不好的用户体验。

1， 1,BottomNavigationBar + BottomNavigationBarItem(index_page页面)
在这里插入图片描述
2,自定义 BottomAppBar 使用 BottomAppBar 来实现

在这里插入图片描述

3,TabBar + TabBarView
在这里插入图片描述
源码github

wd_113634687
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Uniapp 底部导航栏 自定义 tabBar 全端 全页面引用跳转 组件
09-23
自定义tabbar底部导航栏，简洁，方便，二开 使用教程 将组件拷贝到uni_modules目录内，然后其他页面进行引用即可 <TC-tabBar :zhi="zhi"></TC-tabBar> </template>
vue自定义底部导航栏Tabbar的实现代码
10-18
首先，自定义底部导航栏通常由多个可点击的选项组成，每个选项对应一个页面或视图。在这个例子中，我们有五个不同的页面（文件），每个页面可能被放在不同的文件夹中。为了实现 Tabbar，我们需要创建两个 Vue 组件：...
如何用android studio实现底部导航,AndroidStudio制作底部导航栏以及用Fragment实现切换功能...
最新发布
qq_73830179的博客
06-07 1404
大家好，我是 波士顿木木，今天给大家带来AndroidStudio制作底部导航栏以及用Fragment实现切换功能的概述，希望你们喜欢。
Flutter：App级别组件 - MaterialApp、Scaffold、AppBar、Drawer、BottomNavigationBar、SnackBar
weixin_41897680的博客
06-03 957
Flutter：App级别组件 - MaterialApp、Scaffold、AppBar、Drawer、BottomNavigationBar、SnackBar
Flutter学习（BottomNavigationBar、FloatingActionButton、Drawer、AppBar、PreferredSize）
m0_73533910的博客
06-29 204
BottomNavigationBar 是底部导航条，可以让我们定义底部Tab切换，bottomNavigationBar是Scaffold组件的参数。FloatingActionButton简称FAB，可以实现浮动按钮，也可以实现类似闲鱼app的底部凸起导航。①​混入SingleTickerProviderStateMixin。PreferredSize可以改变appBar的高度。③配置TabBar和TabBarView。②定义TabController。自定义顶部按钮图标、颜色。
【自学Flutter】18 TabBar、TabBarView、BottomAppBar 导航栏和浮动按钮的使用
2401_84046895的博客
04-01 673
下面是辛苦给大家整理的学习路线《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门即可获取！既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：Android）下面是辛苦给大家整理的学习路线。
笔录Flutter (八)BottomNavigationBar实现底部导航、TabBar+TabBarView实现Tab切换
qq_34501274的博客
08-09 2123
效果图： BottomNavigationBar实现底部导航 常用属性 使用 void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home...
微信小程序自定义底部导航栏，切换不同页面显示不同tabbar
马果的博客
03-19 1万+
    在一个微信小程序中想要用到两种不同的tabbar样式，需要在app.js中自定义，在页面加载时进行调用。比如一个小程序需要两个版本（用户版、商家版），并且能通过一个按钮在两个版本间进行切换，可能会用到这种方式。    此处以两个页面（index，logs）显示两种tabbar样式为例，通过切换按钮...
flutter控件----滑动图片背景的TabBar+TabBarView实现
姜澜的博客
05-24 3492
一、概述 项目要求实现以下效果： TabBar选中状态有一个背景图片，TabBarView翻页的时候会跟随移动。 本来想直接使用TabBar的indicator自定义为一个背景图片，这样就能非常方便的完成效果，结果发现可以自定义为带边框的Decoration，但是不能自定义为图片，否则就会报错。 然而自定义view实现起来又不是特别容易和方便，于是乎就想直接在TabBar外边加一个会移动的图片不...
uniApp开发小程序自定义tabBar底部导航栏+tabBar中间凸起自定义样式实现
m0_60859997的博客
11-25 1万+
我要卖我要买
uni-app 经验分享，从入门到离职（二）—— tabBar 底部导航栏实战基础篇
热门推荐
黛琳ghz的博客，期待你的关注。
08-19 3万+
这篇文章的内容主题是关于小程序的 tabbar 底部导航栏的入门使用和实战技巧。通过上一篇文章的基础，我们继续对 uni-app 进行更深一步的了解和学习，以上一篇文章创建的项目为例子，我们在这个项目的基础上进行改动和学习小程序的 tabbar 内容。
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
10-17
主要介绍了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能,结合实例形式分析了微信小程序自定义顶部TabBar选项卡页面切换功能的相关布局、样式及功能实现技巧,需要的朋友可以参考下
自定义底部导航栏（tabBar）
03-29
如果大家用过微信提供的tabBar就会发现，他的tabBar有很大的局限性。 暂且不说样式局限性了，他提供的app.json配置文件中没有function。 这也就意味着使用它提供的这个组件，你只能用于跳转页面，不能干其它的事情 ...
Flutter轮播图编写（两种方式）CarouselSlider和PageView（自动轮播，也可以手动左右拖拽）
wdx_1136346879的博客
03-08 4959
banner轮播图图组件， banner可以独立引用 可用两种方式编写CarouselSlider和PageView CarouselSlider方式 PageView方式： 如对您有帮助，欢迎starts 谢谢。 项目源码github：https://github.com/1136346879/flutter- 鸣谢flutter中文网 https://flutterchina.club...
Flutter 项目编写 第三方插件库文件引入，本地图片 json数据引入解析
wdx_1136346879的博客
03-07 4535
FlutterDemo是如何一步一步搭建起来的 最初就是直接新建flutter项目，就会自动建立一个入门项目。（开始项目前，需先学习Dart语言） flutter项目代码都在lib目录下编写： 新建包，新建dart类，在dart类中编写 flutter 插件引入： （可以看项目中如何引入的） 首先在项目更目录下找这个文件： pubspec.yaml dependencies: flutter: s...
在安卓studio中导入flutter项目报错
wdx_1136346879的博客
02-21 3687
在安卓studio中导入flutter项目报错 新导入项目报错，flutter的导入包提示target of uri doesnt exist import ‘package:flutter/material.dart’; 报红线 main.dart文件一片红 解决办法：选择 Tools目录下的–》 Flutter --》 Flutter packages get 即可 稍等错误解决。 ...
**如何在Flutter中显示进度指示器**
wdx_1136346879的博客
04-03 1975
如何在Flutter中显示进度指示器 在Android中，当您执行耗时任务时，通常会显示进度指示器。 在Flutter中，这可以通过渲染Progress Indicator widget来实现。您可以通过编程方式显示Progress Indicator ， 通过布尔值通知Flutter在耗时任务发起之前更新其状态。 在下面的例子中，我们将build函数分解为三个不同的函数。如果showLoadin...
flutter从其他子页面的跳转到TabBar，TabBarView中某个页面时，不覆盖底部导航栏，详细实现流程代码
07-15
要实现从其他子页面跳转到TabBar中的某个页面时，不覆盖底部导航栏，你可以使用Flutter中的IndexedStack组件来管理页面堆栈，并在跳转时设置相关参数以实现你的需求。 首先，在你的TabBar页面中，定义一个变量来存储当前选中的页面索引： ```dart int currentIndex = 0; ``` 然后，在TabBarView中使用IndexedStack来管理页面堆栈： ```dart IndexedStack( index: currentIndex, children: [ // 页面1 // 页面2 // 页面3 ], ) ``` 接下来，在底部导航栏中，使用BottomNavigationBar来显示导航按钮，并在点击按钮时更新currentIndex的值： ```dart BottomNavigationBar( currentIndex: currentIndex, onTap: (index) { setState(() { currentIndex = index; }); }, items: [ BottomNavigationBarItem( icon: Icon(Icons.page1), label: 'Page 1', ), BottomNavigationBarItem( icon: Icon(Icons.page2), label: 'Page 2', ), BottomNavigationBarItem( icon: Icon(Icons.page3), label: 'Page 3', ), ], ) ``` 这样，通过点击底部导航栏上的按钮，可以在TabBarView中切换到对应的页面，且底部导航栏始终保持可见。 接下来，在其他子页面中，通过Navigator组件进行跳转到TabBar页面的某个页面时，可以使用Navigator.pushReplacement方法替换当前路由，并将currentIndex参数传递过去： ```dart Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => TabBarPage(currentIndex: desiredIndex), ), ); ``` 在TabBarPage中，接收currentIndex参数，并在初始化时将其赋值给currentIndex变量： ```dart class TabBarPage extends StatefulWidget { final int currentIndex; TabBarPage({this.currentIndex = 0}); @override _TabBarPageState createState() => _TabBarPageState(); } class _TabBarPageState extends State<TabBarPage> { int currentIndex; @override void initState() { super.initState(); currentIndex = widget.currentIndex; } @override Widget build(BuildContext context) { return Scaffold( // TabBar和TabBarView的实现 // ... ); } } ``` 这样，在从其他子页面跳转到TabBar中的某个页面时，底部导航栏不会被覆盖，并且保持正确的页面索引。 希望以上代码示例能帮到你！如果还有其他问题，请随时提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值