重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
class _OpenLogListComponentState extends StateOpenLogListComponent with AutomaticKeepAliveClientMixin{
目前创新互联建站已为近千家的企业提供了网站建设、域名、网页空间、网站托管维护、企业网站设计、贡井网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
@protected
bool get wantKeepAlive=true;
//其他逻辑
}
方法二: 使用IndexedStack存储页面
_body = IndexedStack(
children: Widget[
BookHousePage(),
FunctionPage(),
ChatPage(),
MinePage()
],
index: _currentPageIndex,
);
这里需要混入WidgetsBindingObserver,重写didChangeAppLifecycleState方法才能看到app进入前后台的状态
我这边使用的是一个嵌套行页面,主页面(TabBarViewPage)是一个TabBar+TabBarView实现的子页面切换,子页面是三个页面(HomeItemPage,EmailItemPage,MineItemPage)
子页面互相切换的时候下一个页面创建,上一个页面就会被销毁,这是flutter默认的情况,页面会被移除然后重载。当然你也可以设置需要的页面不被重载的页面,这个后面再讲
解决页面重载需要三步
可以看到home并没有被销毁也没有重载,但是mail被销毁了然后重载了
可以看到当主页面销毁的时候,home也是被销毁的
现象:
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时再移除这个蒙层。
这篇将会解决手动切换主题以及跟随手机切换主题来更新UI(包括自己创建的Widget)
主题切换有个问题,就是如果是我们自定义或者在 build() 自己创建的部件是不会随着系统的主题切换而发生主题色变化的(实际测试中,如果页面在顶层(没有被push)切换主题并不会触发 build() 方法,(push之后的页面切换系统主题是可以触发 build() 的,而且会频繁触发好多次...),既然无法通过重新 build 更新组件的主题色,那么我们在切换主题后,强制触发整个app的 build() 就可以了)
有时候我们不希望某个页面每次打开时都重新加载,比如就我们之前的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); 来实现。
这样子页面也就不会重新创建渲染了,我们的状态保存也就能正常实现了。
学习是一个循序渐进的过程,我们总是在踩坑中不断的前行,把坑填平了也就意味着我们在这个新的东西面前立了足,就可能进行更多为什么的探索了。