Question

当另一个有状态小部件中的值更改时，如何更新UI？

我创建了一个有状态的类（Test2），该类构建了一个小部件。然后在主类中，有一个Test2小部件列表。最后，我要遍历列表并呈现Test2小部件。

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

我该怎么做？

FILE：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(() {
    });
  }

Answer 1

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

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

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;
  }

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

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

1 个答案: