Flutter开发之——表单组件(1)

• Form的child通常为多组件容器，比如Column，Row

2.2 FormField

• FormField是一个表单控件，此控件包含表单的状态，方便更新UI

• 通常情况下，我们不会直接使用FormField，而是使用TextFormField

2.3 TextFormField

• TextFormField继承自FormField，是一个输入框表单

• TextFormField用于接收输入信息，比如：用户名，密码

三 表单组件基本用法

---

3.1 基本用法代码

Form(child: Column(

children: [

Text(“用户名：”),

TextFormField(),

Text(“密码：”),

TextFormField(),

RaisedButton(onPressed: (){},child: Text(“登录”),)

],

),)

3.2 效果图

[外链图片转存中…(img-blExBVhD-1719089029588)]

四 表单属性用法

---

4.1 表单属性代码

//变量定义

var userNameController = new TextEditingController();

var passWordController = new TextEditingController();

var _userNameFieldValue = ‘’;

var _passWordFieldValue = ‘’;

var _name = ‘’;

var _pwd = ‘’;

final _formKey = GlobalKey();

//body部分

body: Form(

key: _formKey,

onWillPop: () async {

return await showDialog(

context: context,

builder: (BuildContext context) {

return AlertDialog(

title: Text(‘提示’),

content: Text(‘确认退出吗？’),

actions: [

FlatButton(

child: Text(‘取消’),

onPressed: () {

Navigator.of(context).pop(false);

},

),

FlatButton(

child: Text(‘确认’),

onPressed: () {

Navigator.of(context).pop(true);

},

),

],

);

});

},

//autovalidateMode:AutovalidateMode.disabled ,

child: Column(

children: [

Text(

“用户名”,

style: TextStyle(

color: Colors.black,

fontSize: 16,

fontWeight: FontWeight.bold),

),

TextFormField(

controller: userNameController,

decoration: InputDecoration(

icon: Icon(Icons.person),

suffixIcon: Icon(Icons.delete),

labelText: “请输入用户名”,

counterText: “${_userNameFieldValue.length}/32”),

autovalidateMode: AutovalidateMode.disabled,

validator: (userName) {

if (userName.length < 3) {

return “用户名过短”;

}

return null;

},

onChanged: (value) {

setState(() {

_userNameFieldValue = value;

});

},

onSaved: (value) {

_name = value;

},

keyboardType: TextInputType.number,

textCapitalization: TextCapitalization.words,

textInputAction: TextInputAction.search,

),

Text(“密码”,

style: TextStyle(

color: Colors.black,

fontSize: 16,

fontWeight: FontWeight.bold)),

TextFormField(

controller: passWordController,

decoration: InputDecoration(

icon: Icon(Icons.lock),

suffixIcon: Icon(Icons.delete),

labelText: “请输入密码”,

counterText: “${_passWordFieldValue.length}/32”,

),

autovalidateMode: AutovalidateMode.disabled,

obscureText: true,

validator: (passWord) {

if (passWord.length < 3) {

return “密码过短”;

}

return null;

},

onChanged: (value) {

setState(() {

_passWordFieldValue = value;

});

},

onSaved: (value) {

_pwd = value;

},

),

RaisedButton(

onPressed: () {

var _state = _formKey.currentState;

if (_state.validate()) {

_state.save();

login(_name, _pwd);

}

//login(_userNameFieldValue, _passWordFieldValue);

},

child: Text(“登录”),

)

],

),

onChanged: () {

//print(“用户名：${userNameController.text}”);

//print(“密码：${passWordController.text}”);

},

));

//login方法

void login(String name, String pwd)

{

prin​
t(“用户名：$name,密码：$_pwd”);

userNameController.clear();

passWordController.clear();

}

4.2 效果图

[外链图片转存中…(img-th4S0CSa-1719089029589)]

4.3 Form属性

| 属性 | 说明 | 取值 |

| :-: | :-: | :-: |

| key | 整个应用程序中唯一的密钥 | Key对象 |

| onWillPop | 返回按钮拦截后的小控件的方法 | WillPopCallback对象 |

| autovalidateMode | 输入框变化校验 | bool对象 |

| onChanged | 输入框发生变化时的回调函数 | Function对象 |

4.4 TextFormField

| 属性 | 说明 | 取值 |

| :-: | :-: | :-: |

| initialValue | 初始值 | String对象 |

| keyboardType① | 键盘类型 | TextInputType对象 |

| textCapitalization② | 文本的断行方式 | TextCapitalization枚举值 |

| textInputAction③ | 键盘输入按钮的类型 | TextInputAction枚举值 |

| decoration④ | 输入框试图 | InputDecoration对象 |

| style | 文本风格 | TextStyle对象 |

| textDirection | 文本方向 | TextDirection枚举值 |

| textAlign | 文本对齐方式 | TextAlign枚举值 |

| obscureText | 文本显示是否加密 | bool对象 |

| autocorrect | 是否开启自动更正 | bool对象 |

| autovalidate | 是否自动有效性检查 | bool对象 |

| maxLines | 最大行数 | int对象 |

| onEditingComplete | 编辑完成时的回调 | Function |

| onFieldSubmitted | 表单提交时的回调 | Function |

| onSaved | 表单保存时的回调 | Function |

| validator | 有效性校验函数 | Function |

| enabled | 输入框是否可用 | bool对象 |

keyboardType①

| 名称 | 说明 |

| :-: | :-: |

| datetime | 日期时间类型 |

| emailAddress | Email地址类型 |

| multiline | 多行文本类型 |

| number | 数字键盘类型 |

| phone | 电话类型 |

| text | 文本类型 |

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取
me | 日期时间类型 |

| emailAddress | Email地址类型 |

| multiline | 多行文本类型 |

| number | 数字键盘类型 |

| phone | 电话类型 |

| text | 文本类型 |

最后

小编这些年深知大多数初中级Android工程师，想要提升自己，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此我收集整理了一份《2024年Android移动开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

[外链图片转存中…(img-E1R2Oq6O-1719089029590)]一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人

都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

资料⬅专栏获取