flutter - 在 Flutter 中临时从树中移除时保留小部件状态

Question

我正在尝试保留小部件的状态，以便如果我暂时从小部件树中删除有状态小部件，然后稍后重新添加它，小部件将具有与删除之前相同的状态。这是我的一个简化示例:

import 'package:flutter/material.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool showCounterWidget = true;
  @override
  Widget build(BuildContext context) {

    return Material(
      child: Center(
        // Center is a layout widget. It takes a single child and positions it
        // in the middle of the parent.
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            showCounterWidget ? CounterButton(): Text("Other widget"),
            SizedBox(height: 16,),
            FlatButton(
              child: Text("Toggle Widget"),
              onPressed: (){
                setState(() {
                showCounterWidget = !showCounterWidget;
              });
                },
            )
          ],
        ),
      ),
    );
  }
}

class CounterButton extends StatefulWidget {
  @override
  _CounterButtonState createState() => _CounterButtonState();
}

class _CounterButtonState extends State<CounterButton> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      color: Colors.orangeAccent,
      child: Text(counter.toString()),
      onPressed: () {
        setState(() {
          counter++;
        });
      },
    );
  }
}

理想情况下，我不希望状态重置，因此计数器不会重置为 0，我将如何保留计数器小部件的状态？

Answer 1

正如 Joshua 所说，小部件暂时从树中移除时失去其状态的原因是因为它失去了它的元素/状态。

现在你可能会问:

Can't I cache the Element/State so that next time the widget is inserted, it reuse the previous one instead of creating them anew?

这是一个有效的想法，但不是。你不能。
Flutter 将其判断为反模式，并会在这种情况下抛出异常。

您应该做的是将小部件保持在小部件树中，处于禁用状态。

为了实现这样的事情，你可以使用小部件，如:

索引堆栈

能见度/后台

这些小部件将允许您将小部件保留在小部件树中(以保持其状态)，但禁用其渲染/动画/语义。

因此，而不是:

Widget build(context) {
  if (condition)
    return Foo();
  else
    return Bar();
}

这将使 Foo/ Bar在它们之间切换时松开它们的状态

做:

IndexedStack(
  index: condition ? 0 : 1, // switch between Foo and Bar based on condition
  children: [
    Foo(),
    Bar(),
  ],
)

使用此代码，然后 Foo/ Bar将 不是 在他们之间来回走动时松开他们的状态。