当前位置：首页 > article >正文

flutter的TextField参数、案例整理（下）

article 2024/11/18 21:34:07

TextField

简述

下面整理了一些TextField常用参数的具体使用方式，留作记录。

decoration让输入框样式自定义

构造函数

const InputDecoration({
    this.icon, // 左边添加一个 Widget
    this.labelText, // 顶部描述字符串，如果输入框成为焦点，会发生改变
    this.labelStyle, // 设置顶部描述的文字样式
    this.helperText, // 底部描述文字，在输入区域的下方展示
    this.helperStyle, // 底部描述文字样式
    this.helperMaxLines, // 底部描述文字最大行数
    this.hintText, // 占位文字，类似于iOS中的 placeholder，只有当输入框没有输入内容并且成为焦点才会显示出来
    this.hintStyle, // 占位文字样式
    this.hintMaxLines, // 占位文字最大行数
    this.errorText, // 错误提示文字，如果同时设置helperText，会优先显示 errorText
    this.errorStyle, // 错误提示文字样式
    this.errorMaxLines, // 错误文字提示最大行数
    this.hasFloatingPlaceholder = true, // 默认为true，表示labelText是否上浮，true上浮，false表示获取焦点后labelText消失，其实就是一种上浮展示的效果
    this.isDense, // 改变输入框是否为密集型，默认为false，修改为true时，图标及间距会变小 行间距减小
    this.contentPadding, // 设置内容padding（内切），设置后输入框内容、helperText、counterText、errorText都会影响
    this.prefixIcon, // 在 icon 和 prefix（prefixText） 之间的一个 Widget
    this.prefix, // 输入框之前的一个Widget，基线与输入框基线对齐，如果同时设置了 prefixIcon,则会排布到prefixIcon后面去
    this.prefixText, // 文本，如果设置了 prefix 就不能设置 prefixText，这两者是冲突的
    this.prefixStyle, // 设置文本样式
    this.suffixIcon, // 类似 prefixIcon，只不过这是在尾部
    this.suffix, // 类似 suffix
    this.suffixText, // 类似 prefixText，在这里也不能同时设置 suffix
    this.suffixStyle, // suffixText 的样式
    this.counter, // 一般用来文字计数的Widget，如果同时设置了 counterText，优先展示 counter Widget，故二者互斥
    this.counterText, // 计数文本展示
    this.counterStyle, // 计数文本样式
    this.filled, // 是否需要填充容器
    this.fillColor, // 设置容器内部的填充颜色，需配合filled=true
    this.focusColor, // 
    this.hoverColor, // 
    this.errorBorder, // 输入框输入错误时，并且没有成为焦点边框展示样式
    this.focusedBorder, // 输入框成为了焦点并且没有设置 errorText 展示样式
    this.focusedErrorBorder, // 当设置了 errorText时，输入成为焦点边框展示样式
    this.disabledBorder, // 当输入框不可用时，边框样式
    this.enabledBorder, // 输入框可用没有成为焦点时边框展示样式
    this.border, // 设置边框样式，优先级低于其他 xxxborder，如果需要设置没有边框样式使用 InputBorder.none
    this.enabled = true, // 设置输入框是否可用
    this.semanticCounterText,
    this.alignLabelWithHint,
  }) : assert(enabled != null),
       assert(!(prefix != null && prefixText != null), 'Declaring both prefix and prefixText is not supported.'),
       assert(!(suffix != null && suffixText != null), 'Declaring both suffix and suffixText is not supported.'),
       isCollapsed = false;

border

设置无边框样式

final InputDecoration _decoration = InputDecoration(
  border: InputBorder.none, // 无边框设置
);

UnderlineInputBorder

边框下划线样式

enabledBorder: UnderlineInputBorder(
    borderSide: BorderSide(
    color: Colors.red,
    width: 5,
    style: BorderStyle.none, // 隐藏边框
  ),
),

OutlineInputBorder

边框环绕
选中时的边框效果

focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.orange,
        width: 3,
    ),
  borderRadius: BorderRadius.circular(10),
  gapPadding: 20, // 设置 labelText 与边框的间距
),

keyboardType

键盘是什么样子的，比如纯数字键盘

textInputAction

键盘的确认键是什么，比如有的显示Go，有的显示Next

textCapitalization

键盘大小写，一般不使用

strutStyle

段落样式
构造函数

const StrutStyle({
    String fontFamily, // 字体名称
    List<String> fontFamilyFallback, // fontFamily 找不到字体时搜索字体名称的有序列表
    this.fontSize, // 字体大小
    this.height, // 设置每行的高度，按照比例来计算的
    this.leading, // 设置每行的间距，也是按照比例来计算的
    this.fontWeight,
    this.fontStyle,
    this.forceStrutHeight,
    this.debugLabel,
    String package,
})