如何在UI中监听异步函数内变量的变化？

核心思路 #

要实现每个异步子任务完成后实时更新UI，需要借助Flutter的状态管理机制——通过更新状态变量并触发UI重建，让Text组件同步显示最新状态。以下是具体实现方案：

1. 基础方案（StatefulWidget + setState） #

这是最直接的实现方式，适合简单场景：

步骤1：定义状态变量

在State类中声明用于显示的状态字符串：

String _taskStatus = '准备开始任务...';

步骤2：修改异步函数，分步更新状态

每次异步任务完成后，通过setState()更新状态变量，触发UI自动刷新：

Future<Either<void, Failure>> getFunctions() async {
  try {
    setState(() => _taskStatus = '正在执行functionOne...');
    await functionOne();
    setState(() => _taskStatus = 'functionOne执行完成');

    setState(() => _taskStatus = '正在执行functionTwo...');
    await functionTwo();
    setState(() => _taskStatus = 'functionTwo执行完成');
  
    setState(() => _taskStatus = '正在执行functionThree...');
    await functionThree();
    setState(() => _taskStatus = '所有任务执行完成');

    return const Right(null); // 返回成功结果
  } catch (e, s) {
    setState(() => _taskStatus = '执行出错：${e.toString()}');
    return Left(Failure(e.toString(), stackTrace: s)); // 返回错误信息
  }
}

步骤3：UI绑定状态变量

直接将Text组件与状态变量关联：

Text(_taskStatus, style: const TextStyle(fontSize: 18)),

完整示例代码

import 'package:flutter/material.dart';

// 模拟你的Failure错误类
class Failure {
  final String message;
  final StackTrace? stackTrace;

  Failure(this.message, {this.stackTrace});
}

// 模拟异步API调用函数
Future<void> functionOne() async => await Future.delayed(const Duration(seconds: 2));
Future<void> functionTwo() async => await Future.delayed(const Duration(seconds: 2));
Future<void> functionThree() async => await Future.delayed(const Duration(seconds: 2));

class TaskMonitorPage extends StatefulWidget {
  const TaskMonitorPage({super.key});

  @override
  State<TaskMonitorPage> createState() => _TaskMonitorPageState();
}

class _TaskMonitorPageState extends State<TaskMonitorPage> {
  String _taskStatus = '准备开始任务...';

  Future<Either<void, Failure>> getFunctions() async {
    try {
      setState(() => _taskStatus = '正在执行functionOne...');
      await functionOne();
      setState(() => _taskStatus = 'functionOne执行完成');

      setState(() => _taskStatus = '正在执行functionTwo...');
      await functionTwo();
      setState(() => _taskStatus = 'functionTwo执行完成');
    
      setState(() => _taskStatus = '正在执行functionThree...');
      await functionThree();
      setState(() => _taskStatus = '所有任务执行完成');

      return const Right(null);
    } catch (e, s) {
      setState(() => _taskStatus = '执行出错：${e.toString()}');
      return Left(Failure(e.toString(), stackTrace: s));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('任务状态监控')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(_taskStatus),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: getFunctions,
              child: const Text('开始执行任务'),
            ),
          ],
        ),
      ),
    );
  }
}

2. 进阶方案：使用状态管理库（以Riverpod为例） #

如果项目规模较大，推荐用Riverpod等状态管理库替代StatefulWidget，实现状态与UI解耦：

步骤1：定义状态Provider

import 'package:flutter_riverpod/flutter_riverpod.dart';

final taskStatusProvider = StateProvider<String>((ref) => '准备开始任务...');

步骤2：修改异步函数更新状态

Future<Either<void, Failure>> getFunctions(WidgetRef ref) async {
  try {
    ref.read(taskStatusProvider.notifier).state = '正在执行functionOne...';
    await functionOne();
    ref.read(taskStatusProvider.notifier).state = 'functionOne执行完成';

    ref.read(taskStatusProvider.notifier).state = '正在执行functionTwo...';
    await functionTwo();
    ref.read(taskStatusProvider.notifier).state = 'functionTwo执行完成';
  
    ref.read(taskStatusProvider.notifier).state = '正在执行functionThree...';
    await functionThree();
    ref.read(taskStatusProvider.notifier).state = '所有任务执行完成';

    return const Right(null);
  } catch (e, s) {
    ref.read(taskStatusProvider.notifier).state = '执行出错：${e.toString()}';
    return Left(Failure(e.toString(), stackTrace: s));
  }
}

步骤3：UI监听状态变化

Consumer(
  builder: (context, ref, child) {
    final status = ref.watch(taskStatusProvider);
    return Text(status);
  },
)

内容的提问来源于stack exchange，提问作者Daniel Roldán