在 Flutter PageView 中切换页面时丢失小部件状态

Question

我在由 PageController 管理的 PageView 中有一系列有状态的小部件。我正在使用pageController.jumpToPage(index) 切换页面。切换页面时，小部件中的所有状态似乎都丢失了，就好像它是从头开始重新创建的。我曾尝试在 PageController 中使用keepPage: true，但这似乎没有任何效果。这是 PageView 的预期行为还是我做错了什么？任何建议表示赞赏，谢谢！

Answer 1

与 AutomaticKeepAliveClientMixin 一起使用到您的子页面。

然后@override bool get wantKeepAlive => true; 这是一个示例

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 4,
      child: new Scaffold(
        appBar: new AppBar(
          bottom: new TabBar(
            tabs: [
              new Tab(icon: new Icon(Icons.directions_car)),
              new Tab(icon: new Icon(Icons.directions_transit)),
              new Tab(icon: new Icon(Icons.directions_bike)),
              new Tab(
                icon: new Icon(Icons.airplanemode_active),
              )
            ],
          ),
        ),
        body: new TabBarView(children: [
          new OnePage(color: Colors.black,),
          new OnePage(color: Colors.green,),
          new OnePage(color: Colors.red,),
          new OnePage(color: Colors.blue,),
        ]),
      ),
    );
  }
}

class OnePage extends StatefulWidget {
  final Color color;

  const OnePage({Key key, this.color}) : super(key: key);

  @override
  _OnePageState createState() => new _OnePageState();
}

class _OnePageState extends State<OnePage> with AutomaticKeepAliveClientMixin<OnePage> {
  @override
  Widget build(BuildContext context) {
    super.build(context);
    return new SizedBox.expand(
      child: new ListView.builder(
        itemCount: 100,
        itemBuilder: (context, index) {
          return new Padding(
            padding: const EdgeInsets.all(10.0),
            child: new Text(
              '$index',
              style: new TextStyle(color: widget.color),
            ),
          );
        },
      ),
    );
  }

  @override
  bool get wantKeepAlive => true;
}

Answer 2

keepPage: true 是默认行为；这意味着如果PageController 被销毁并重新创建，它将记住它所在的页面。这不是你想要的。

相反，将特定于页面的PageStorageKey 传递给页面的构造函数。这有助于 Flutter 为您的页面提供一个独特的存储桶。然后在您想要恢复到以前状态的State 中，您可以使用PageStorage.of(context) 获取存储桶，您可以将initState 和write 值中的read 值更改为它们更改时的值.您可以在ExpansionTile 中查看示例。

Answer 3

编写自定义小部件：

import 'package:flutter/material.dart';

class KeepAlivePage extends StatefulWidget {
  KeepAlivePage({
    Key key,
    @required this.child,
  }) : super(key: key);

  final Widget child;

  @override
  _KeepAlivePageState createState() => _KeepAlivePageState();
}

class _KeepAlivePageState extends State<KeepAlivePage>
    with AutomaticKeepAliveClientMixin {
  @override
  Widget build(BuildContext context) {
    /// Dont't forget this
    super.build(context);

    return widget.child;
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
}

并在浏览量中使用：

import 'package:flutter/material.dart';
import 'keep_alive_page.dart';
class PageViewDemo extends StatefulWidget {
  const PageViewDemo({Key key}) : super(key: key);

  @override
  _PageViewDemoState createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<PageViewDemo> {
  @override
  Widget build(BuildContext context) {
    return PageView(
      children: [
        KeepAlivePage(child:Page1()),
        KeepAlivePage(child: Page2()),
        KeepAlivePage(child:Page3()),
      ],
    );
  }
}