时间戳

首页 > 解决方案 > Flutter：如何从另一个有状态类更新 UI 有状态小部件

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

问题描述

当另一个有状态小部件中的值更改时，如何更新我的 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

解决方案

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

ValueNotifier<bool>在类中声明 aText2并初始化它。

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

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

推荐阅读