flutter页面切换,flutter 页面特效

Flutter 三个页面由tab和TabBarView实现,其中一个页面是webview,切换tab,怎么取消Webview的页面

class _OpenLogListComponentState extends StateOpenLogListComponent with AutomaticKeepAliveClientMixin{

目前创新互联建站已为近千家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、贡井网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

@protected

bool get wantKeepAlive=true;

//其他逻辑

}

方法二： 使用IndexedStack存储页面

_body = IndexedStack(

children: Widget[

BookHousePage(),

FunctionPage(),

ChatPage(),

MinePage()

],

index: _currentPageIndex,

);

Flutter：State生命周期以及页面重载问题详解

这里需要混入WidgetsBindingObserver，重写didChangeAppLifecycleState方法才能看到app进入前后台的状态

我这边使用的是一个嵌套行页面，主页面(TabBarViewPage)是一个TabBar+TabBarView实现的子页面切换，子页面是三个页面(HomeItemPage,EmailItemPage,MineItemPage)

子页面互相切换的时候下一个页面创建，上一个页面就会被销毁，这是flutter默认的情况，页面会被移除然后重载。当然你也可以设置需要的页面不被重载的页面，这个后面再讲

解决页面重载需要三步

可以看到home并没有被销毁也没有重载，但是mail被销毁了然后重载了

可以看到当主页面销毁的时候，home也是被销毁的

flutter跳转原生页面后的穿透问题

现象：

flutter页面通过present跳转原生页面后，原生页面上的点击会首先响应下面的flutter页面中的内容（比如按钮什么的）。

这是flutter框架一直存在的一个bug。在github上有相关的issue。

原因推测：

推测是flutter对控制器（或者view）加了分类，重写了控制器的点击事件，用来计算是否在对应的点击位置有flutter响应事件。没有的话再扔出去点击事件。

解决方案1：

在原生控制器中，加入点击事件的几个方法的空实现，用以覆盖flutter框架中的实现：

-(void)touchesBegan:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesMoved:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesCancelled:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

-(void)touchesEnded:(NSSetUITouch * *)touches withEvent:(UIEvent *)event{

}

让事件不被flutter截获即可。

解决方案2：

直接切换window的根控制器到原生控制器即可。别忘暂时保存flutter控制器。

在返回时再切换回flutter中。

解决方案3：

在flutter跳转到原生页面之前，在flutter中加上一个蒙层，用来隔绝手势往flutter下面的view传递。原生页面返回flutter时再移除这个蒙层。

flutter 完全使用GetX 主题切换 以及 自创建Widget的颜色随主题变化方案

这篇将会解决手动切换主题以及跟随手机切换主题来更新UI(包括自己创建的Widget)

主题切换有个问题，就是如果是我们自定义或者在 build() 自己创建的部件是不会随着系统的主题切换而发生主题色变化的(实际测试中，如果页面在顶层(没有被push)切换主题并不会触发 build() 方法,(push之后的页面切换系统主题是可以触发 build() 的,而且会频繁触发好多次...)，既然无法通过重新 build 更新组件的主题色，那么我们在切换主题后，强制触发整个app的 build() 就可以了)

iOS开发Flutter探索-State状态保存(10)

有时候我们不希望某个页面每次打开时都重新加载，比如就我们之前的Tabbar结构的页面，每当我们在切换Tab的时候都会执行 void initState() ，这就意味着页面每次都会重新渲染，之所以这样就是因为我们的 State 状态没有保存，如下图所示：

[没有状态保存效果图]

给当前 State 类添加一个扩展(这里就用扩展这个词吧，其实类似于iOS下的 Category )，一个系统的扩展类 AutomaticKeepAliveClientMixin ，并重写 wantKeepAlive 方法，让一个普通的 State 类，具有保存状态的能力。

在Dart语法中通过使用 with 关键字来添加扩展：

bool get wantKeepAlive = true; 之后，当前 State 就具备保存能力了，也就意味着重复切换Tab后， void initState() 就不会重复执行了（由原来的 viewWillAppear() 变成了 viewDidLoad() ）。

按照上面方式修改后，发现切换Tab后 void initState() 依然重复执行了，这是为什么呐？这里我们看下我们之前 root_page.dart 里面是如何配置我们的tabbar结构的：

这里我们是通过一个 _viewControllers 的List，把4个子页面放在了里面，全局有一个 _currentIndex ，当 onTap 回调后后，更新 _currentIndex 的值，执行 setState () 后， body 对应的 widget 页面发生改变。而问题也就出在这里，当 body 部分发生改变时，根据Flutter的底层渲染逻辑，这里会移除掉之前的 Widget ，并重新创建新的 Widget ，我们之前在 _viewControllers 放的子页面，并不像iOS下是一个实例对象，存在就直接拿来使用。在Flutter 中 setState () 后界面会被重新绘制，而 body 部分只知道我要渲染一个什么样的 widget ，而该类型的 widget 每次都是会重新创建，这也就意味着我们在Tab切换时，每次都是重新创建，所以每次都执行了 initState() 。

显然我们现在的方式是不合理的，那在Flutter中如何管理这样的子页面，而避免重复渲染呐？

这就要用到一个新的部件了： PageView() ,内部的2个关键属性：

子页面切换通过 _controller.jumpToPage(index); 来实现。

这样子页面也就不会重新创建渲染了，我们的状态保存也就能正常实现了。

学习是一个循序渐进的过程，我们总是在踩坑中不断的前行，把坑填平了也就意味着我们在这个新的东西面前立了足，就可能进行更多为什么的探索了。