Flutter自定义可复用TextField的onChange事件失效求助

问题核心原因 #

1. 回调类型不匹配：自定义组件中onChanged被定义为无参的Function()?，但原生TextField的onChanged是接收String输入值的回调，类型不兼容导致无法传递输入内容。
2. 回调未调用：在TextField的onChanged逻辑里，仅引用了onChanged变量，没有实际调用这个回调方法。
3. 错误传递回调：使用组件时直接执行validateAmount()，导致回调在组件初始化时就被触发，而非输入变化时执行。

修复方案 #

1. 修改自定义组件的回调定义与调用 #

调整onChanged的参数类型，并正确传递回调：

class NumberOnlyTextField extends StatelessWidget{
  // 显式指定controller类型，避免动态类型隐患
  final TextEditingController controller;
  final String hintText;
  final bool obscureText;
  final bool enableTxtField;
  // 改为接收String参数的回调类型
  final Function(String)? onChanged;

  const NumberOnlyTextField({
    super.key,
    required this.controller,
    required this.hintText,
    required this.obscureText,
    required this.enableTxtField,
    // 非必填可去掉required，按需调整
    this.onChanged,
  });

  @override 
  Widget build(BuildContext context){
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 15.0),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          border: Border.all(color: const Color.fromARGB(255, 213, 211, 211)),
          borderRadius: BorderRadius.circular(4),
        ),
        child: Padding(
          padding: const EdgeInsets.only(left: 10.0, right: 10.0),
          child: TextField(
            controller: controller,
            // 直接传递匹配类型的回调，或显式调用
            onChanged: onChanged,
            // 也可写成：onChanged: (value) => onChanged?.call(value),
            obscureText: obscureText,
            enabled: enableTxtField,
            keyboardType: TextInputType.number,
            inputFormatters: [
              FilteringTextInputFormatter.allow(
                RegExp('[0-9]+.?[0-9]*'),
              ),
            ],
            decoration: InputDecoration(
              border: InputBorder.none,
              hintText: hintText,
              hintStyle: TextStyle(color: Colors.grey[500]),
            ),
          ),
        ),
      ),
    );
  }
}

2. 修正组件调用时的回调传递 #

传递方法引用而非直接执行方法：

//Amount
NumberOnlyTextField(
  controller: amountXController,
  onChanged: validateAmount, // 去掉括号，传递方法引用
  hintText: 'Amount',
  obscureText: false,
  enableTxtField: true,
),
const SizedBox(height: 10),

3. 确保验证方法参数匹配 #

validateAmount方法需接收String类型参数：

void validateAmount(String value) {
  // 编写你的验证逻辑，例如：
  if (value.isEmpty) {
    // 处理空输入
  } else if (double.tryParse(value) == null) {
    // 处理非法数字格式
  } else {
    // 处理有效输入
  }
}

内容的提问来源于stack exchange，提问作者Cliff Odebala Clarke