Flutter-bottomNavigationBar+PageView布局

1|0KeepAliveWrapper

主要避免在切换Tab时,会刷新当前页面的所有状态,每个页面都会重新刷新

这里引入一个组件,能同时在列表中和列表外使用,并可以缓存它

class KeepAliveWrapper extends StatefulWidget { const KeepAliveWrapper({ Key? key, this.keepAlive = true, required this.child, }) : super(key: key); final bool keepAlive; final Widget child; @override _KeepAliveWrapperState createState() => _KeepAliveWrapperState(); } class _KeepAliveWrapperState extends State<KeepAliveWrapper> with AutomaticKeepAliveClientMixin { @override Widget build(BuildContext context) { super.build(context); return widget.child; } @override void didUpdateWidget(covariant KeepAliveWrapper oldWidget) { if(oldWidget.keepAlive != widget.keepAlive) { updateKeepAlive(); } super.didUpdateWidget(oldWidget); } @override bool get wantKeepAlive => widget.keepAlive; }

2|0示例

创建page时,将page用 KeepAliveWrapper 包装一下

List _views = [ KeepAliveWrapper( keepAlive: true, child: Page(), ), KeepAliveWrapper( keepAlive: true, child: Page(), ), KeepAliveWrapper( keepAlive: true, child: Page(), ), ];

创建 PageView 时,禁止左右滑动(根据需求而定)

PageController _controller = new PageController();
PageView.builder( ///禁止左右滑动 physics: NeverScrollableScrollPhysics(), itemBuilder: (context, index) { return _views[index]; }, itemCount: _views.length, controller: _controller, )

bottomNavigationBar点击更新切换当前显示page

if (index != _currIndex) { setState(() { _currIndex = index; _controller.jumpToPage(index); }); }

 

相关:

https://book.flutterchina.club/chapter6/keepalive.html#_6-8-1-automatickeepalive


__EOF__

本文作者K
本文链接https://www.cnblogs.com/wangkejia/p/16210664.html
关于博主:评论和私信尽量在第一时间回复哦~
版权声明:如果您要转载,请注明出处哦~
声援博主:如果觉得文章对您有帮助,点击文章右下角【推荐】一下吧~
posted @   macroK  阅读(446)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· NetPad:一个.NET开源、跨平台的C#编辑器
· PowerShell开发游戏 · 打蜜蜂
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!
点击右上角即可分享
微信分享提示