TextField输入框内容神奇的被清空了？-- 解密原因

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第14天，点击查看活动详情

紧接上文，我原本以为这样应该就可以了。

通过图我们也可以发现，其实控制密码框文本的显隐，我们已经是做到了，只不过是每次切换后输入框的内容会被清除掉而已。

解密--出现bug的原因

• 首先我们来看一下文档对状态组件的介绍:

一个 StatefulWidget 类会对应一个 State 类，State表示与其对应的 StatefulWidget 要维护的状态，State 中的保存的状态信息可以：

1. 在 widget 构建时可以被同步读取。
2. 在 widget 生命周期中可以被改变，当State被改变时，可以手动调用其setState()方法通知Flutter 框架状态发生改变，Flutter 框架在收到消息后，会重新调用其build方法重新构建 widget 树，从而达到更新UI的目的。

状态组件，当状态数据改变后，会重新调用build方法重新构建widget树,这就是导致出现这个bug的问题所在。

虽然我是通过Getx控制了一个变量来更改obscureText属性的值，但是我忘记了一点,没有在更新obscureText值时，把输入框已输入的内容也同步更新过去，这就导致了obscureText值是更新了，所以Flutter会重新构建widget树，但是Exinput组件初始化的文本内容val值是空的，所以每当切换显隐时，输入框内容就会被清空。

知道问题所在后就好办了，在上述伪代码内加工以下代码就可以了。

// 使用Getx来管理的登录页的数据
class LoginData extends GetxController {
...
  var inputVal = ''.obs;
  //更新输入框的内容
  updateVal(val) {
    inputVal.value = val;
  }
...  
}
//实例化
final LoginData ld = Get.put(LoginData());
  
class Login extends StatefulWidget {
  const Login({Key? key}) : super(key: key);

  @override
  State<Login> createState() => _LoginState();
}

class _LoginState extends State<Login> {
  @override
  Widget build(BuildContext context) {
    return Obx(() => ExInput(
      ...
      onChanged: (val) => ld.updateProperty('code', val),
      ...
    ));  
}

加了上述两处代码即可，重新运行，效果如下，已经解决了该bug。

总结

没有奇怪的bug，只有拉跨的自己。 对于Flutter还是不够熟悉，还得继续在项目内学习，继续踩坑，从不懂不会不熟练到熟悉、了解还是需要一段时间的。