Flutter使用GetX时UI更新延迟问题咨询

你的问题核心在于：请求新训练数据的过程中，UI依然持有并显示旧的_workoutDataModel数据，直到异步请求完成才更新。加上你没有在请求开始时重置状态，导致用户会看到旧数据停留几秒。

具体问题点 #

• _workoutDataModel用late修饰，第一次赋值后始终保留旧数据，新请求完成前不会被清空
• _isWorkoutData在第一次请求后一直为true，UI不会触发加载状态，直接显示旧数据
• await前的update()完全无效，此时数据没有任何变化

修复步骤 #

1. 请求开始时重置状态：发起网络请求前，将_isWorkoutData设为false，同时清空旧的模型数据，让UI切换到加载状态
2. 移除无效的update()：删除await前无意义的状态更新调用
3. 优化模型变量类型：把_workoutDataModel改为可空类型，避免late带来的初始化隐患，同时更清晰区分数据未加载/已完成状态

修改后的代码 #

import 'dart:async';

import 'package:fit/models/workout/exercise_model.dart';
import 'package:fit/models/workout/workout_data_model.dart';
import 'package:fit/models/workout/workout_list_model.dart';
import 'package:fit/repositories/workout/workout_repository.dart';
import 'package:get/get.dart';

class WorkoutController extends GetxController {
  final WorkoutRepository workoutRepository;

  WorkoutController({required this.workoutRepository});

  // 改为可空类型，初始为null
  WorkoutDataModel? _workoutDataModel;
  WorkoutDataModel? get workoutDataModel => _workoutDataModel;

  bool _isWorkoutData = false;
  bool get isWorkoutData => _isWorkoutData;

  Future<void> getWorkoutData(String url) async {
    // 请求开始前重置状态，通知UI显示加载
    _isWorkoutData = false;
    _workoutDataModel = null;
    update();

    Response response = await workoutRepository.getWorkoutData(url);

    if (response.statusCode == 200) {
      _workoutDataModel = WorkoutDataModel.fromJson(response.body);
      _isWorkoutData = true;
      update();
    } else {
      // 处理请求失败的情况，比如维持加载失败状态
      _isWorkoutData = false;
      update();
    }
  }
}

UI层配合调整 #

在UI组件中，根据控制器状态渲染对应内容：

Obx(() {
  final controller = Get.find<WorkoutController>();
  if (!controller.isWorkoutData && controller.workoutDataModel == null) {
    // 显示加载组件
    return const Center(child: CircularProgressIndicator());
  } else if (controller.workoutDataModel != null) {
    // 显示训练数据
    return YourWorkoutContentWidget(data: controller.workoutDataModel!);
  } else {
    // 请求失败提示
    return const Center(child: Text('加载失败，请重试'));
  }
})

修改后，每次切换训练内容时，UI会立刻切换到加载状态，不会再出现旧数据停留的问题，直到新数据加载完成后才更新显示。

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