5.1 使用IndexedStack实现页面切换 IndexedStack是Flutter提供的一个用于显示多个子widget中的一个的组件。...5.2 利用PageView实现页面滑动切换 另一种常见的底部导航栏与页面切换方式是利用Flutter提供的PageView组件，它可以实现页面的滑动切换效果。...通过将多个页面放置在一个PageView中，并配合底部导航栏实现页面切换，可以为用户提供更加流畅的导航体验。...通过设置_bottomNavigationBarState类中的_onItemTapped函数，可以实现底部导航栏与页面的切换效果，并利用PageView的onPageChanged回调函数实现页面切换时的同步更新...6.1 使用Provider进行状态管理 Provider是Flutter生态中最常用的状态管理库之一，它提供了一种简单而强大的方式来管理应用程序的状态，并在不同组件之间进行状态共享。
作为系列文章的第二篇，继《Flutter完整开发实战详解(一、Dart语言和Flutter基础)》之后，本篇将为你着重展示：如何搭建一个通用的Flutter App 常用功能脚手架，快速开发一个完整的...外部调用代码如下：每个 Tabbar 点击时，通过pageController.jumpTo 跳转页面，每个页面需要跳转坐标为：当前屏幕大小乘以索引 index 。...，StatefulWidget 的子页面每次都会重新调用initState。...不同与 JS ，比如使用上述 Dio 网络请求返回，如果配置了返回数据格式为 json ，实际上的到会是一个Map。...这里主要提供一种思路，按照 sqflite 文档提供的方法，重新做了一小些修改，通过定义 Provider 操作数据库： 在 Provider 中定义表名与数据库字段常量，用于创建表与字段操作； 提供数据库与数据实体之间的映射
前言： 在Flutter应用中，导航栏切换页面后默认情况下会丢失原页面状态，即每次进入页面时都会重新初始化状态，如果在initState中打印日志，会发现每次进入时都会输出，显然这样增加了额外的开销，...它拥有一个固定的底部导航以及首页的顶部导航，可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面，之前的页面状态都是始终维持的，下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果...可以看到，从第二页切换回第一页时，第一页的状态已经丢失 第二步：实现底部导航切换时保持原页面状态 可能有些小伙伴在搜索后会开始直接使用官方推荐的AutomaticKeepAliveClientMixin...实现 写到这里已经很简单了，我们只需要在首页导航内需要保持页面状态的子页State中，继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true即可。...更新 前面在底部导航介绍了使用IndexedStack和Offstage两种方式实现保持页面状态，但它们的缺点在于第一次加载时便实例化了所有的子页面State。
State层 State是专门用来存放页面变量和初始化相关变量数据的 我曾写过一个比较复杂模块 页面的变量达到几百个（涉及到复杂的表单提交），与用户的事件交互也有几十个 整个模块很多逻辑依靠相关变量去标定...如果大家在PageView中使用getx，可能会发现，所有的子页面中的GetXController，一下全被注入了！...的子页面 使用GetX封装的复杂组件 不使用GetX路由 上面的这些情况都无法自动回收GetXController；为此，我在插件里，给出了一个解决方案，区别只在view文件 通用解决方案 [autoDispose...，也会帮你补上生成页面的构造函数 template（切换模板命名） 场景 该功能提供了切换模板命名的操作 提供三套模板命名，只提供三套，不会再多增了 内部对持久化模块进行了重构 不重构不行，增加了大量的持久化变量...，还全部使用静态变量着实不优雅 增加了数据类，来记录大量重复的持久化数据 为什么要提供切换模板命名的功能？
首先看一下如下视频： 通过视频我们可以看到，当通过底部tabBar将页面在“首页”和“分类”之间进行切换的时候，每一次进入页面的时候该页面的数据都会重新加载。...那么如何让页面保持原来的状态，而不是每次都要重新加载刷新数据呢？有两种方式。...第一种方式：采用IndexdStack IndexdStack和Stack一样，都是层布局控件，可以在一个控件上面放置另一个控件，但唯一不同的是，IndexdStack在同一时刻只能显示子控件中的一个控件...使用IndexedStack来保持页面状态的优点就是配置简单，但是它也有很大的缺点：IndexedStack中管理的子页面在一开始就全部一次性加载出来了，不管有没有显示出来，然后通过index属性来确定到底显示哪一个页面...，页面数据只在首次进入该页面的时候进行刷新；而其他没有实现页面保持的页面在每次进入该页面的时候，数据都会刷新。
一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。...v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。...所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 3、Class 与 Style 如何动态绑定？...这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。...的缓存特性，避免每次获取值时，都要重新计算； 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率
PageView 滑动页面预览应用在很多场景中，和尚之前只用过最基本的用法，今天和尚尝试系统性的学习一下 PageView 的基本应用； PageView 一般用户少量需要滑动页面切换的场景，但整体使用很灵活...PageView() 和尚首先使用默认构造函数生成一个基本的 PageView； return Container( height: 240, child: PageView(children...3. pageSnapping pageSnapping 用于是否禁止页面捕捉，和尚理解为 Page 页面是否为整页滑动切换；当 pageSnapping=false 时，Page 页可以逐步滑动，滑动到中途一半的时候也可以停止...5. onPageChanged onPageChanged 是页面监听的回调，当页面切换时，会返回当前 Position，可以根据当前具体位置进行业务处理； return Container( height...6. physics physics 主要体现在首页和尾页结束时动画动画效果，为 ScrollPhysics 类型，可以自定义也可以根据 Flutter 提供的动画来处理；类似的有 ClampingScrollPhysics
既然是使用系统的，那么 Content Provider的具体实现就不需要我们担心了，使用内容提供者的步骤如下： 1、获取 Content Resolver 实例 2、确定 Uri 的内容，并解析为具体的...系统到底是如何根据一个 Uri 就能够提供给我们准确的结果呢？只有自己亲自实现一个看看了。...发送一个有序广播使用 Content.sendOrderedBroadcast() 方法，有序广播比较特殊，它每次只发送到优先级较高的接收者那里，然后由优先级高的接收者再传播到优先级低的接收者那里，优先级高的接收者有能力终止这个广播...则会抛出异常 如果不做这个校验，是不是我也可以正常在子线程更新UI // 如果不做这个校验，是不是我也可以正常在子线程更新UI？...所以干脆使用单线程模型处理UI操作，使用时用Handler切换即可 为什么一开始在Activity的onCreate方法中创建一个子线程访问UI，程序还是正常能跑起来呢 // 为什么一开始在Activity
局部状态：根据官方的含义，就是一个StatefulWidget可以搞定的，比如BottomNavigationBar、PageView等等，其他Widget不需要知道你的状态，你也不需要依赖其他Widget...的状态；setState可以实现状态的切换； 全局状态：整个app很多页面都需要用到的状态，比如是否登录了，用户名、用户id等；这个的实现有很多方式，可以参考List of state management...Flutter状态管理系列主要指的是全局状态的管理，主要介绍的几种实现方式有： InheritedWidget StreamBuilder Provider 前两种，框架自带；第三种是google推荐使用的三方库...下面的例子，涉及两个页面，第一个页面展示是否登录信息，第二个页面根据是否登录了来走是登录、还是退出的逻辑。...一个InheritedWidget，多个表示状态的类；需要考虑InheritedWidget的updateShouldNotify方法需要如何实现，每个状态稍有不同就去通知，那么全局那么多Widget都会收到消息
在反复的查阅官方文档后，使用一个全局Bloc的方式，实现了“伪”跨页面交互，详细可查看：flutter_bloc使用解析；fish_redux的广播机制是可以比较完美的实现跨页面交互的，我也写了一篇几万字介绍如何使用该框架...bloc没实现路由管理，我不得不找一个star量高的路由框架，就选择了fluro，但是不得不吐槽下，fluro用起来真的很折磨人，每次新建一个页面，最让我抗拒的就是去写fluro路由代码，横跨几个文件来回写...）之类：使用Get.toName，肯定需要使用GetPage；如果使用Get.to，是不需要在GetPage中注册的，Get.to的内部有一个添加到GetPageRoute的操作 通过上面会在GetPage...GetX路由 PageView，TabView等子页面 使用GetX封装的复杂组件 解决方案 这边我模拟了上面场景，写了一个解决方案 第一个页面跳转 Navigator.push( Get.context...并不是切换到某个页面时，对应页面的控制器才被初始化！
在一些应用中会应用到这一个特性，最典型的就是手机桌面的应用图标列表。这些界面中往往每一页功能都比较独立，系统也提供了UIPageViewController来实现这种分页滚动的功能。...0时表示开始分页展示的功能，这里表示每页展示9个子视图，这个数量必须是arrangedCount的倍数。...containerView.wrapContentWidth = YES; //设置布局视图的宽度由子视图包裹，当垂直流式布局的这个属性设置为YES，并和pagedCount搭配使用会产生分页从左到右滚动的效果...分页图标效果图 横竖屏切换 对于带有分页功能的滚动视图来说，当需要支持横竖屏时就有可能会出现横竖屏切换时界面停留在两个页面中间而不是按页进行滚动的效果。...而当滚动视图进行横竖屏切换时不会调整对应的contentOffset值，这样就导致了在屏幕方向切换时的滚动位置出现异常。
在所有的需要遍历的列表当中，都加上一个key值，这个值不能是那种遍历时候的序号，必须是一个固定值。比如该条数据id。这个key可以帮助diff算法更好的复用dom元素，而不是销毁再重新生成。...异步组件（懒加载组件） 最典型场景是tab页面切换，当tab切换到相应的页面上时，再去加载相应页面的组件js。这些的组件资源不会包含在主包里，在后续在用户需要的时候，再去加载相关的组件js资源。...在tab切换到相应的页面时，加载这个js，渲染出相应的组件。...说明Child这个组件在我们父组件的state变化之后，每次都会重新render。我们可以使用React.memo来避免子组件的重复render。...传入的参数是一个静态的对象，你觉得现在子组件会重复渲染吗？一开始我觉得不会，实际测试下来，发现子组件又开始了重复渲染。
，从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 类似的数据或场景还有已填写但未提交的表单、管理系统中可切换和可关闭的功能标签等，这类数据随着用户交互逐渐变化或增长，这里理解为状态，在交互过程中...，因为某些原因需要临时离开交互场景，则需要对状态进行保存 在 React 中，我们通常会使用路由去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中，当用户从详情页退回列表页时...手动保存状态就会变成一件麻烦事了 作为程序员，当然是尽可能懒啦，为了不需要每次都关心如何对数据进行保存恢复，我们需要研究如何自动保存状态 最初的版本react-keep-alive ?...，必须要渲染 使用React的Context API进行传递KEEP方法给所有的子孙组件，每次这个方法被调用，都会造成AliveScope 组件重新渲染，进而刷新子组件，并且返回一个真实的DOM节点，这个真实的...，将KeepAlive组件传入，返回一个新的组件，这里使用了装饰器，@withScope.其实最终export default 的是withScope(KeepAlive) 这里就是跟react-keep-alive
在老项目（主应用）中加载新项目的页面 这样一来就可以避免 “我要一整个月都做重构” 的局面，而是可以做到一个页面一个页地慢慢迁移。...升级版架构 上图的架构有一个问题就是，当每次点击侧边栏的 MenuItem 时，都会加载一次微应用的子页面，也即： 微应用子页面之间的切换，其实就是在微应用里路由切换嘛，大可不需要通过重新加载一次微应用来做微应用子页面的切换...当在切换新页面时，本质上是在子应用里做路由切换，而不是从 A 应用切换到 B 应用了。...全局变量报错 另一个问题就是当子应用隐式使用全局变量时，import-html-entry 执行 JS 时会直接爆炸。...这是因为在主应用切换路由时不是通过 location.url 这种可以触发 hash change 事件的方式来变更路由，而 react-router 只监听了 hash change 事件，所以当主应用切换路由时
所以我们可以在需要的页面，通过最外层嵌套如下代码设置，将字体设置为默认不允许缩放。...8、PageView 如果你在使用 TarBarView ，并且使用了 KeepAlive 的话，那么我推荐你直接使用 PageView 。...因为目前到 1.2 的版本，在 KeepAlive 的 状态下，跨两个页面以上的 Tab 直接切换， TarBarView 会导致页面的 dispose 再重新 initState。...你可以直接使用 PageView + TabBar 去实现，然后 tab 切换时使用 _pageController.jumpTo(MediaQuery.of(context).size.width...除了这个，其实还有第二种做法，使用如下方 PageStorageKey 保持页面数状态，但是因为它是 save and restore values ，所以的页面的 dispose 再重新 initState
官网建议，BottomNavigationBar 底部导航栏通常与 Scaffold 一起使用，其中它作为Scaffold.bottomNavigationBar 参数提供。...只有底部状态栏是不够的，还需要对应的中间展示内容块，可以跟 Android 的思路一样，添加几个 Page() 页作为 Fragment，和尚因为测试内容相对简单，尝试使用了 PageView，即对应..."这里是【HomePage】->【签到】页面" : "这里是【HomePage】->【我】页面"; return new Center( child: new Container...会切换内容，但是底部状态栏并没有改变样式，因为目前用的时固定的图标和文字，此时需要处理图标和文字切换时的样式，如下： var _bottomText = ['签到', '我']; var _bottomIcons...实用小贴士 通过点击 BottomNavigationBar 对 PageView 切换过程中，可以设置动画过程，也可以直接跳转到对应页面，需要设置 animateToPage 或 jumpToPage
v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。...所以，v-if 适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show 则适用于需要非常频繁切换条件的场景。 3、Class 与 Style 如何动态绑定？...这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。 额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。...的缓存特性，避免每次获取值时，都要重新计算； 当我们需要在数据变化时执行异步或开销较大的操作时，应该使用 watch，使用 watch 选项允许我们执行异步操作 ( 访问一个 API )，限制我们执行该操作的频率...需要注意的是 ViewModel 所封装出来的数据模型包括视图的状态和行为两部分，而 Model 层的数据模型是只包含状态的，比如页面的这一块展示什么，而页面加载进来时发生什么，点击这一块发生什么，这一块滚动时发生什么这些都属于视图行为
以下是如何将 NavigationRail 与 PageView 结合使用的解释和演示： 5.1 解释如何结合页面切换组件 使用 PageView： PageView 组件允许用户在页面之间滑动，因此非常适合与...5.2 演示如何根据选定的导航栏项切换页面内容 下面是一个简单的示例，演示如何将 NavigationRail 与 PageView 结合使用，并根据选定的导航栏项切换页面内容： class MyHomePage...然后，我们使用页面控制器 _pageController 来将 PageView 的当前页设置为选定的索引，从而切换到相应的页面。...通过这种方法，您可以实现根据选定的导航栏项切换不同的页面内容，为用户提供直观的导航体验。您还可以根据需要将其他页面添加到 PageView 中，以扩展应用程序的功能。 6....A: 当导航项超出屏幕宽度时，NavigationRail 会自动在侧边添加一个滚动条，用户可以通过滚动来查看所有导航项。 Q: 我应该何时使用 NavigationRail？
provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。...provide / inject API主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。...:当我们要进行数值计算,而且依赖于其他数据，那么把这个数据设计为computed如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化那vue中是如何检测数组变化的呢？...v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。...v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
领取专属 10元无门槛券
手把手带您无忧上云
