没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
试读
10页
前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验。 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实现固定的底部导航 在通过flutter create生成的项目模板中,我们先简化一下代码,将
资源推荐
资源详情
资源评论
Flutter实现页面切换后保持原页面状态的实现页面切换后保持原页面状态的3种方法种方法
前言:前言:
在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState
中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验。
在正文之前,先看一些常见的App导航,以喜马拉雅FM为例:
它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前
的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果
第一步:实现固定的底部导航第一步:实现固定的底部导航
在通过flutter create生成的项目模板中,我们先简化一下代码,将MyHomePage提取到一个单独的home.dart文件,并在
Scaffold脚手架中添加bottomNavigationBar底部导航,在body中展示当前选中的子页面。
/// home.dart
import 'package:flutter/material.dart';
import './pages/first_page.dart';
import './pages/second_page.dart';
import './pages/third_page.dart';
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
资源评论
weixin_38576811
- 粉丝: 6
- 资源: 890
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- web学习笔记.doc
- 基于pytorch+Unet进行MRI肝脏图像分割源码+数据集+模型.zip
- 在Android Studio中开发一个Android App项目步骤
- 基于yolov8实现进行物体跟踪源码.zip
- Java多线程学习Java多线程学习Java多线程学习Java多线程学习.txt
- 算法数据结构-动态规划算法(Dynamic Programming)超详细总结加应用案例讲解.txt
- 2024最强秋招八股文(精简、纯手打)2024最强秋招八股文(精简、纯手打).txt
- 基于tensorflow多特征融合的微表情识别python源码.zip
- 基于yolov8实现人脸检测的python源码+运行说明.zip
- Micron Memory DDR3 SDRAM 全系列AD集成库(原理图库+PCB封装库).IntLib
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功