Flutter TextField 使用详解

TextField 属性详解

第一层基本属性,里面包含了常用的一些基本控制属性

kotlin 复制代码
  const TextField({
    Key key,
    this.controller,//控制器
    this.focusNode,//焦点
    this.decoration = const InputDecoration(),//装饰
    TextInputType keyboardType,//键盘类型,即输入类型
    this.textInputAction,//键盘按钮
    this.textCapitalization = TextCapitalization.none,//大小写
    this.style,//样式
    this.strutStyle,
    this.textAlign = TextAlign.start,//对齐方式
    this.textDirection,//文本显示从左到右还是从右到左
    this.autofocus = false,//自动聚焦
    this.obscureText = false,//是否隐藏文本,即显示密码类型
    this.autocorrect = true,//自动更正
    this.maxLines = 1,//最多行数,高度与行数同步
    this.minLines,//最小行数
    this.expands = false,
    this.maxLength,//最多输入数,有值后右下角就会有一个计数器
    this.maxLengthEnforced = true,
    this.onChanged,//输入改变回调
    this.onEditingComplete,//输入完成时,配合TextInputAction.done使用
    this.onSubmitted,//提交时,配合TextInputAction
    this.inputFormatters,//输入校验
    this.enabled,//是否可用
    this.cursorWidth = 2.0,//光标宽度
    this.cursorRadius,//光标圆角
    this.cursorColor,//光标颜色
    this.keyboardAppearance,
    this.scrollPadding = const EdgeInsets.all(20.0),
    this.dragStartBehavior = DragStartBehavior.start,
    this.enableInteractiveSelection,
    this.onTap,//点击事件
    this.buildCounter,
    this.scrollPhysics,
  }) 

第二层对应第一层中的decoration属性,通常使用InputDecoration类。如果想使用TextFiled做到比较理想的效果,就必须这些:

kotlin 复制代码
InputDecoration({
  this.icon,    //位于装饰器外部和输入框前面的图标
  this.labelText,  //用于描述输入框,例如这个输入框是用来输入用户名还是密码的,当输入框获取焦点时默认会浮动到上方,
  this.labelStyle,  // 控制labelText的样式,接收一个TextStyle类型的值
  this.helperText, //辅助文本,位于输入框下方,如果errorText不为空的话,则helperText不会显示
  this.helperStyle, //helperText的样式
  this.hintText,  //提示文本,位于输入框内部
  this.hintStyle, //hintText的样式
  this.hintMaxLines, //提示信息最大行数
  this.errorText,  //错误信息提示
  this.errorStyle, //errorText的样式
  this.errorMaxLines,   //errorText最大行数
  this.hasFloatingPlaceholder = true,  //labelText是否浮动,默认为true,修改为false则labelText在输入框获取焦点时不会浮动且不显示
  this.isDense,   //改变输入框是否为密集型,默认为false,修改为true时,图标及间距会变小
  this.contentPadding, //内间距
  this.prefixIcon,  //位于输入框内部起始位置的图标。
  this.prefix,   //预先填充的Widget,跟prefixText同时只能出现一个
  this.prefixText,  //预填充的文本,例如手机号前面预先加上区号等
  this.prefixStyle,  //prefixText的样式
  this.prefixIconConstraints,//头部icon约束
  this.suffixIcon, //位于输入框后面的图片,例如一般输入框后面会有个眼睛,控制输入内容是否明文
  this.suffix,  //位于输入框尾部的控件,同样的不能和suffixText同时使用
  this.suffixText,//位于尾部的填充文字
  this.suffixStyle,  //suffixText的样式
  this.suffixIconConstraints,//尾部icon 约束
  this.counter,//位于输入框右下方的小控件,不能和counterText同时使用
  this.counterText,//位于右下方显示的文本,常用于显示输入的字符数量
  this.counterStyle, //counterText的样式
  this.filled,  //如果为true,则输入使用fillColor指定的颜色填充
  this.fillColor,  //相当于输入框的背景颜色
  this.errorBorder,   //errorText不为空,输入框没有焦点时要显示的边框
  this.focusedBorder,  //输入框有焦点时的边框,如果errorText不为空的话,该属性无效
  this.focusedErrorBorder,  //errorText不为空时,输入框有焦点时的边框
  this.disabledBorder,  //输入框禁用时显示的边框,如果errorText不为空的话,该属性无效
  this.enabledBorder,  //输入框可用时显示的边框,如果errorText不为空的话,该属性无效
  this.border, //正常情况下的border
  this.enabled = true,  //输入框是否可用
  this.semanticCounterText,  
  this.alignLabelWithHint,
})

基本使用

  1. 创建一个TextField
scss 复制代码
TextField(),
  1. 会发现自带下划线,处理方式:
less 复制代码
TextField(
  decoration: InputDecoration(
    border: InputBorder.none
  ),
),
  1. 添加背景色
less 复制代码
TextField(
  decoration: InputDecoration(
    border: InputBorder.none,
    fillColor: Colors.green,
    filled: true,
  ),
),
  1. 添加边框、边框颜色、圆角
less 复制代码
OutlineInputBorder getBorder(){
  OutlineInputBorder outlineInputBorder = const OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(10)),//圆角
      borderSide: BorderSide(
          width: 1,//线宽
          color: Colors.green//边框颜色
      )
  );
  return outlineInputBorder;
}
TextField(
  decoration: InputDecoration(
    border: getBorder(),//正常情况border
    focusedBorder: getBorder(),//聚焦情况
    enabledBorder: getBorder(),//可输入情况
    errorBorder: getBorder(),//errorText不为空,输入框没有焦点时要显示的边框
    disabledBorder: getBorder(),//输入禁用
  ),
),
  1. 多行输入文本居中显示
less 复制代码
TextField(
  minLines: 1,//必须填1,才可居中,其他默认是左上对齐
  maxLines: 10,//最多行数,大于1即可
  decoration: InputDecoration(
    border: getBorder(),//同时这些border也必须设置,不然文本也不会居中
    focusedBorder: getBorder(),
    enabledBorder: getBorder(),
    errorBorder: getBorder(),
    disabledBorder: getBorder(),
    fillColor: Colors.green,
    filled: true,
    contentPadding: const EdgeInsets.all(5),//此属性也必须设置,否则会出现很多奇怪的问题,比如多行输入不换行、多行输入不显示等问题

  ),
)

大致就这些了。

相关推荐
蒋星熠1 小时前
Flutter跨平台工程实践与原理透视:从渲染引擎到高质产物
开发语言·python·算法·flutter·设计模式·性能优化·硬件工程
Digitally1 小时前
如何将 iPhone 备份到电脑/PC 的前 5 种方法
ios·电脑·iphone
Swift社区2 小时前
在企业内部分发 iOS App 时如何生成并使用 manifest.plist
macos·ios·cocoa
卢叁3 小时前
Flutter之自定义TabIndicator
前端·flutter
萧雾宇5 小时前
Android Compose打造仿现实逼真的烟花特效
android·flutter·kotlin
他们都不看好你,偏偏你最不争气5 小时前
【iOS】push 和 present
ios
拜无忧6 小时前
【教程】flutter常用知识点总结-针对小白
android·flutter·android studio
拜无忧7 小时前
【教程】Flutter 高性能项目架构创建指南:从入门到高性能架构
android·flutter·android studio
醉过才知酒浓7 小时前
flutter 拦截返回按钮的方法(WillPopScope or PopScope)
flutter
2501_916013748 小时前
HTTPS 抓包难点分析,从端口到工具的实战应对
网络协议·http·ios·小程序·https·uni-app·iphone