flutter - 如何在操作后处理/重新创建小部件

Question

我正在试图弄清楚如何根据一个操作(例如:onPressed)销毁/重新创建 Widget。

我想到的方法是让我的 Widget 在一个 Opacity 对象中敲击，并根据我的某处的用户交互控制 Opacity 对象的状态应用程序(即:隐藏/显示小部件而不是 dispose/recreate )。但是，我在这里要问的是，单击按钮后如何销毁/重新创建小部件？

我创建了以下虚拟示例来说明我的意思。

当我按下云 Icon 时，红色的 Icon 应该被释放，并在我按下 RaisedButton 时重新创建。

Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Destroy/Recreate Example"),
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Stack(fit: StackFit.passthrough,
                    children: <Widget>[
                      new IconButton(icon: new Icon(
                        Icons.cloud_circle, size: 40.0, color: Colors.blue,),
                          onPressed: null /*_destroyWidget*/),
                      new Positioned(child: new DecoratedBox(
                        decoration: new BoxDecoration(shape: BoxShape.circle),
                        child: new Icon(
                          Icons.add_circle, size: 20.0, color: Colors.red,),),
                          top: 3.0,
                          left: 3.0)
                    ],
                  ),
                  new RaisedButton(onPressed: null /*_recreateWidget*/,
                    child: new Text("Recreate!"),
                  ),
                ])
        )
    );
  }

如何开始这个想法？

更新

以下代码实现了相同的功能，但通过操作红色 Icon 的 Opacity(显示/隐藏)。

var _myOpacity = 0.0;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Destroy/Recreate Example"),
        ),
        body: new Center(
            child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  new Stack(fit: StackFit.passthrough,
                    children: <Widget>[
                      new IconButton(icon: new Icon(
                        Icons.cloud_circle, size: 40.0, color: Colors.blue,),
                          onPressed: ()=>setState((){
                        _myOpacity =0.0;
                          }) /*_destroyWidget*/),
                      new Positioned(child: new Opacity(
                        opacity: _myOpacity,
                          child:
                      new DecoratedBox(
                        decoration: new BoxDecoration(shape: BoxShape.circle),
                        child: new Icon(
                          Icons.add_circle, size: 20.0, color: Colors.red,),),),
                          top: 3.0,
                          left: 3.0)
                    ],
                  ),
                  new RaisedButton(onPressed: ()=>
                    setState((){
                    _myOpacity = 1.0;

        })
                   /*_recreateWidget*/,
                    child: new Text("Recreate!"),
                  ),
                ])
        )
    );
  }

Answer 1

您必须将红色图标包裹在 StatefulWidget 中如果您想在初始化和处置时收到通知。一个 StatelessWidget没有这些回调。

您可以替换 StatefulWidget setState 中为 null及其State将被处置。您可以在一秒钟内将其设置为正常 setState回调，以及一个新的 State将被创建，它的 initState将被调用。

如果你想dispose和 initState无需通过将小部件替换为 null 的中间步骤，尝试给你的StatefulWidget一个新的UniqueKey当按下重新创建按钮时。这将阻止 Flutter 关联旧的 State使用新的 StatefulWidget .

看起来您这样做主要是出于好奇，而不是真正的用例。您描述的购物卡示例可能不需要使用 initState和 dispose完全没有，你应该只使用 StatelessWidget .