在Flutter上更新UI的一部分

Question

要更新整个窗口小部件很容易，我们调用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函数也是如此。

我尝试将进度按钮移动到其他小部件，但仍然相同。我如何才能刷新此进度？

Answer 1

您可以使用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();
            });
         }
     )

 }

Answer 2

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

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