Flutter TextField无法正常输入删除字符且按钮状态控制失效如何解决

你的输入异常和状态不同步问题源于两个错误写法：

• 直接在TextField的controller参数内新建TextEditingController实例，每次setState触发组件重绘时都会生成新的控制器，无法正确维持输入内容、光标位置，所以才会出现输入删除异常的问题
• 按钮的启用逻辑和变量命名存在反向问题，容易出现逻辑错误

按以下步骤调整即可同时保证输入正常和按钮状态同步：

1. 将TextEditingController改为当前State类的成员变量，初始化时绑定默认手机号前缀，不要在build方法内重复创建
2. onChanged回调内不需要手动给控制器赋值，仅需要根据输入内容长度更新按钮状态变量即可
3. 组件销毁时记得释放控制器，避免内存泄漏

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MobileNumberState();
}

class _MobileNumberState extends State<MyApp> {
  // 按钮是否可用，true为可用，false为不可用
  var _isBtnEnable = false;
  // 把控制器改成成员变量，初始化时绑定默认前缀
  late final TextEditingController _phoneController = TextEditingController(text: '+996');
  final String wayMainLogo = 'assets/images/test.svg';

  // 组件销毁时释放控制器
  @override
  void dispose() {
    _phoneController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                    margin: const EdgeInsets.fromLTRB(47.0, 50, 47, 0),
                    child: TextField(
                      onChanged: (textInField) {
                        // 直接根据输入长度更新按钮状态即可
                        setState(() {
                          _isBtnEnable = textInField.length == 13;
                        });
                      },
                      // 引用成员变量的控制器，不要每次新建
                      controller: _phoneController,
                      inputFormatters: [
                        LengthLimitingTextInputFormatter(13),
                      ],
                      keyboardType: TextInputType.number,
                      maxLength: 13,
                      decoration: const InputDecoration(
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                          ),
                          labelText: '+996 XXX YYY YYY',
                          labelStyle: TextStyle(
                            color: Colors.grey,
                          )),
                    ))),
          ],
        ),
        Row(
          children: [
            Expanded(
                flex: 1,
                child: Container(
                    margin: const EdgeInsets.fromLTRB(47.0, 50, 47, 0),
                    child: ElevatedButton(
                      // 按钮可用状态直接和变量绑定
                      onPressed: _isBtnEnable ? () {
                        // 你的按钮点击逻辑
                      } : null,
                      child: const Text('Далее'),
                    ))),
          ],
        ),
      ],
    );
  }
}

如果需要获取当前输入的手机号，直接读取_phoneController.text即可，不需要单独维护_phone变量。

内容的提问来源于stack exchange，提问作者Andrey Nebogin