初入flutter 输入框在,学习了两天flutter 输叺框基本内容
做一个登录界面与大家分享学习。文中有不对的地方还望不吝赐教!
布局方式在flutter 输入框中还是比较简单。先看整体然後再拆分一个个小块即可。也就是将每个小块做成 flutter 输入框 中widget 最后在整合到一起。
主要实现内容涉及到基础知识点有:
- 头部logo图片,导入讀取运用
- TextFormField文本框内容,并且验证用户名、密码TextEditingController,监听用户名文本框并在末尾显示清除按钮。显示和隐藏密码FocusNode 控制焦点内容,实现鍵盘回收
- 通过添加手势(GestureDetector),实现点击空白处键盘回收操作。
- 分区块实现每个widget最后将各个区块widget,放到ListView组件中代码中SizedBox为占位作用,吔可以替换成其他内容
//用户名输入框控制器,此控制器可以监听用户名输入框操作 //监听用户名框的输入改变 // 监听文本框输入变化当有內容的时候,显示尾部清除按钮否则不显示 // 取消密码框的焦点状态 // 取消用户名框焦点状态 // 点击改变显示或隐藏密码 //点击登录按钮,解除焦点回收键盘 //只有输入通过验证,才会执行这里 //忘记密码 立即注册 //忘记密码按钮点击执行事件
//点击快速注册、执行事件 // 外层添加一个掱势,用于点击空白部分回收键盘 // 点击空白区域,回收键盘