如何监听 FutureBuilder 小部件内的状态变化并反映状态变化？

Posted 2023-02-23

【中文标题】如何监听 FutureBuilder 小部件内的状态变化并反映状态变化？

【英文标题】：How to listen for state changes inside a FutureBuilder widget and reflect the state change?

【发布时间】：2022-01-19 12:00:00

【问题描述】：

为了演示这个问题，让我为FutureBuilder写一些代码。

FutureBuilder(future: _myFuture, builder: (context, snapshot) 
    if(snapshot.hasData) 

        // !!!! IMPORTANT !!!
        // Pay attention to the _isFirstText variable below  

        return SizedBox(
                 child: _isFirstText ? Text(snapshot.data.firstText) : Text(snapshot.data.secondText),
               );  
    
 
    if(snapshot.connectionState == ConnectionState.isWaiting) 
        return Text('Waiting!');
    
 
    return Text('Error');
),  

正如我在上面代码的注释中提到的，注意_isFirstText 变量。假设这是一个状态变量。 在future builder内部，如何获取isFirstText状态变量变化对应的正确返回值。

我也遇到了this stack overflow post，但无法让代码工作。 我还遇到了一个名为 StatefulBuilder 的小部件，但我不知道应该在我的 FutureBuilder 的哪个位置使用它。

有人可以帮忙吗？

【问题讨论】：

这能回答你的问题吗？ Flutter StreamBuilder vs FutureBuilder

@staticVoidMan 感谢您的回复。根据答案，流保持与服务器的持续连接并根据服务器的更改更新 UI 对吗？但我不想从服务器端监听变化。我想监听局部状态变量的变化。你知道怎么做吗？谢谢！

【参考方案1】：

如果您想监听正在进行的更改，您可以使用 Streambuilder。流不仅用于服务器端更改，还可以在本地使用。

你可以像这样自己构建一个流：

StreamController myStreamController = StreamController<int>();

要通过这个控制器发送一个新事件，你可以这样做

myStreamController.sink.add(newValue);

然后您可以像这样收听变化：

  @override
  Widget build(BuildContext context) 
    return StreamBuilder<int>(
        stream: myStreamController.stream,
        builder: (context, snapshot) 
          final value = snapshot.data;

          return Text(value!.toString());
  

如果您想了解更多信息，请观看此视频：https://youtu.be/nQBpOIHE4eE

如果这有帮助，请告诉我。

【参考方案2】：

您可以使用 ValueNotifier 变量并使用 notifyListeners() 来更新代码的特定部分，如下所示：

ValueListenableBuilder 并使用该 ValueNotifier 变量并监听它。