Flutter的AutomaticKeepAliveClientMixin在navigator.push后无法保持页面状态

Question

我正在测试 AutomaticKeepAliveClientMixin，并遇到了一个问题，导航器跳转后页面状态丢失。有人知道这个问题吗？或者有什么解决方法吗？欢迎任何信息，谢谢。

我的目标是保持页面状态。

重现步骤：打开应用程序，点击 PageOne 的按钮，然后返回，向右滑动和向左滑动，页面就会丢失状态。 图片

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        initialIndex: 0,
        length: 2,
        child: Scaffold(
          body: TabBarView(
            children: <Widget>[Page1(), Page2()],
          ),
          bottomNavigationBar: Material(
            child: TabBar(
              labelColor: Colors.black,
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.check),
                ),
                Tab(
                  icon: Icon(Icons.check),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

class Page1 extends StatefulWidget {
  @override
  Page1State createState() {
    return new Page1State();
  }
}

class Page1State extends State<Page1> with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: <Widget>[
        Container(
          height: 300,
          color: Colors.orange,
        ),
        Container(
          height: 300,
          color: Colors.pink,
        ),
        Container(
          height: 300,
          color: Colors.yellow,
          child: Center(
            child: Container(height: 26,
              child: MaterialButton(
                  color: Colors.blue,
                  child:
                      Text('clicking this and back then swipe => page loses state'),
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(builder: (context) => PushedPage()),
                    );
                  }),
            ),
          ),
        ),
      ],
    );
  }
  
  @override
  bool get wantKeepAlive => true;
}

class Page2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(height: 300, color: Colors.orange);
  }
}

class PushedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        color: Colors.blue,
      ),
    );
  }
}

- NuoYi

---

为什么你说它失去了状态？ - diegoveloper

https://dev59.com/JrDla4cB1Zd3GeqP6leo#53702330 - anmol.majhail

是的 - 在 return ListView( children: <Widget>[ 之前添加 - super.Build(context); - anmol.majhail

确实有效！@anmol.majhail 点赞！ - NuoYi

added it as answer - anmol.majhail

Answer 1

根据AutomaticKeepAliveClientMixin文档：

为 [AutomaticKeepAlive] 的客户端提供方便方法的混合。与 [State] 子类一起使用。

子类必须实现 [wantKeepAlive]，并且它们的 [build] 方法必须调用 super.build（返回值始终为 null，并且应该被忽略）。

因此在您的代码中，在返回 ListView 之前只需调用 super.build:

  Widget build(BuildContext context) {
    super.build(context);
    return ListView(...
  }

- anmol.majhail