表单,页面中负责数据采集功能的控件。
在原生Android中EditText输入框,是重要的数据采集控件。而Flutter中TextField就是与EditText对应的重要的输入框控件,并且TextField属性和效果要比EditText强大不少。比如自带边框,输入动画等。
常用属性(具体的参考官方文档或查看源码):
child autocorrect
autofocus
enabled
inputFormatters
keyboardType text
maxLines
maxLength
maxLengthEnforced
obscureText
onChanged newValue
onSubmitted value
style
color amberAccentgreen
textAlign center
decoration
labelText
icon location_city
border
helperText
hintText
prefixIcon games
prefixText
以下为演示代码:
在main.dart中配置主题 和 根路由页面 FormPage.dart:
context
debugShowCheckedModeBanner
initialRoute
routes
context
theme primaryColor deepPurple
根路由页面(FormPage.dart)中显示垂直布局Column,在其中放置两个TextField (在demo文件夹有 TextFieldDemo.dart 和 TextFieldDemo2.dart)。
context
appBar
title
centerTitle
body
data
primaryColor white70
child
context
colorcontextprimaryColor
padding
child
mainAxisAlignment start
children
height
其中,TextFieldDemo.dart页面演示TextField的常用属性:
_TextFieldDemoState
_TextFieldDemoState
context
decoration
icon
person
size
color deepPurple
labelText
hintText
border
borderRadius
helperText
helperStyle fontSize color red
suffixText
onChanged value
onSubmitted value
onEditingComplete
在 TextFieldDemo2.dart 中使用另一种监听值输入的方式(TextEditingController),这个方式可以设定初始值:
_TextFieldDemo2State
_TextFieldDemo2State
editingController
editingControllertext
editingController
editingController
context
decoration
icon person_add border
controller editingController
演示效果:
上边的是TextFieldDemo.dart,下边的是TextFieldDemo2.dart。
Flutter中的Form组件和html中的的作用类似,都是起到了一个容器的作用。里面可以包含多个TextFormField,便于多个输入框的统一管理和操作。
以下以用户注册为场景进行演示:
1、main.dart与前文中代码一样,只是作为根路由的引入;
2、FormPage.dart与前文基本一样,只是加入了RegisterForm.dart,而注释了其他展示控件;
context
appBar
title
centerTitle
body
data
primaryColor white70
child
context
colorcontextprimaryColor
padding
child
mainAxisAlignment start
children
3、RegisterFrom.dart注册页面代码逻辑。
其中展示了:
①、Form 与 TextFormField纵向布局的用法;
②、obscureText使输入内容变为小黑点展示;
③、validator 进行输入内容验证;
④、autovalidate 进行自动验证,并扩展为 初始默认不自动验证,当提交验证不通过时,才开启自动验证功能。
_RegisterFromState
_RegisterFromState
registerKey
username password
bool autovalidate
context
key registerKey
child
children
decoration labelText helperText
onSaved value
username value
validator validatorUsername
autovalidate autovalidate
obscureText
decoration labelText helperText
onSaved value
password value
validator validatorPassword
autovalidate autovalidate
height
width infinity
child
color contextaccentColor
child
style color white
elevation
onPressed submitFrom
registerKeycurrentState
registerKeycurrentState
context
content
autovalidate
value
valueisEmpty
value
valueisEmpty
效果展示:
还没有评论,来说两句吧...