Flutter中的状态更新

peo*_*mes 7 state flutter

我是Flutter的新手,在了解状态如何运作时遇到了问题。
我在应用程序中将一个页面设置为StatefulWidget,然后在该页面的状态内,一个主要组件是一个单独的StatefulWidget。

内部小部件显示一个问题,并允许用户输入答案。

然后,我想做的是在同一页面上显示下一个答案。

输入答案后,我的内部小部件回调将返回页面状态。

我试图用另一个副本替换内部小部件,但是状态未重置。那是一个新的状态不会被创建,并且initState()不会再被调用。

我是否应该使用特定的调用或方法来实现这一目标?

编辑:例如,如果我有以下内容

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
  void initState(){
     changeContent();
  }

  Widget innerWidget;
  void changeContent(){
     setState((){
        innerWidget = new CustomStatefullWidget();
     }
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            innerWidget
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

CustomStatefullWidget是我作为页面的独立交互部分创建的类。对于此示例,实际内容无关紧要。

我期望的是,无论何时changeContent()调用,innerWidget都会具有新状态,但事实并非如此。其状态已经存储在树中,并且在创建窗口小部件的新实例时不会刷新状态。
如何强制抖动清除树的该部分或识别出我想要重置状态?

Rém*_*let 11

那是预期的行为。当父代重建颤动时,将新的小部件树与旧的小部件树进行比较。

通过这种方式,flutter能够知道“更新”了哪些小部件以及添加/删除了哪些小部件。

对于添加的小部件,它将创建一个新状态。initState叫做。对于更新的小部件; flutter将重用旧的窗口小部件,并didUpdateWidget通过将旧的“小部件”部分作为参数传递作为调用。至于删除的小部件,它将调用dispose

对于您的情况,您希望initState可以再次调用它。但实际上它已“更新”。


从这一点出发,您有两种解决方案来重置状态:

实施didUpdateWidget。这将重置您的状态或做您想做的其他事情。这是您应该考虑的最佳方法。由于您不一定要重设“新的statefulwidget”的子级。

还有一个“惰性”解决方案,可以告诉flutter“嘿,这是一个不同的小部件。不要重用旧的小部件”。可以使用实现Key

有关按键用法的更多信息,请点击此处

就像将changeContent方法更改为以下那样简单:

Widget innerWidget;
void changeContent(){
  setState((){
      innerWidget = new CustomStatefullWidget(key: new UniqueKey());
  }
}
Run Code Online (Sandbox Code Playgroud)