表单 TextFormField简单使用

4,816 阅读1分钟

(一)设置表单的自动验证功能 1,首先创建一个StatefulWidget,在build 方法中返回一个Form表单组件

2,创建一个GlobalKey,设置给Form的key属性

3,创建一个表单控件TextFormField,添加实现validator函数,简单实现用户是否输入文本

4,添加一个button,触发验证函数,如果用户输入了数据,显示一个SnackBar正在处理

(二)设置设置TextFormField的样式

1,TextFormFiled 有一个属性decoration,默认是 InputDecoration

2,设置InputDecoration里面的border属性,可以设置三个值,InputBorder.none没有边框,UnderlineInputBorder默认的边框样式,输入框下边有一条线,OutlineInputBorder四周都有一条线,可以设置corder,width, color等属性

(三)TextFormField自动获取焦点和手动获取焦点

1,自动获取焦点,只要设置autofocus属性为true

2,手动获取焦点,要定义一个FocusNode对象,然后赋值给TextFormField的focusNode属性

3,添加一个button,手动出发获取焦点,调用requestFocus方法

(四),监听TextFormField文字的变化

1,创建一个TextEditingController,赋值给TextFormField的controller属性

2,在initState方法中给controller添加listener

3,通过controller的text属性来获取用户输入的值

最后创建的FocusNode 和TextEditingController都要释放资源