Flutter用GetX实现ListView.Builder刷新：异步请求列表标题不更新问题

• 为什么修改了局部变量，UI完全不更新？
  这是Flutter的基本运行机制决定的：build方法本身是无状态的，每次执行时，方法内部定义的普通局部变量都是临时生成的运行时值。等异步请求完成修改这些变量时，没有任何绑定关系通知框架重绘对应组件，自然看不到UI变化。
  你当前的写法还有额外的坑：把异步请求直接写在itemBuilder内部，会导致每次列表重建（比如滚动、父级Obx触发更新）时，都会重新把_loading设为true、_title重置为loading，哪怕之前已经拿到了正确的标题，也会被覆盖回初始值。
• 之前用FutureBuilder的局限也很明确：它只能监听单次Future的执行结果，对后续的todo列表变动、详情手动刷新等场景完全不响应，和GetX的响应式体系无法打通。

核心思路是把列表项的状态从Widget层上移到GetX Controller中，用响应式结构存储每个todoId对应的详情，UI层只做绑定渲染，不直接管异步请求和临时状态。

第一步：在Controller中维护响应式的详情状态 #

先在你的toDoController中新增存储逻辑，不要把请求结果直接丢在Widget的临时变量里：

// 定义todo详情的状态结构，承载加载状态、标题、错误信息
class TodoDetailState {
  final bool isLoading;
  final String title;
  final String? error;

  TodoDetailState({
    required this.isLoading,
    this.title = 'loading',
    this.error,
  });

  // 用于快速生成更新后的状态实例
  TodoDetailState copyWith({
    bool? isLoading,
    String? title,
    String? error,
  }) {
    return TodoDetailState(
      isLoading: isLoading ?? this.isLoading,
      title: title ?? this.title,
      error: error ?? this.error,
    );
  }
}

// 在Controller中新增响应式Map，key为todoId，value为对应的详情状态
final RxMap<String, TodoDetailState> todoDetailMap = <String, TodoDetailState>{}.obs;

// 改造原有的请求方法，直接更新响应式状态，不依赖返回值驱动UI
Future<void> fetchTodoDetail(String todoId) async {
  // 判重：已经加载完成/正在加载的请求不重复发起
  if (todoDetailMap[todoId] != null && !todoDetailMap[todoId]!.isLoading) return;
  
  // 先将当前todoId的状态设为加载中
  todoDetailMap[todoId] = TodoDetailState(isLoading: true);
  try {
    final title = await getTodoInfo(todoId); // 原有的数据库/接口请求逻辑
    // 请求成功后更新对应状态，自动触发绑定的UI重建
    todoDetailMap[todoId] = TodoDetailState(
      isLoading: false,
      title: title,
    );
  } catch (e) {
    // 存储请求失败的状态，方便UI层展示错误
    todoDetailMap[todoId] = TodoDetailState(
      isLoading: false,
      error: e.toString(),
    );
  }
}

第二步：改造ListView的渲染逻辑 #

把异步请求的触发从itemBuilder的同步执行流程中挪到帧回调里，每个列表项单独绑定响应式状态，避免整个列表重建：

Obx(() {
  // 响应式监听todo列表的变化，列表更新时自动重建列表
  final List<String> todoList = toDoController.toDo;

  return ListView.builder(
    shrinkWrap: true,
    scrollDirection: Axis.horizontal,
    itemCount: todoList.length,
    itemBuilder: (context, index) {
      final todoId = todoList[index];
      // 列表项首次渲染完成后触发对应请求，不阻塞build流程
      WidgetsBinding.instance.addPostFrameCallback((_) {
        toDoController.fetchTodoDetail(todoId);
      });

      // 每个列表项单独包一层Obx，只监听当前todoId的状态变化，不会触发整个列表重建
      return Obx(() {
        // 取当前todoId对应的状态，未初始化时默认展示加载中
        final detailState = toDoController.todoDetailMap[todoId] 
            ?? TodoDetailState(isLoading: true);

        return Container(
          height: 150,
          width: 150,
          alignment: Alignment.center,
          child: detailState.isLoading
              ? const Text('loading')
              : detailState.error != null
                  ? Text('加载失败：${detailState.error}')
                  : Text(detailState.title),
        );
      });
    },
  );
})

方案的实际优势 #

• 状态和UI解耦：所有详情状态存在Controller层，不会因为Widget销毁、列表滚动重建丢失，也不会因为build流程反复执行被重置
• 性能更优：每个列表项单独绑定响应式状态，只有对应项的详情更新时才会重建这一个Container，不会触发整个ListView的重绘
• 请求防重：对已经加载过的todoId直接跳过请求，避免重复发起网络调用
• 完全适配GetX响应式体系：后续如果todo列表变动、或者需要手动刷新某条todo的详情，只要修改Controller中对应的响应式值，UI就会自动更新，不需要依赖FutureBuilder的单次回调

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