Flutter+GetX注册功能报错：GetX使用不当问题求助

错误原因 #

你在RegisterPage中用Obx包裹了整个ListView，但对应的RegisterPageController里没有定义任何可观察(Rx)变量。Obx的核心作用是监听Rx变量的变化来触发UI更新，当它找不到需要监听的Rx变量时，就会抛出这个"使用不当"的错误。当前你的输入框使用普通TextEditingController，本身就能和输入框联动更新，完全不需要用Obx包裹整个列表。

修改方案 #

1. 移除不必要的Obx包裹 #

直接把RegisterPage中的Obx(() => ListView(...))替换为普通的ListView，修改后的代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'controller.dart';

class RegisterPage extends StatelessWidget {
  final controller = Get.put(RegisterPageController());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Register Page"),
      ),
      body: ListView(
        padding: const EdgeInsets.all(20),
        children: [
          TextFormField(
            controller: controller.cUsername,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Masukkan Username anda",
              labelText: "Username",
            ),
          ),
          const SizedBox(height: 20),
          TextFormField(
            controller: controller.cPass,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Masukkan Password",
              labelText: "Password",
            ),
          ),
          const SizedBox(height: 20),
          TextFormField(
            controller: controller.cFullname,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Masukkan Nama Lengkap anda",
              labelText: "Nama Lengkap",
            ),
          ),
          const SizedBox(height: 20),
          TextFormField(
            controller: controller.cEmail,
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              hintText: "Masukkan Email anda",
              labelText: "Email",
            ),
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              controller.registerUser();
            },
            child: const Text("Register"),
          ),
        ],
      ),
    );
  }
}

2. 按需添加Rx变量（可选） #

如果之后需要实现注册加载状态、表单验证提示等需要UI响应的功能，再在Controller中添加Rx变量，并仅用Obx包裹需要更新的部件。例如：

修改Controller添加加载状态：

import 'package:get/get.dart';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class RegisterPageController extends GetxController {
  TextEditingController? cUsername;
  TextEditingController? cPass;
  TextEditingController? cFullname;
  TextEditingController? cEmail;
  final isLoading = false.obs; // 添加可观察的加载状态

  @override
  void onInit() {
    super.onInit();
    cUsername = TextEditingController();
    cPass = TextEditingController();
    cFullname = TextEditingController();
    cEmail = TextEditingController();
  }

  registerUser() async {
    isLoading.value = true; // 开始加载
    final baseUrl = 'https://mediadwi.com/api/latihan/register-user';
    try {
      final response = await http.post(Uri.parse(baseUrl), body: {
        'username': cUsername?.text,
        'password': cPass?.text,
        'full_name': cFullname?.text,
        'email': cEmail?.text
      });
      if (response.statusCode == 200) {
        Get.to(() => LoginPage());
        Get.snackbar("Selamat", "Pembuatan akun anda Sukses");
      } else {
        Get.snackbar('Maaf', 'Akun anda gagal dibuat');
      }
    } catch (e) {
      print(e);
      Get.snackbar('Error', 'Terjadi kesalahan saat koneksi');
    } finally {
      isLoading.value = false; // 结束加载
    }
  }

  @override
  void onClose() {
    cUsername?.dispose();
    cPass?.dispose();
    cFullname?.dispose();
    cEmail?.dispose();
    super.onClose();
  }
}

在RegisterPage中用Obx包裹按钮：

// 替换原来的ElevatedButton
Obx(() => ElevatedButton(
  onPressed: controller.isLoading.value ? null : () {
    controller.registerUser();
  },
  child: controller.isLoading.value 
      ? const CircularProgressIndicator(color: Colors.white) 
      : const Text("Register"),
)),

这样既符合GetX的使用规范，又能实现需要的UI更新效果。

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