Flutter——最详细(TextField)使用教程

04-10 2006阅读

TextField简介

文本输入框,拥有复杂的属性。可指定控制器、文字样式、装饰线、行数限制、游标样式等。监听输入框变动事件。

使用场景:

搜索框,输入账号密码等

属性作用
controller输入框监听器
decoration输入框装饰属性
textAlign内容对齐方式
textAlignVertical文本垂直对齐
textDirection文字方向
maxLength输入最大长度
cursorColor光标颜色
cursorHeight光标高度
cursorWidth光标宽度
showCursor是否显示光标
onEditingComplete编辑完成
onChanged文本改变时响应
onSubmitted点击确实时响应

InputDecoration属性

属性作用
icon边框左边的图标
iconColor左边图标的颜色
label标签Text()
labelText标签文本内容
labelStyle标签文本样式
helperText左侧底部文本内容
helperStyle左侧底部文本样式
helperMaxLines左侧底部文本最大行数
hintText提示文本内容
hintStyle使用TextStyle修改样式
hintTextDirection提示文本的方向
hintMaxLines提示文本内容最大行数
errorText输入异常提示文本
errorStyle输入异常提示文本样式
errorMaxLines输入异常提示文本最大行数
contentPadding输入内容的内边距
prefixIcon内部左侧图标
prefixIconConstraints内部左侧图标约束大小
prefix内部左侧文本
prefixText内部左侧文本
prefixStyle内部左侧文本样式
prefixIconColor内部左侧图标颜色
suffixIcon内部右侧图标
suffix内部右侧文本
suffixText内部右侧文本
suffixStyle内部右侧文本样式
suffixIconColor内部右侧图标颜色
suffixIconConstraints内部右侧图标约束大小
counter右侧底部文本内容
counterText右侧底部文本内容
counterStyle右侧底部文本内容
enabledBorder禁用之后显示边线
border边线相关
enabled是否禁用

label 属性效果图

Flutter——最详细(TextField)使用教程

icon 属性效果图

常用于左侧图标展示

Flutter——最详细(TextField)使用教程

border 属性效果图

输入框边框

Flutter——最详细(TextField)使用教程

hintText 属性效果图

未点击时文案提示

Flutter——最详细(TextField)使用教程

counter 属性效果图

Flutter——最详细(TextField)使用教程

helperText 属性效果图

Flutter——最详细(TextField)使用教程

prefixIcon 属性效果图

Flutter——最详细(TextField)使用教程

suffixIcon 属性效果图

Flutter——最详细(TextField)使用教程

整合部分属性代码块与效果图

TextField(
                controller: _controller,
                style: const TextStyle(color: Colors.blue),
                decoration: const InputDecoration(
                  label: Text("标签label"),
                  icon: Icon(Icons.favorite),
                  iconColor: Colors.black,
                  border: OutlineInputBorder(),
                  hintText: "提示文本hintText",
                  hintStyle: TextStyle(color: Colors.grey, fontSize: 15),
                  contentPadding: EdgeInsets.all(2),
                  counter: Text("提示文本counter"),
                  helperText: "帮助文本helperText",
                  prefixIcon: Icon(Icons.arrow_left),
                  suffixIcon: Icon(Icons.arrow_right),
                  suffix: Text('suffix'),
                ),
                onEditingComplete: () {
                  print('onEditingComplete');
                },
                onChanged: (v) {
                  print('onChanged:' + v);
                },
                onSubmitted: (v) {
                  FocusScope.of(context).requestFocus(_focusNode);
                  print('onSubmitted:' + v);
                  _controller.clear();
                },
              )

Flutter——最详细(TextField)使用教程

VPS购买请点击我

文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。

目录[+]