解决Flutter使用 Scaffold + Tabbar + TabbarView保存页面状态问题

最新推荐文章于 2025-01-24 09:59:17 发布

原创最新推荐文章于 2025-01-24 09:59:17 发布 · 1.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #tabbarView #tabbar #页面状态保存

flutter 专栏收录该内容

5 篇文章

订阅专栏

Flutter切换tab后默认不保留状态，为节约内存widget状态不保存。使用TabBar和TabBarView时，切换tab会重新调用initState。可让子页State继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true来保持页面状态，若不起作用，在子tab页面build方法中调用父类build(context)。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flutter切换tab后默认不会保留tab状态，Flutter中为了节约内存不会保存widget的状态,widget都是临时变量。当我们使用TabBar,TabBarView是我们就会发现,切换tab，initState又会被调用一次。为了让tab一直保存在内存中不被销毁。在需要保持页面状态的子页State中，继承AutomaticKeepAliveClientMixin并重写wantKeepAlive为true即可。

class FirstState extends State<FirstView>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Text('xixixi');
  }
  //不会被销毁,占内存中
  @override
  bool get wantKeepAlive => true;
}

notes：Subclasses must implement wantKeepAlive, and their build methods
must call super.build (the return value will always return null, and
should be ignored)

但是有时候还是不起作用，在需要保存页面状态的子tab页面的build方法中调用父类build（context）。

  @override
  Widget build(BuildContext context) {
    super.build(context);//必须添加
   .....
        ));

原因：

A mixin with convenience methods for clients of [AutomaticKeepAlive]. Used with [State] subclasses.
/
Subclasses must implement [wantKeepAlive], and their [build] methods must call super.build (the return value will always return null, and should be ignored).