1.TextField常用的属性

属性	解释
maxLength	文本的输入长度
maxLines	文本输入的行数
textAlign	输入框内内容剧中对齐
textDirection	文字从左向右还是从右向左
autofocus	自动获取焦点
obscureText	密文输入(如果是密文输入的话,maxLines只能是1).
enabled	输入框是否可以输入
onChanged	当文本发生改变的时候,回调的函数
onSubmitted	单击完成按钮时候,回调的函数
inputFormatters	限制输入的方式(文本/数字)
keyboardType	设置键盘格式
textInputAction	输入的类型(下一步,发送,搜索等等)

2.decoration设置输入框

hintText	占位符
labelText	输入框没有焦点的时候显示在输入框里面,如果输入框获取焦点后就显示在输入框边框线上面
helperText	显示在输入框下面
errorText	和helperText显示的文字位置一致,两者相互重叠
prefixText	输入框获取焦点的时候才会显示出来,在输入框的最前面,光标在该文字后面
prefixIcon	前面的小图标(该小图标会显示在输入框横线上方)
Icon	前面的小图标(该小图标会将整个输入框进行缩进)
suffixText	输入框获取焦点的时候才会显示出来,在输入框的最后面
counterText	输入框右下角显示的文字,默认和最大字数是相重叠的
enabledBorder	配置可编辑状态时候的样式

3.style

color	设置文字颜色
fontSize	设置文字大小
decoration	none:没有 underline:下划线 overline:上划线 lineThrough:删除线
decorationColor	设置下划线的颜色
decorationStyle	decorationStyle设置下划线的样式 solid:实线 double:两条实线 dashed:虚线 wavy:波浪线
fontWeight	设置文字为粗体
fontStyle	设置为斜体
letterSpacing	设置文字之间间距
wordSpacing	设置单词之间的间距
height	控制行高倍数
backgroundColor	设置输入框背景颜色

void main() {runApp( MyApp());
}class MyApp extends StatelessWidget {MyApp({Key? key}) : super(key: key);TextEditingController controller =new TextEditingController();void dispose() {//需要进行释放controller.dispose();super.dispose();
}@override
void initState() {controller.text="原始值";
//文本框的值有变化的时候,就会执行该监听器方法
controller.addListener((){}
);//控制 初始化的时候鼠标保持在文字最后面controller=TextEditingController.fromValue(//用来初始化显示TextEditingValue(//用来设置文本内容text:"preText",//设置光标的位置selection: TextSelection.fromPosition(//用来设置文本的位置TextPosition(affinity: TextAffinity.downstream,//光标向后移动的长度offset: 3,),),));}// This widget is the root of your application.@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Flutter Demo',theme: ThemeData(primarySwatch: Colors.blue,),home: Scaffold(appBar: AppBar(title: const Text("Flutter App"),actions: [ElevatedButton(onPressed: () {print(controller.text);//输入框里面的内容},child: Text("保存")),],),/*** TextField使用详情* 1.TextField组件基本使用以及常用属性配置;* 2.TextField边框decoration详细综述;* 3.TextField的帮助提示文本配置;* 4.TextField的TextEditingController;* 5.TextField的焦点相关配置;* 6.TextField的输入光标的相关配置.*/body: Center(child: TextField(maxLength: 30, //文本的输入长度maxLines: 1, //文本输入的行数textAlign: TextAlign.left, //输入框内内容剧中对齐textDirection: TextDirection.ltr, //文字从左向右autofocus: false, //自动获取焦点obscureText: false, //密文输入(如果是密文输入的话,maxLines只能是1).enabled: true, //输入框是否可以输入onChanged: (value) {}, //当文本发生改变的时候,回调的函数inputFormatters: <TextInputFormatter>[], //限制输入的方式(文本/数字)keyboardType: TextInputType.phone, //设置键盘格式decoration: const InputDecoration(hintText: "请输入用户名", //占位符labelText: "输入中...", //输入框没有焦点的时候显示在输入框里面,如果输入框获取焦点后就显示在输入框边框线上面helperText: "帮助提示语", //显示在输入框下面errorText: "错误文本提示", //和helperText显示的文字位置一致,两者相互重叠prefixText: "用户名:", //输入框获取焦点的时候才会显示出来,在输入框的最前面,光标在该文字后面prefixIcon: Icon(Icons.call), //前面的小图标suffixText: "后面", //输入框获取焦点的时候才会显示出来,在输入框的最后面counterText: "计数", //输入框右下角显示的文字,默认和最大字数是相重叠的//配置可编辑状态时候的样式enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10)),borderSide: BorderSide(color: Colors.black, //设置边框颜色width: 2, //设置边框宽度)), //设置边框的样式//focusedBorder: (),//获取焦点时候的配置//disabledBorder: (),//配置不可编辑状态的样式),style: const TextStyle(color: Colors.purple, //设置文字颜色fontSize: 16, //设置文字大小/*** none:没有* underline:下划线* overline:上划线* lineThrough:删除线*/decoration: TextDecoration.none,decorationColor: Colors.red, //设置下划线的颜色/*** decorationStyle设置下划线的样式* solid:实线* double:两条实线* dotted:* dashed:虚线* wavy:波浪线*/decorationStyle: TextDecorationStyle.wavy,fontWeight: FontWeight.w600, //设置文字为粗体,fontStyle: FontStyle.italic, //设置为斜体letterSpacing: 3, //设置文字之间间距wordSpacing: 2, //设置单词之间的间距height: 1, //控制行高倍数backgroundColor: Colors.yellow, //设置输入框背景颜色),),),),);}
}

Flutter组件--TextField使用详情相关推荐

Flutter组件--GridView使用详情
GridView网格布局在实际项目中用的也非常多,当我们想让可以滚动的元素使用矩阵方式排列的时候.此时我们可以用网格列表组件GridView实现布局. GridView创建网格列表主要有下面三种方式 ...
【Flutter】StatefulWidget 组件 ( Image 组件 | TextField 组件 )
文章目录一.Image 组件二.TextField 组件三. 相关资源一.Image 组件 Image 组件有多个命名构造函数 , 可以从文件 / 内存 / 网络 / Assets 中加载文 ...
Flutter 中TextField详解
在Flutter中TextField是一个文本输入组件它可以直接使用 class MyApp1 extends StatefulWidget {const MyApp1({Key? key}) : ...
【Flutter】自定义 Flutter 组件 ( 创建自定义 StatelessWidget、StatefulWidget 组件 | 调用自定义组件 )
文章目录一.Flutter 组件简介二.Flutter 自定义 StatelessWidget 组件流程 1.导入父类包 2.选择继承的父类 3.设置成员变量及构造函数 4.重写 build 方法 ...
多图弹出最后变成心形html,【Flutter组件】仿抖音双击点赞弹出爱心效果（可连点）...
效果简介仿抖音点赞手势,单击暂停,双击点赞,可连续点击添加多个爱心,特点如下全部效果为代码绘制(爱心图标来自Material Icon的图标) 套上在目标Widget外即可使用提供单击与点赞的 ...
Flutter 从 TextField 安全泄漏问题深入探索文本输入流程
Flutter 的 TextField 相信大家都很熟悉,作为输入控件 TextField 经常出现在需要登录的场景,例如在需要输入密码的 TextField 上配置 obscureText: tru ...
贝壳团队出品的 Flutter 组件库 Bruno 现已开源
Bruno 是由贝壳「用户体验中心 & 移动端作业组」联合打造的一套企业级移动端 Flutter 组件库,于 12 月 10 日正式开源: 官网 https://bruno.ke.com/ P ...
【Flutter 组件系列第 2 篇】CircularProgressIndicator (圆形进度条组件)
这是[Flutter 组件系列第 2 篇],如果觉得有用的话,欢迎关注专栏. 文章目录一:CircularProgressIndicator 的构造函数二:基本用法三:设置进度具体值四:设置背 ...
Flutter 组件之 Wrap
Flutter 组件之 Wrap 1.简介行和列布局的组件 2.属性 direction: Axis.horizontal主轴方向,决定了子组件纵向布局还是横向 alignment:WrapAlig ...

Flutter组件--TextField使用详情

1.TextField常用的属性

2.decoration设置输入框

3.style

Flutter组件--TextField使用详情相关推荐

最新文章

热门文章