flutter组件-TextField

输入组件 TextField

开发中常见需要设置的属性

1. 文本字体、颜色、字体大小等
2. 占位文案字体、颜色、字体大小等
3. 输入框大小，icon等
4. 输入事件监听
5. 发送短信验证码 倒计时功能
   倒计时功能，使用dart核心库中 Timer类实现

//类似js中的setTimeout
new Timer(Duration duration, void callback())  
//类似js中setInterval
new Timer.periodic(Duration duration, void callback(Timer timer)) l

TextField类

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.textAlignVertical,
    this.textDirection,
    this.readOnly = false, //是否只读
    ToolbarOptions toolbarOptions,
    this.showCursor,
    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,
    this.onSubmitted,
    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 = true,
    this.onTap,
    this.buildCounter, // 显示当前输入字数
    this.scrollController,
    this.scrollPhysics,
  })

目前使用体验：

1. 下边线 直接使用Divider实现更加方便（decoration属性比较难用）

Divider(
  color: Color(0xffE6E6E6),
  thickness: 1, //设置线条的高度
  height: 0,// 设置间隔的高度
),