Flutter中PinCodeTextField无法通过控制器清除内容的问题排查

你的代码里有两个关键问题导致无法清除PIN输入框内容：

• 控制器在build方法内声明：每次调用setState()都会触发build()重新执行，这时候会创建一个新的TextEditingController实例，你调用clear()的是旧实例，新实例依然保留着之前的输入内容，所以界面上看不到变化。
• requiredPIN 设为空字符串：你的PIN验证逻辑里，requiredPIN是空值，而PIN输入框要求输入6位数字，这会导致所有输入的PIN都判定为无效，这属于业务逻辑问题，顺带提一下。

修正后的完整代码 #

class LoginPage extends State<LoginWithPin> {
  // 把控制器移到State类的成员变量位置，避免每次build重建
  TextEditingController? pinLoginController = TextEditingController();
  final String requiredPIN = "123456"; // 替换为实际需要验证的PIN
  String _title = '4.0';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "4.0",
      home: Scaffold(
        appBar: AppBar(title: Text(_title)),
        body: Center(
          child: Padding(
            padding: EdgeInsets.all(16.0), // 补上缺失的padding参数
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  'Enter Device PIN to Login',
                  style: TextStyle(fontSize: 20.0),
                ),
                SizedBox(height: 40.0),
                PinCodeTextField(
                  appContext: context,
                  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                  keyboardType: TextInputType.number,
                  autoFocus: true,
                  readOnly: false,
                  obscureText: true,
                  length: 6,
                  onChanged: (value) {
                    print("Login Pin: " + value);
                  },
                  pinTheme: PinTheme(
                    shape: PinCodeFieldShape.underline,
                    borderRadius: BorderRadius.circular(6),
                    fieldHeight: 60,
                    fieldWidth: 40,
                    inactiveColor: Colors.blueAccent,
                    activeColor: Colors.black,
                    selectedColor: Colors.purple,
                  ),
                  controller: pinLoginController,
                  onCompleted: (value) async {
                    if (value == requiredPIN) {                    
                      print('valid pin');                     
                    } else {
                      print('invalid pin' + pinLoginController!.text);
                      pinLoginController!.clear();
                      // 无需setState，控制器变化会自动通知UI更新
                    }
                  },
                ),                
              ],
            ),
          ),
        ),
      ),
    );
  }

  // 销毁State时释放控制器资源，避免内存泄漏
  @override
  void dispose() {
    pinLoginController?.dispose();
    super.dispose();
  }
}

关键修改说明 #

1. 调整控制器声明位置：将pinLoginController移到State类的成员变量区域，确保整个组件生命周期内只有一个控制器实例。
2. 补充Padding参数：原代码中Padding组件缺少padding属性，会导致编译报错，这里补上了默认的边距值。
3. 移除冗余的setState：TextEditingController的内容变化会自动触发UI更新，不需要用setState()包裹clear()操作。
4. 添加资源释放逻辑：在dispose()方法中释放控制器资源，这是Flutter避免内存泄漏的标准做法。
5. 修正验证PIN值：将requiredPIN设置为实际的6位数字，方便测试验证逻辑是否正常工作。

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