如何在Flutter中通过GetxController实时更新年龄与体重值

要让CustomBox实时更新GetxController中的age和weight值，核心是利用GetX的响应式特性（Rx变量），并将组件与控制器状态正确绑定。以下是分步修复方案：

1. 确保控制器变量为响应式类型 #

首先，你的GetxController中必须将age和weight声明为Rx类型，只有Rx变量才能触发GetX的自动UI更新：

import 'package:get/get.dart';

class CalculatorController extends GetxController {
  // 年龄用RxInt，体重用RxDouble
  final RxInt age = 0.obs;
  final RxDouble weight = 0.0.obs;
}

2. 修改CustomBox组件，绑定响应式变量 #

调整CustomBox，让它接收对应的Rx变量作为参数，并通过Obx监听变量变化，实现双向数据同步：

import 'package:calculator_app/util/constants.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:google_fonts/google_fonts.dart';

// 泛型适配不同数值类型（int/weight）
class CustomBox<T extends num> extends StatelessWidget {
  final String parameterName;
  final Rx<T> parameterValue; // 接收控制器的Rx变量

  CustomBox({
    super.key,
    required this.parameterName,
    required this.parameterValue,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      width: Get.width * 0.45,
      height: Get.height * 0.1,
      decoration: BoxDecoration(
        color: sheetBgColor,
        borderRadius: BorderRadius.circular(10),
      ),
      child: Column(
        children: [
          Text(
            parameterName,
            style: GoogleFonts.ubuntu(
              fontSize: 15,
              color: white,
              fontWeight: FontWeight.w700,
            ),
          ),
          // Obx监听Rx变量变化，实时更新TextField内容
          Obx(() => TextField(
                style: GoogleFonts.ubuntu(color: white),
                // 根据类型适配键盘
                keyboardType: T == int 
                    ? TextInputType.number 
                    : TextInputType.numberWithOptions(decimal: true),
                decoration: InputDecoration(
                  enabledBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: white),
                  ),
                  focusedBorder: const OutlineInputBorder(
                    borderSide: BorderSide(color: white),
                  ),
                  hintText: 'Enter $parameterName',
                  hintStyle: GoogleFonts.ubuntu(color: white),
                ),
                // 初始化显示当前变量值
                controller: TextEditingController(text: parameterValue.value.toString())
                  ..selection = TextSelection.fromPosition(
                    TextPosition(offset: parameterValue.value.toString().length),
                  ),
                onChanged: (value) {
                  // 解析输入并更新Rx变量
                  try {
                    if (T == int) {
                      parameterValue.value = int.parse(value) as T;
                    } else if (T == double) {
                      parameterValue.value = double.parse(value) as T;
                    }
                  } catch (e) {
                    // 处理空输入或非数字输入
                    if (value.isEmpty) {
                      parameterValue.value = (T == int ? 0 : 0.0) as T;
                    }
                  }
                },
              )),
        ],
      ),
    );
  }
}

3. 在页面中使用CustomBox #

在需要使用的页面，初始化控制器并传递对应的Rx变量：

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

class CalculatorPage extends StatelessWidget {
  // 初始化控制器
  final CalculatorController controller = Get.put(CalculatorController());

  CalculatorPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          children: [
            // 传递年龄的Rx变量
            CustomBox<int>(
              parameterName: 'Age',
              parameterValue: controller.age,
            ),
            const SizedBox(width: 10),
            // 传递体重的Rx变量
            CustomBox<double>(
              parameterName: 'Weight',
              parameterValue: controller.weight,
            ),
          ],
        ),
      ),
    );
  }
}

关键注意事项 #

• 必须使用Rx类型变量：只有.obs包装的变量才能触发GetX的响应式更新，普通变量无法同步UI。
• 用Obx包裹需要更新的UI组件：Obx会监听内部Rx变量的变化，自动重建对应UI。
• 双向绑定逻辑：onChanged中更新Rx变量，Obx监听变量刷新TextField内容，形成完整的双向同步。

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