flutter hook 中 useState 刷新丢失信息

不清楚为什么, 当使用 flutter_hooks: ^0.18.2+1

class App extends HookWidget {
    const LoginPage({Key? key}) : super(key: key);

      @override
      Widget build(BuildContext context) {
        final TextEditingController _phone = TextEditingController();
        final ValueNotifier<bool> _phoneCorrect = useState(false);    
    
        // 判断手机号是否满足 +86
        _phone.addListener(() {
              RegExp exp = RegExp(
        r'^((13[0-9])|(14[0-9])|(15[0-9])|(16[0-9])|(17[0-9])|(18[0-9])|(19[0-9]))\d{8}$',
      );
              _phoneCorrect.value = exp.hasMatch(_phone.text);
        });

        Widget _userCard()
        {
            return Column(
                children: [
                     Row(
                      children: [
                        const Text('+86'),
                        const SizedBox(width: 5),
                        Text(
                          '|',
                          style: TextStyle(
                            color: Colors.grey.shade600,
                          ),
                        ),
                        const SizedBox(width: 5),
                        Expanded(
                          child: TextField(
                            controller: _phone,
                            decoration: const InputDecoration(
                              hintText: '请输入手机号',
                              border: InputBorder.none,
                            ),
                          ),
                        ),
                      ],
                    ),
                    ElevatedButton(
                        onPressed: _phoneCorrect.value ? submit : null,
                        child: const Text('发送验证码'),
                        style: ButtonStyle(
                          backgroundColor: MaterialStateProperty.all(
                            Colors.blue.shade400,
                          ),
                          shape: MaterialStateProperty.all(
                            const StadiumBorder(),
                          ),
                          minimumSize: MaterialStateProperty.all(
                            const Size(
                              double.infinity,
                              40,
                            ),
                          ),
                       )
                ]
            );
        }
    
        return Scaffold(
              body: _userCard(),
        )
    }
}

最小化还原了一下, 大致就是 默认下 发送验证码按钮是disable的, 当用户输入手机号后, 满足正则规则, 将 _phoneCorrect 设置为 true 允许发送验证码. 但是 实际下 手机号输入 满足后, 输入框内手机号 会 ( 消失? )

我觉得 可能是我对hook的使用存在问题, 求指点

阅读 1.1k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题