您现在的位置是:首页 >技术教程 >Flutter——最详细(TextField)使用教程网站首页技术教程

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

怀君 2023-07-15 12:00:02
简介Flutter——最详细(TextField)使用教程

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 属性效果图

在这里插入图片描述

icon 属性效果图
常用于左侧图标展示

在这里插入图片描述

border 属性效果图
输入框边框

在这里插入图片描述

hintText 属性效果图
未点击时文案提示

在这里插入图片描述

counter 属性效果图
在这里插入图片描述
helperText 属性效果图

在这里插入图片描述

prefixIcon 属性效果图

在这里插入图片描述

suffixIcon 属性效果图

在这里插入图片描述

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

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();
                },
              )

在这里插入图片描述

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。