Flutter 的 AutomaticKeepAliveClientMixin 在 navigator.push 之后不保持页面状态答案

【问题标题】：flutter's AutomaticKeepAliveClientMixin doesn't keep the page state after navigator.pushFlutter 的 AutomaticKeepAliveClientMixin 在 navigator.push 之后不保持页面状态
【发布时间】：2018-12-20 13:36:11
【问题描述】：

正在测试 AutomaticKeepAliveClientMixin 并遇到问题， navigator.push 后页面丢失状态有人知道这个问题吗？任何解决方法？很高兴有任何信息，干杯

我的目标是保持页面状态

重现步骤：打开应用点击PageOne的按钮然后返回左右滑动页面会丢失状态 image

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,
      ),
    );
  }
}

【问题讨论】：

为什么说它失去了状态？
因为在push、back、swipe之后listview位置被重置到了开头
stackoverflow.com/a/53702330/10269042
是 - 在 return ListView( children: <Widget>[ 之前添加 - super.Build(context);
确实有效@anmol.majhail 竖起大拇指！

标签： flutter dart

【解决方案1】：

来自AutomaticKeepAliveClientMixin上的文档：

为客户提供便利方法的 mixin [自动保活]。与 [State] 子类一起使用。

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

所以在您的代码中，在返回 ListView 之前，只需调用 super.build：

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

【讨论】：

哦，伙计，调用 super.build(context) 确实做得很好。谢谢+1。