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

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,我如何保留计数器小部件的状态?

推荐答案

正如Joshua所说,小部件暂时从树中移除时失go 状态的原因是,它失go 了元素/状态.

现在你可能会问:

我能否缓存元素/状态,以便下次插入小部件时,它可以重用前一个元素/状态,而不是重新创建它们?

这是一个合理的 idea ,但不是.你不能这么做. Ffltter将其判断为反模式,并将在该情况下抛出异常.

相反,您应该做的是将小部件保持在小部件树中,处于禁用状态.

要实现这一点,您可以使用如下小部件:

  • IndexedStack
  • 能见度/stage外

这些小部件将允许您将小部件保留在小部件树中(以便保持其状态),但禁用其呈现/动画/语义.

因此,与其执行以下操作,不如执行以下操作:

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

这将使Foo/Bar在它们之间切换时失go 其状态

执行以下操作:

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

使用这个代码,当Foo/Bar在它们之间来回移动时,它们的状态就会松动.

Dart相关问答推荐

我们应该将多少代码放入构造函数中?

将数据库提供程序导入另一个文件提供程序 dart

Dart,后面带感叹号的标识符

在 Dart 中处理字节数组时,使用 Uint8List 优于 List 有什么优势?

在 Dart/Flutter 中创建 DateTime 对象时如何指定 TimeZone?

如何在flutter中使用rootBundle加载图片?

Bad state:在Flutter中从 addStream 添加项目时,您无法关闭主题

StreamBuilder 会在无状态小部件中自动关闭流吗?

如何使用Flutter在按钮网格中滑动(swipe)/拖动(drag) 2 个或更多按钮

什么是NoSuchMethod错误,如何修复?

访问用户环境变量

用百分比将小部件放置在堆栈中

如何在 Flutter 中匹配密码和确认密码?

在 Dart 中切换失败

错误:default constructor is already defined

如何在dart列表中找到一个元素

从 Dart 调用 javascript

方法级联如何在 dart 中准确工作?

如何在 Dart 中将日期/时间字符串转换为 DateTime 对象?

如何在 Dart 中执行运行时类型判断?