如何将FutureOr<Duration?>与Flutter的FutureBuilder配合使用？

FutureOr的工作原理 #

FutureOr<T>是Dart提供的联合类型，它表示一个值要么是T类型的直接实例，要么是一个最终会返回T的Future。但它并不是自动等同于Future<T>——类型系统会严格区分两者，因为FutureBuilder的future参数明确要求接收Future<T>?类型，而FutureOr<T>包含了非Future的T值情况，所以直接传递会触发类型不匹配错误。

适配FutureBuilder的解决方法 #

核心思路是把FutureOr<Duration?>统一转换成Future<Duration?>，Dart的Future.value()方法刚好能完成这个转换：它接受FutureOr<T>类型的参数，内部会自动处理两种情况：

• 如果传入的是Future，直接返回该Future；
• 如果传入的是T类型的直接值，会创建一个立即完成的Future并返回这个值。

具体实现代码 #

首先处理变量转换：

// 将FutureOr<Duration?>转换为标准Future<Duration?>
final Future<Duration?> targetFuture = Future.value(durationFuture);

然后在FutureBuilder中使用转换后的变量：

FutureBuilder<Duration?>(
  future: targetFuture,
  builder: (BuildContext context, AsyncSnapshot<Duration?> snapshot) {
    // 根据快照状态渲染组件
    if (snapshot.connectionState == ConnectionState.done) {
      if (snapshot.hasData) {
        return Text('当前时长：${snapshot.data?.inSeconds}秒');
      } else if (snapshot.hasError) {
        return Text('加载失败：${snapshot.error}');
      } else {
        return Text('无时长数据');
      }
    } else {
      return CircularProgressIndicator();
    }
  },
)

通用工具函数（可选） #

如果需要在多个地方复用这个转换逻辑，可以封装一个通用函数：

Future<T> toFuture<T>(FutureOr<T> value) => Future.value(value);

使用时直接调用toFuture(durationFuture)即可。

内容的提问来源于stack exchange，提问作者Gwhyyy