- decoration:文本框的装饰,属性也很多,可以指定前置图标,边框类型、后置组件等多种属性,因此可以通过 decoration 获得想要的文本框样式。
- focusNode:聚焦点,可以通过这个来控制文本框是否获取焦点,从而实现类似上一个下一个的输入控制。
- onChanged:输入值改变事件回调,通常用这个方法实现双向绑定。
在这个案例中,我们使用了一个前置图标用来表示输入内容的类型,比如使用手机图标代表输入手机号,使用锁代表代表密码。同时使用了一个 Offstage作为后置的组件,用于在输入内容后可以点击清除内容。Offstage 组件是通过一个属性offstage来控制组件是否显示,这样我们可以在没有内容的时候隐藏它,有输入内容的时候再显示。
为了提高代码复用性,使用了一个方法获取通用的文本框,这里主要是使用了 Container包裹以控制边距和文本框下的分隔线:
Widget _getInputTextField(
TextInputType keyboardType, {
FocusNode focusNode,
controller: TextEditingController,
onChanged: Function,
InputDecoration decoration,
bool obscureText = false,
height = 50.0,
}) {
return Container(
height: height,
margin: EdgeInsets.all(10.0),
child: Column(
children: [
TextField(
keyboardType: keyboardType,
focusNode: focusNode,
obscureText: obscureText,
controller: controller,
decoration: decoration,
onChanged: onChanged,
),
Divider(
height: 1.0,
color: Colors.grey[400],
),
],
),
);
}
完整代码
class _LoginPageState extends State {
//TextEditingController可以使用 text 属性指定初始值