flutter的AutomaticKeepAliveClientMixin在navigator.push后不保持页面状态

问题描述

正在测试AutomaticKeepAliveClientMixin并遇到问题，在navigator.push后页面失去状态有人知道这个问题吗?任何解决方法?为任何信息而高兴，欢呼

was testing AutomaticKeepAliveClientMixin and run into an issue,page loses state after navigator.pushanyone knows this issue? any workarounds? be glad for any info, cheers

我的目标是保持页面状态

my goal is to keep the page state

重现步骤:打开应用程序，单击PageOne的按钮，然后向左和向右滑动，页面将丢失状态图片

steps to reproduce: open app click PageOne's push button then go back swipe right and left and the page loses stateimage

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

推荐答案

来自 AutomaticKeepAliveClientMixin :

///子类必须实现[wantKeepAlive]及其[build] 方法必须调用super.build(返回值将始终返回 null，应忽略).

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

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

So in your code, before you return the ListView just call super.build:

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

这篇关于flutter的AutomaticKeepAliveClientMixin在navigator.push后不保持页面状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！