Flutter开发中_getVin.text取值为空的问题解决及代码修改方案

核心问题原因 #

• TextEditingController定义在build方法内部，每次页面触发重绘都会生成全新的控制器实例，旧输入内容会被清空，且初始化阶段控制器的text属性默认为空值
• VIN实例在build阶段就通过初始空文本完成初始化，后续用户输入内容更新后，已生成的vin实例不会自动同步最新输入值，调用vin.modelYear()自然返回错误结果
• 原代码中Scaffold同时声明了两个body属性，属于语法错误，会导致组件无法正常渲染

调整步骤 #

1. 将当前页面改为StatefulWidget，把TextEditingController设为State类的成员变量，在initState生命周期中初始化，dispose生命周期中销毁避免内存泄漏
2. 删除build方法中提前初始化vin的代码，改到点击按钮的回调中，用控制器当前最新的输入文本生成VIN实例再执行后续逻辑
3. 修正Scaffold的布局结构，把输入框和点击卡片放在Column组件中统一作为body的子组件

修改后完整代码 #

class VinInputPage extends StatefulWidget {
  const VinInputPage({super.key});

  @override
  State<VinInputPage> createState() => _VinInputPageState();
}

class _VinInputPageState extends State<VinInputPage> {
  // 控制器作为State类成员变量，避免build重绘时被重置
  late TextEditingController _getVin;

  @override
  void initState() {
    super.initState();
    _getVin = TextEditingController();
  }

  @override
  void dispose() {
    // 页面销毁时回收控制器，防止内存泄漏
    _getVin.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: const EdgeInsets.only(top: 16.0),
            child: TextField(
              controller: _getVin,
              decoration: InputDecoration(
                border: const OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(5.0)),
                    borderSide: BorderSide(color: Colors.black)
                ),
                labelText: "Enter VIN",
                labelStyle: const TextStyle(
                    fontSize: 15,
                    color: Colors.black
                ),
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              print(_getVin.text);
              // 点击时再用最新输入值生成VIN实例
              var vin = VIN(number: _getVin.text, extended: true);
              print(vin.modelYear());
            },
            child: const Card(
              child: Text("Press Here"),
            ),
          )
        ],
      ),
    );
  }
}

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