草庐IT

Flutter TextField 组件的属性、监听、赋值等详细说明

小哥丷 2023-04-14 原文

1.TextField 属性:

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

2.TextField  的  InputDecoration()  属性:

const InputDecoration({
this.icon,                  // 装饰器外小图标
this.labelText,             // 文本框描述标签
this.labelStyle,            // 文本框描述标签样式
this.helperText,            // 文本框辅助标签
this.helperStyle,           // 文本框辅助标签样式
this.hintText,              // 文本框默认提示信息
this.hintStyle,             // 文本框默认提示信息样式
this.hintMaxLines,          // 文本框默认提示信息最大行数
this.errorText,             // 文本框错误提示信息
this.errorStyle,            // 文本框错误提示信息样式
this.errorMaxLines,         // 文本框错误提示信息最大行数
this.hasFloatingPlaceholder = true,     // 文本框获取焦点后 labelText 是否向上浮动
this.isDense,               // 是否问紧凑型文本框
this.contentPadding,        // 文本内边距
this.prefixIcon,            // 前置图标
this.prefix,                // 前置预填充 Widget
this.prefixText,            // 前置预填充文本
this.prefixStyle,           // 前置预填充样式
this.suffixIcon,            // 后置图标
this.suffix,                // 后置预填充 Widget
this.suffixText,            // 后置预填充文本
this.suffixStyle,           // 后置预填充样式
this.counter,               // 输入框右下角 Widget
this.counterText,           // 输入框右下角文本
this.counterStyle,          // 输入框右下角样式
this.filled,                // 是否颜色填充文本框
this.fillColor,             // 填充颜色
this.errorBorder,           // errorText 存在时未获取焦点边框
this.focusedBorder,         // 获取焦点时边框
this.focusedErrorBorder,    // errorText 存在时获取焦点边框
this.disabledBorder,        // 不可用时边框
this.enabledBorder,         // 可用时边框
this.border,                // 边框
this.enabled = true,        // 输入框是否可用
this.semanticCounterText,
this.alignLabelWithHint,    // 覆盖将标签与 TextField 的中心对齐
})

3.TextField 的 controller 使用:

//初始化控制器
TextEditingController _use = TextEditingController();

①获取文本框内容:

_use.text.toString();

②给文本框赋值,有两种写法:

String  mUserId="123";

// 给文本框赋值 1
_use.value = _use.value.copyWith(
  text: mUserId.isEmpty ? "" : mUserId,
  selection: TextSelection(
      baseOffset: mUserId.length, extentOffset: mUserId.length),
  composing: TextRange.empty,
);
// 给文本框赋值 2 
_use = TextEditingController.fromValue(TextEditingValue(
    text: mUserId.isEmpty ? "" : mUserId, //判断keyword是否为空
    // 保持光标在最后

    selection: TextSelection.fromPosition(TextPosition(
        affinity: TextAffinity.downstream, offset: mUserId.length))));

③文本框的监听:

_use .addListener(() {

 print("你输入的内容为:"+mUserId);

 });

4.TextField 的改变事件 onChanged :

return TextField(
//改变事件

onChanged: (str) {

print("你改变的内容为:"+str);

},);

5.TextField  的 焦点  focusNode 使用:

//创建FocusNode对象实例
FocusNode _focusNode = FocusNode();

//使用

return TextField(

focusNode: _focusNode,

);

/// 输入框焦点事件的捕捉与监听
@override
void initState() {
  super.initState()
  //添加listener监听
  //对应的TextField失去或者获取焦点都会回调此监听
  _focusNode.addListener(() {
    
    if (_focusNode.hasFocus) {
      //获取焦点
      print("获取焦点");
    } else {
      //失去焦点
      print("失去焦点");
    }
  });
 
}

6.TextField 使用实例(用到了部分属性):

//输入框
Widget _input() {
  return TextField(
    controller: _use,//控制器名称
    textAlignVertical: TextAlignVertical.center,
    maxLines: 1,
    style: TextStyle(fontSize: 40.sp),
    focusNode: _usefocusNode,//焦点名称
    //改变事件
    onChanged: (str) {
      setState(() {});
    },
    decoration: InputDecoration(
        contentPadding: EdgeInsets.all(10.r),
        isCollapsed: true,
        //文本框前面的图片
        prefixIcon: const Icon(Icons.person),
        //文本框后面的图片(根据是否获取焦点并且有文本框内容来判断是否显示图片)
        suffixIcon: _usefocusNode.hasFocus && _use.text.isNotEmpty
            ? IconButton(
                //如果文本长度不为空则显示清除按钮
                onPressed: () {
                  _use.clear();
                  setState(() {});
                },
                icon: const Icon(Icons.cancel, color: Colors.grey))
            : null,
        hintText: "请输入账号",
        //文本框选中外边框属性
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.r)),//文本框边框圆角
            borderSide: BorderSide(width: 2.w, color: Colors.black12)),//文本框边框宽度和颜色
         //文本框未选中外边框属性
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.r)),
            borderSide: BorderSide(width: 2.w, color: Colors.blueAccent))),
  );
}

在此记录一下学习的东西。

有关Flutter TextField 组件的属性、监听、赋值等详细说明的更多相关文章

  1. ruby-on-rails - 如果为空或不验证数值,则使属性默认为 0 - 2

    我希望我的UserPrice模型的属性在它们为空或不验证数值时默认为0。这些属性是tax_rate、shipping_cost和price。classCreateUserPrices8,:scale=>2t.decimal:tax_rate,:precision=>8,:scale=>2t.decimal:shipping_cost,:precision=>8,:scale=>2endendend起初,我将所有3列的:default=>0放在表格中,但我不想要这样,因为它已经填充了字段,我想使用占位符。这是我的UserPrice模型:classUserPrice回答before_val

  2. ruby-on-rails - 在混合/模块中覆盖模型的属性访问器 - 2

    我有一个包含模块的模型。我想在模块中覆盖模型的访问器方法。例如:classBlah这显然行不通。有什么想法可以实现吗? 最佳答案 您的代码看起来是正确的。我们正在毫无困难地使用这个确切的模式。如果我没记错的话,Rails使用#method_missing作为属性setter,因此您的模块将优先,阻止ActiveRecord的setter。如果您正在使用ActiveSupport::Concern(参见thisblogpost),那么您的实例方法需要进入一个特殊的模块:classBlah

  3. ruby - 多个属性的 update_column 方法 - 2

    我有一个具有一些属性的模型:attr1、attr2和attr3。我需要在不执行回调和验证的情况下更新此属性。我找到了update_column方法,但我想同时更新三个属性。我需要这样的东西:update_columns({attr1:val1,attr2:val2,attr3:val3})代替update_column(attr1,val1)update_column(attr2,val2)update_column(attr3,val3) 最佳答案 您可以使用update_columns(attr1:val1,attr2:val2

  4. ruby - Nokogiri 剥离所有属性 - 2

    我有这个html标记:我想得到这个:我如何使用Nokogiri做到这一点? 最佳答案 require'nokogiri'doc=Nokogiri::HTML('')您可以通过xpath删除所有属性:doc.xpath('//@*').remove或者,如果您需要做一些更复杂的事情,有时使用以下方法遍历所有元素会更容易:doc.traversedo|node|node.keys.eachdo|attribute|node.deleteattributeendend 关于ruby-Nokog

  5. ruby-on-rails - Rails 模型——非持久类成员或属性? - 2

    对于Rails模型,是否可以/建议让一个类的成员不持久保存到数据库中?我想将用户最后选择的类型存储在session变量中。由于我无法从我的模型中设置session变量,我想将值存储在一个“虚拟”类成员中,该成员只是将值传递回Controller。你能有这样的类(class)成员吗? 最佳答案 将非持久属性添加到Rails模型就像任何其他Ruby类一样:classUser扩展解释:在Ruby中,所有实例变量都是私有(private)的,不需要在赋值前定义。attr_accessor创建一个setter和getter方法:classUs

  6. 在VMware16虚拟机安装Ubuntu详细教程 - 2

    在VMware16.2.4安装Ubuntu一、安装VMware1.打开VMwareWorkstationPro官网,点击即可进入。2.进入后向下滑动找到Workstation16ProforWindows,点击立即下载。3.下载完成,文件大小615MB,如下图:4.鼠标右击,以管理员身份运行。5.点击下一步6.勾选条款,点击下一步7.先勾选,再点击下一步8.去掉勾选,点击下一步9.点击下一步10.点击安装11.点击许可证12.在百度上搜索VM16许可证,复制填入,然后点击输入即可,亲测有效。13.点击完成14.重启系统,点击是15.双击VMwareWorkstationPro图标,进入虚拟机主

  7. spring.profiles.active和spring.profiles.include的使用及区别说明 - 2

    转自:spring.profiles.active和spring.profiles.include的使用及区别说明下文笔者讲述spring.profiles.active和spring.profiles.include的区别简介说明,如下所示我们都知道,在日常开发中,开发|测试|生产环境都拥有不同的配置信息如:jdbc地址、ip、端口等此时为了避免每次都修改全部信息,我们则可以采用以上的属性处理此类异常spring.profiles.active属性例:配置文件,可使用以下方式定义application-${profile}.properties开发环境配置文件:application-dev

  8. ruby - Chef Ruby 遍历 .erb 模板文件中的属性 - 2

    所以这可能有点令人困惑,但请耐心等待。简而言之,我想遍历具有特定键值的所有属性,然后如果值不为空,则将它们插入到模板中。这是我的代码:属性:#===DefaultfileConfigurations#default['elasticsearch']['default']['ES_USER']=''default['elasticsearch']['default']['ES_GROUP']=''default['elasticsearch']['default']['ES_HEAP_SIZE']=''default['elasticsearch']['default']['MAX_OP

  9. ruby - 获取数组中的值并最小化某个类属性的最优雅的方法是什么? - 2

    假设我有以下类(class):classPersondefinitialize(name,age)@name=name@age=ageenddefget_agereturn@ageendend我有一组Person对象。是否有一种简洁的、类似于Ruby的方法来获取最小(或最大)年龄的人?如何根据它对它们进行排序? 最佳答案 这样做会:people_array.min_by(&:get_age)people_array.max_by(&:get_age)people_array.sort_by(&:get_age)

  10. ruby - 带括号和 splat 运算符的并行赋值 - 2

    我明白了:x,(y,z)=1,*[2,3]x#=>1y#=>2z#=>nil我想知道为什么z的值为nil。 最佳答案 x,(y,z)=1,*[2,3]右侧的splat*是内联扩展的,所以它等同于:x,(y,z)=1,2,3左边带括号的列表被视为嵌套赋值,所以它等价于:x=1y,z=23被丢弃,而z被分配给nil。 关于ruby-带括号和splat运算符的并行赋值,我们在StackOverflow上找到一个类似的问题: https://stackoverflow

随机推荐