Flutter：如何从另一个有状态类更新 UI 有状态小部件答案

【问题标题】：Flutter:How to update a UI -stateful widget from another stateful classFlutter：如何从另一个有状态类更新 UI 有状态小部件
【发布时间】：2020-08-27 12:45:11
【问题描述】：

当另一个有状态小部件中的值发生变化时，如何更新我的 UI？

我创建了一个有状态的类 (Test2)，它构建了一个小部件。然后在我的主课中，我有一个 Test2 小部件列表。最后，我正在遍历列表并呈现 Test2 小部件。

但是，我想更新 Test2 小部件之一中的值，然后相应地更新主 UI。

我该怎么做？

文件：test2.dart

class Test2 extends StatefulWidget {
   Test2({this.responseId, this.message});
  final String responseId;
  final String message;
  bool strike =false;

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

class _Test2State extends State<Test2> {
  @override
  Widget build(BuildContext context) {
   return Container(
      child: Text(
              widget.responseId + widget.message,
              style: (widget.strike)?TextStyle(decoration: TextDecoration.none):TextStyle(decoration: TextDecoration.underline)
            ),
    );
  }
}

文件：home.dart

主类

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

    class _MyHomePageState extends State<MyHomePage> {
      List<Test2> _counter =List();
      int cnt =0;
      @override
      void initState() { 
        super.initState();
        _counter.add(Test2(message: "message",responseId:"1"));
        _counter.add(Test2(message: "message",responseId:"2"));
        _counter.add(Test2(message: "message",responseId:"3"));
       
      }

在我的构建方法中

for(int i=0;i<_counter.length;i++)...[
           _counter[i]
            ],

按钮点击

void _incrementCounter() {
    for(int i=0;i<_counter.length;i++){
      if(_counter[i].responseId =="1"){
        _counter[i].strike =true;
      }
    }
     setState(() {
    });
  }

【问题讨论】：

标签： flutter

【解决方案1】：

您可以使用ValueNotifier 来重建监听器。

在Text2 类中声明一个ValueNotifier<bool> 并对其进行初始化。

ValueNotifier<bool> strikeNotifier = ValueNotifier(false);

然后使用ValueListenableBuilder 包装您要在strike 的值发生变化时重建的小部件。

ValueListenableBuilder(valueListenable: strikeNotifier, builder: (_, result, widget) => Text(...),)

并创建一个更新strike值的方法，也用于比较新旧值，并根据比较结果更新ValueNotifier的值。

void updateStrike(bool value){
    var result = (strike == value);
    strike = value;
    strikeNotifier.value = result;
  }

因此您可以在_incrementCounter() 中将strike 的值更新为updateStrike()，以通知Text2 小部件进行重建。

【讨论】：