flutter TabBarView和PageView的页面状态保存问题

我们在使用TabBar或者BottomNavigationBar的时候,都会配合使用 TabBarView和PageView 进行页面展示,但如果不做特别处理的话,我们会发现在每次切换页面之后,页面都会重新刷新(比如一个列表页面,拉到最后一条数据,然后跳转到其它Tab再跳转回来,列表又变成从第一条数据开始展示),实在是很不友好。这里有两种办法解决:

  • PageStorageKey
  • AutomaticKeepAliveClientMixin

两种方法都能记录页面状态,两者又有些异同:

  1. 两者都是在 TabBarView 和 PageView 的子页面进行设置
  2. 设置 PageStorageKey 的页面每次都是会重新走生命周期,也就是每次进入页面都会重新调用 initState() 和 build 等一系列方法;而设置 AutomaticKeepAliveClientMixin 的页面只在第一次进入的时候会走页面的生命周期,后面不会重新调用。

1、PageStorageKey

class TabPageTestController extends StatefulWidget {
  final String title;

  TabPageTestController({Key key, this.title}): super(key: key);
  
  @override
  _TabPageTestControllerState createState() => _TabPageTestControllerState();
}

class _TabPageTestControllerState extends State<TabPageTestController>{
  List<String> dates =
  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以使用`IndexedStack`和`TabBar`组件来实现无动画切换的`TabBarView`效果。首先,将`TabBar`和`TabBarView`包装在一个`IndexedStack`中,并将当前选中的tab索引传递给`IndexedStack`的`index`属性。然后,使用`TabBar`的`onTap`回调来更新选中的tab索引。这样,当切换tab,`IndexedStack`会根据当前选中的tab索引显示相应的页面,实现无动画切换效果。 以下是一个示例代码: ```dart import 'package:flutter/material.dart'; class MyTabBarView extends StatefulWidget { @override _MyTabBarViewState createState() => _MyTabBarViewState(); } class _MyTabBarViewState extends State<MyTabBarView> with SingleTickerProviderStateMixin { TabController _tabController; int _currentIndex = 0; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); _tabController.addListener(() { setState(() { _currentIndex = _tabController.index; }); }); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('TabBarView'), ), body: Column( children: [ TabBar( controller: _tabController, tabs: [ Tab(text: 'Tab 1'), Tab(text: 'Tab 2'), Tab(text: 'Tab 3'), ], onTap: (index) { setState(() { _currentIndex = index; }); }, ), Expanded( child: IndexedStack( index: _currentIndex, children: [ Container( color: Colors.red, child: Center(child: Text('Page 1')), ), Container( color: Colors.blue, child: Center(child: Text('Page 2')), ), Container( color: Colors.green, child: Center(child: Text('Page 3')), ), ], ), ), ], ), ); } } void main() { runApp(MaterialApp(home: MyTabBarView())); } ``` 在这个示例中,我们使用`TabBar`来显示选项卡,`IndexedStack`用来根据当前选中的tab索引显示相应的页面。当用户点击选项卡,我们使用`onTap`回调来更新选中的tab索引,从而实现切换页面的效果。由于使用了`IndexedStack`,切换没有动画效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值