当此属性更改时，如何动态响应文本小部件以显示对象的属性？而这与GetX

问题描述

我试图了解当在TextFormField中更改值时，如何在Flutter应用程序中使用GetX包在Text小部件中获得响应式更新。 “文本”小部件中显示的是可观察对象的属性。而且是从TextFormField更新的属性。 该值已在控制器中正确更新，但未在窗口小部件中正确更新。 如果我直接使用字符串变量，它会正确更新。但是，一旦我使用一个对象，它就不再更新。

这是我的应用程序的一个非常简单的示例，只是为了确保了解基础知识。

这是我的代码：

class User {
  String name = "";
}

class TestController extends GetxController {
  TestController();

  final user = User().obs;
}

class MyHomePage extends StatelessWidget {
  final c = Get.put(TestController());
  final String title;
  MyHomePage({this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),),body: Center(
        child: Container(
          width: Get.width * 0.8,height: Get.height * 0.8,child: Column(
            children: [
              Obx(() => Text(c.user.value.name)),TextFormField(
                onChanged: (value) => c.user.value.name = value,],);
  }
}

非常感谢您的帮助！

解决方法

好吧，感谢CodeX youtuber，我找到了解决方案。

要在更改对象的属性值时能够以反应方式更新UI，即使将该对象设置为可观察的，您也需要使该属性也可观察。

因此正确的代码应如下所示

class User {
  final name = "".obs;
}

class TestController extends GetxController {
  TestController();

  final user = User().obs;
}

class MyHomePage extends StatelessWidget {
  final c = Get.put(TestController());
  final String title;
  MyHomePage({this.title});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),),body: Center(
        child: Container(
          width: Get.width * 0.8,height: Get.height * 0.8,child: Column(
            children: [
              Obx(() => Text(c.user.value.name.value)),TextFormField(
                onChanged: (value) => c.user.value.name.value = value,],);
  }
}

,

将您的onChanged() fn更新为此

Obx(() => Text(c.user.value.name)),TextFormField(onChanged: (value) {
  c.user.value.name = value;
  c.user.refresh();
}),