Flutter GetX Obs 数据未在第一个构建中显示

Question

为什么我的 UI 小部件在第一次构建后不显示数据。但是当导航到其他屏幕并返回 HomeScrren 时，小部件将显示数据（顶部的用户小部件）？有什么我错过的吗？

我的应用程序 演示视频

这是主屏幕代码：

class HomeScreen extends GetView<HomeController> {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    HomeController controller = Get.put(HomeController());
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(left: 16, right: 16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                const SizedBox(height: 24),
                Obx(() {
                  return SimpleUserProfile(
                      profileImageUrl: 'https://picsum.photos/200',
                      profileUsername:
                      controller.studentData.value.name ?? 'studentName',
                      profileUserID:
                      controller.studentData.value.studentId ?? 'studentId');
                }),
              ],
            ),
          ),
        ),
      ),
    );
  }

这是我制作的主屏幕控制器：

class HomeController extends GetxController {
  late final HomeService _homeService;
  late final AuthController _authController;
  late final StudentMapper _mapper = StudentMapper();

  late Rx<StudentEntity> studentData = StudentEntity().obs;

  @override
  Future<void> onInit() async {
    super.onInit();
    _homeService = Get.put(HomeService());
    _authController = Get.find();
    await getStudent();
  }

  Future<void> getStudent() async {
    var token = _authController.getToken();
    var studentId = _authController.getStudentIdFromBox();

    final response = await _homeService.fetchStudent(
        _authController.getToken(), _authController.getStudentIdFromBox());

    if (response != null) {
      studentData = _mapper.toStudent(response).obs;
      studentData.refresh();
    } else {
      Get.defaultDialog(
          middleText: 'User not found!',
          textConfirm: 'OK',
          onConfirm: () {
            refresh();
            Get.back();
          });
    }

    if (kDebugMode) {
      print(response);
      print(token);
      print(studentId);
      print(studentData.value.studentId);
    }
  }

  @override
  void refresh() {
    studentData.refresh();
  }
}

我尝试使用 Obx，但没有任何改变。是不是我忘记添加代码了？

谢谢你

Answer 1

我注意到的是

studentData

，因为它是一个可观察变量，所以你需要像这样使用它：

studentData.value = _mapper.toStudent(response);

通过使用

studentData.value

分配数据，当数据发生变化时会触发UI更新。