通过这个界面熟悉熟悉 dart 语言, flutter 界面布局方式
文章主要列出比较关键的点
- Row: 横向排列组件
- TextField: 文本框
- GestureDetector: 为文本添加事件
- Text: 文本
- FlatButton: 按钮
以上都可以通过 google: Flutter + 组件名 查询到对应的文档
dart 通过 main.dart 中的 runApp() 函数来指定程序入口, 在入口类里通过设置 home 属性确定入口页面.
当页面指定为其他 dart 文件中的类时, 需要在 main 中 import 该 dart 文件.
- 设置一个 key: final _key = TextEditingController();
- 在 TextField 中添加属性: controller: _key,
- 在别的组件的事件中使用: _key.text
由于 dart 并没有给 Text 直接添加点击事件的属性, 因此需要借助 GestureDetector, 在 GestureDetector 中嵌套 Text, 同时为 GestureDector 添加点击事件.
这里直接通过 [获取 TextField 的值](#获取 TextField 的值) 判断值是否为空: _key.text.isEmpty
errorText: 使 TextField 显示错误提示文字( 默认为红色, 位于输入框下方 ). 当使用该属性时, labelText 也会变色( 跟随默认色 ). errorText 设置值为 null 时不起作用.
-
设置 flag: _isPhoneEmpty = false;
-
设置 errorText: errorText: _isPhoneEmpty? "手机号为空" : null,
-
为登录按钮添加事件:
onTap:(){ setState((){ _keyPhone.text.isEmpty? _isPhoneEmpty = true : _isPhoneEmpty = false; }) }
根据提示( 鼠标移过去 )说明, 该函数可以向框架声明某一对象的属性已被修改, 从而使该属性做出相应动作. 具体等看文档
-
设置 FocusNode _passwordFocusNode = FocusNode();
-
为密码设置 focusNode: focus Node: _passwordFocusNode
-
为 phone 设置完成事件:
onEditingComplete: (){ FocusScope.of(context).requestFocus(_passwordFocusNode); },
-
为 phone 设置回车按钮样式: textInputAction: TextInputAction.next ( 这一步只是为了好看 )
这样当输完号码后, 点击回车就自动跳转到密码输入框了.
密码输入框用类似的方法实现, 回车 -> 登录.
根据提示说明, FocusNode 是焦点树的叶, 可以获取到焦点( 英文原文: A leaf node in the focus tree that can receive focus. ).
失去焦点: FocusScope.of(context).requestFocus(FocusNode()); 在点击登录时调用, 会使当前在操作的输入框失去焦点.
-
定义一个 bool 参数: bool passwordVisible = false;
-
密码 TextField 中添加属性:
suffixIcon: IconButton( icon: Icon( passwordVisible ? Icons.visibility : Icons.visibility_off, color: passwordVisible ? Colors.blue : Colors.grey, ), onPressed: (){ setState(() { passwordVisible = !passwordVisible; }); }, ),
在点击登录后应该会有一个转圈圈等待界面的, 增强交互感.
-
设置 flag: bool _showLoading = false;
-
用一个 List 来存放主界面( 手机号, 密码输入框, 忘记密码, 登录按钮 ), 和根据 flag 来决定是否加入 loading 界面.
详见: login_page.dart: _logInWindow().
-
点击登录后判断是否符合登录条件, 是的话就通过 setState() 设置 _showLoading = true;
登录的时候一方面向服务器发起请求, 另一方面维持 loading 状态, 等待服务器响应.
详见 login_page.dart: _logInProcess()
- 添加背景
- 添加方框并美化