在 Flutter 上更新部分 UI答案

【问题标题】：Update a part of the UI on Flutter在 Flutter 上更新部分 UI
【发布时间】：2020-04-01 04:25:00
【问题描述】：

要更新整个小部件很容易，我们调用SetState() 并进行更改，但是如果我不需要更新所有内容会怎样？

我有这个用户界面：

当我加载该页面时，我会从我的应用程序提供商那里获得我的元素数组：

Widget build(BuildContext context) {
   var elements = shuffle(Provider.of<GameSettings>(context).set.elements);

（取自这个答案：List.shuffle() in Dart?）

我需要context 来获取我保存的元素列表，这就是我把它放在那里的原因。

我还有进度条需要刷新：

void _startTimer() {
    var sub = countDownTimer.listen(null);
    sub.onData((duration) {
      setState(() {
        _current = _start + duration.elapsed.inSeconds;
      });
    });

    sub.onDone(() {
      sub.cancel();
    });
  }
}

但是当我刷新它时，我也在刷新我的元素。发生这种情况是因为正在调用整个小部件以及我的 shuffle 函数。

我尝试将进度按钮移动到不同的小部件，但还是一样。我怎么能刷新这个进度？

【问题讨论】：

标签： flutter

【解决方案1】：

您可以为此使用 StreamController 和 StreamBuilder 小部件

https://api.flutter.dev/flutter/widgets/StreamBuilder-class.html

【讨论】：

但我已经有了元素列表，这是本地的。我没有任何未来或流。我只需要改变的是顺序和元素

【解决方案2】：

你可以使用 StatefulBuilder()

您的代码将是：

void _startTimer() {
    StatefulBuilder(
        builder: (BuildContext context, setState){
           var sub = countDownTimer.listen(null);
           sub.onData((duration) {
              setState(() {
                   _current = _start + duration.elapsed.inSeconds;
                });
            });

            sub.onDone(() {
             sub.cancel();
            });
         }
     )

 }

【讨论】：

我不明白。为什么我需要返回一个小部件？我只需要用_current 值修改状态？对不起，如果我的问题听起来很傻，我对 Flutter 不是很熟悉
你可以修改_current的值，没有setState()很好，但是你页面的Ui不知道current被改变了..解决你可以使用StatefulWidget并刷新所有页面，但如果您只想刷新页面的一部分，则可以在“StatelessWidget 类”中使用“StatefulBuilder()”。在您的情况下，您可以只放置您想要在_current 更改时刷新它的小部件..
知道了。谢谢！
我错了吗？ StatefulBuilder(builder: (BuildContext context, setState) { int counter = 0; return Column( children: [ RaisedButton( onPressed: () { setState(() { counter++; print(counter); }); }, child : Text("递增计数器"),), Text("计数器为" + counter.toString()), ], ); }),
在这种情况下counter 总是而且，Text() 只显示0