189 8069 5689

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); 来实现。

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

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


文章题目:flutter页面切换,flutter 页面特效
新闻来源:http://cdxtjz.cn/article/phjjgg.html

其他资讯