Flutter 学习 - Widget 之 TextField

前言

本章介绍Flutter中文本输入框Widget - TextField
,在实际项目中输入框可谓是不可缺少的,无论是注册登录还是意见反馈,直至到评论这些很常见到功能都需要用户进行输入操作,那Flutter中如何使用TextField进行文本输入呢,下面我们来介绍下。

使用方式

最简单的使用方式:

TextField()

效果如下:
TextField运行效果.gif

源码分析

下面我们看下TextFiled的源码

const TextField({
    Key key,//Widget的标识
    this.controller,//控制TextField的编辑,不设置会有默认值,类型是TextEditingController
    this.focusNode,//用于控制TextField是否有当前键盘的输入焦点,类型是FocusNode
    this.decoration = const InputDecoration(),//用于控制TextField的外观显示,如颜色,边框等,类型是InputDecoration
    TextInputType keyboardType,//用于设置该输入框默认的键盘输入类型,类型是TextInputType
    this.textInputAction,//键盘动作按钮图标(即回车键位图标),类型是TextInputAction
    this.textCapitalization = TextCapitalization.none,//定义文本的大写格式,类型是TextCapitalization
    this.style,//文本样式,类型是TextStyle
    this.strutStyle,//使用的支柱风格,类型是StrutStyle
    this.textAlign = TextAlign.start,//文本的对齐方式,类型是TextAlign
    this.textAlignVertical,//垂直对齐,类型是TextAlignVertical
    this.textDirection,//文字方向,类型TextDirection
    this.readOnly = false,//bool类型,文本是不是不能编辑
    this.showCursor,//bool类型,是否显示光标
    this.autofocus = false,//类型是bool,是否自动获取焦点
    this.obscureText = false,//类型是bool,是否隐藏正在编辑的文本,用于密文等,文本内容会用“•”替换,默认为false
    this.autocorrect = true,//类型是bool,是否自动更正
    this.maxLines = 1,//类型是int,显示的最大行数
    this.minLines,//类型是int,最小展示行数
    this.expands = false,//bool 类型,是否可扩展
    this.maxLength,//类型是int,输入框中允许的最大字数
    /**
    *  类型是bool,是否强制限制最大字符数,默认为true
    *  true:强制限制最大字符数
    *  false:不限制最大字符数,即使设置了maxLength也不生效
    **/
    this.maxLengthEnforced = true,
    this.onChanged,//输入框内容改变时的回调函数,类型是ValueChanged
    this.onEditingComplete,//输入框输入完成时触发,但是onEditingComplete没有参数,不会返回内容,类型是VoidCallback
    this.onSubmitted,//输入框输入完成时触发,但是onSubmitted有参数,会返回内容,类型是ValueChanged
    this.inputFormatters,//用于指定输入格式;当用户输入内容改变时,会根据指定的格式来校验。类型是List< TextInputFormatter>
    /**
    *  类型是bool,输入框是否禁用,如果为false,则输入框会被禁用
    *    ,禁用状态不接收输入和事件,同时* *   显示禁用态样式(在其    
    *   decoration中定义)。
      **/
    this.enabled,
    this.cursorWidth = 2.0,//类型是double,自定义输入框光标宽度
    this.cursorRadius,//自定义输入框光标圆角,类型是Radius
    this.cursorColor,//自定义光标颜色,类型是Color
    this.keyboardAppearance,//设置键盘的外观模式,只能在iOS上使用,类型是Brightness
    this.scrollPadding = const EdgeInsets.all(20.0),//文本框滑动时的间距,类型是EdgeInsets
    this.dragStartBehavior = DragStartBehavior.start,//设置设置决定了用户何时正式启动拖动,类型是DragStartBehavior
    this.enableInteractiveSelection,//类型是bool 是否启用交互式选择,true:长按将会选中文字,并且弹出 cut/copy/paste 的菜单
    this.onTap,//TextField的点击事件,类型是GestureTapCallback
    this.buildCounter,//生成自定义 InputDecorator.counter 小部件的回调,类型是InputCounterWidgetBuilder
    this.scrollController,//类型是ScrollController,滚动监听器
    this.scrollPhysics,//类型是 ScrollPhysics,确定滚动的物理属性
  }) : assert(textAlign != null),
       assert(readOnly != null),
       assert(autofocus != null),
       assert(obscureText != null),
       assert(autocorrect != null),
       assert(maxLengthEnforced != null),
       assert(scrollPadding != null),
       assert(dragStartBehavior != null),
       assert(maxLines == null || maxLines > 0),
       assert(minLines == null || minLines > 0),
       assert(
         (maxLines == null) || (minLines == null) || (maxLines >= minLines),
         'minLines can\'t be greater than maxLines',
       ),
       assert(expands != null),
       assert(
         !expands || (maxLines == null && minLines == null),
         'minLines and maxLines must be null when expands is true.',
       ),
       assert(maxLength == null || maxLength == TextField.noMaxLength || maxLength > 0),
       keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline),
       super(key: key);

注:TextField中的参数都是可选的

下面看下TextField中获取输入内容的两种方法

  • TextEditingController

TextEditingController是TextField的控制类,可以控制Textfield的编辑,是TextField的controller属性,我们可以给TextField赋值自己创建的TextEditingController对象来控制TextField,使用方式如下:

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _controller = TextEditingController();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(
            widget.title,
            textWidthBasis: TextWidthBasis.parent,
          ),
        ),
        body: TextField(
          controller: _controller,
        ));
  }
}

然后我们就可以用_controller.text来访问TextField里的内容了。

  • ValueChanged

当用户输入,TextField的内容发生变化,TextField就会回调它的onChanged回调。因此onChanged可以实时查看TextField的内容变化
使用方法:

onChanged: (String data){
      //实时获取
      print(data);
 },
  • FocusNode
    使用方式
FocusNode()

源码分析

 FocusNode({
    String debugLabel,//String类型,设置debug标签,这样不会影响release环境
    FocusOnKeyCallback onKey,//获取焦点回调,类型是FocusOnKeyCallback
    this.skipTraversal = false,//bool类型是否跳过焦点遍历事件,默认为false
  })  : assert(skipTraversal != null),
        _onKey = onKey {
    // Set it via the setter so that it does nothing on release builds.
    this.debugLabel = debugLabel;
  }
  • InputDecoration
const InputDecoration({
    this.icon,//图片,类型是Widget
    this.labelText,//String 类型,描述输入字段的文本
    this.labelStyle,//lableText样式,类型是TextStyle
    this.helperText,//String 提供有关输入的提示文本,比如改如何使用
    this.helperStyle,//helperText的样式,类型是TextStyle
    this.hintText,//String类型,指示字段接受何种类型的输入
    this.hintStyle,//hintText的样式,类型是TextStyle
    this.hintMaxLines,//int 类型,[hintText]所能占用的最大行数。
    this.errorText,//String类型,出现在输入边框下方的错误提示文本。
    this.errorStyle,//errorText的样式,类型是TextStyle
    this.errorMaxLines,//int 类型,errorMaxLines所能占用的最大行数。
    this.hasFloatingPlaceholder = true,//bool类型,标签是否在焦点上浮动
    this.isDense,//bool 类型,输入是否为密集形式(即使用较少的垂直空间)。
    this.contentPadding,//输入内容的那边距,类型是EdgeInsetsGeometry
    this.prefixIcon,//出现在前缀或装饰器文本字段的可编辑部分之前的图标,类型为Widget
    this.prefix,//可选小部件放置在输入之前的行上,类型为Widget
    this.prefixText,//String 类型可选文本前缀,放在输入之前的行上
    this.prefixStyle,//prefixText的样式,类型为TextStyle
    this.suffixIcon,//出现在文本可编辑部分后,或者装饰容中文本的后缀上,类型是Widget
    this.suffix,//可选小部件,可放置在输入后的行上。类型是Widget
    this.suffixText,//String类型,可选文本后缀,放在输入后的行上。
    this.suffixStyle,//suffixText的样式,类型为TextStyle
    this.counter,//可选的自定义计数器小部件,类型是Widget
    this.counterText,//String类型,可选文本放在行下作为字符计数。
    this.counterStyle,//counterText的样式,类型TextStyle
    this.filled,//bool类型,装饰的容器将填满
    this.fillColor,//填充颜色,类型是 Color
    this.focusColor,//与[fillColor]混合并填充装饰容器的颜色,类型是 Color
    this.hoverColor,//如果容器被鼠标悬停在上面,则显示用于装饰的焦点突出显示的颜色。类型是 Color
    this.errorBorder,//当[InputDecorator]没有焦点并且显示错误时要显示的边框。类型 InputBorder
    this.focusedBorder,//当[InputDecorator]有焦点且没有显示错误时要显示的边框。类型 InputBorder
    this.focusedErrorBorder,//当[InputDecorator]具有焦点并显示错误时要显示的边框。类型 InputBorder
    this.disabledBorder,//当[InputDecorator]被禁用并且没有显示错误时显示的边框。类型 InputBorder
    this.enabledBorder,//启用[InputDecorator]时要显示的边框,并且没有显示错误。类型 InputBorder
    this.border,//边框的形状,以画出周围装饰的容器。类型 InputBorder
    this.enabled = true,//bool 类型,如果为false, [helperText]、[errorText]和[counterText]则不展示,其余可视元素的不透明度减少。
    this.semanticCounterText,//String类型,对应文本的语义标签。
    this.alignLabelWithHint,//bool 类型,当[InputDecorator]包含多行时,通常设置为true
  }) : 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;
  • TextInputType
TextInputType的值含义
TextInputType.text文本输入键盘
TextInputType.multiline多行文本,需和maxLines配合使用(设为null或大于1)
TextInputType.number数字;会弹出数字键盘
TextInputType.phone优化后的电话号码输入键盘;会弹出数字键盘并显示"* #"
TextInputType.datetime优化后的日期输入键盘;Android上会显示“: -”
TextInputType.emailAddress优化后的电子邮件地址;会显示“@ .”
TextInputType.url优化后的url输入键盘; 会显示“/ .”
  • TextInputAction

类型为TextInputAction,键盘动作按钮图标(即回车键位图标)。
就是键盘右下角的那一个块图标。

使用方式

TextField(
   textInputAction: TextInputAction.search,
 ))

效果如下

TextInputAction的值含义示例
TextInputAction.noneAndroid适用,IOS不适用,表示没有相关的输入操作
TextInputAction.unspecified让系统决定哪个最合适
TextInputAction.done用户完成输入后,终结该行为
TextInputAction.go将用户带到程序中与目的地对应的部分,如用户输入一个餐馆名称,点击后可进行导航或者展示目的地位置
TextInputAction.search执行搜索查询20190803210756.jpg
TextInputAction.send发送用户已编写的内容,如短信或邮件
TextInputAction.next用户已经完成当前的输入源,转向下一个
TextInputAction.previousAndroid上适用,一个向左的箭头,表示向后移动,iOS不适用
TextInputAction.continueActioniOS上使用,Android上不适用,表示继续操作
TextInputAction.join用户想要加入一些东西,如无线网络
TextInputAction.route用户需要路由选项,如驾驶方向
TextInputAction.emergencyCall拨打紧急服务电话
TextInputAction.newline插入换行符
  • TextCapitalization
TextCapitalization的值含义
TextCapitalization.none全部小写
TextCapitalization.words每个单词的首字母大写
TextCapitalization.sentences每个句子的首字母大写
TextCapitalization.characters每个字每大写
  • Brightness
Brightness的值含义
Brightness.dark深色主题
Brightness.light浅色主题
  • DragStartBehavior
DragStartBehavior的值含义
DragStartBehavior.down在检测到第一个down事件的位置设置初始偏移量。
DragStartBehavior.start将初始位置设置为检测到拖动启动事件的位置。

结尾

截止到这里TextField就介绍完了。
以下是我的Flutter系列的链接,后续会持续更新,欢迎大家指正。

Flutter 系列文章

更多关于技术相关的内容请关注博主公众号–迷途程序猿
迷途程序猿

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值