TextField

文本输入框

相关的组件

• 继承 StatefulWidget : 可变行widget, 减少重建Element开销

DiagnosticableTree (diagnostics.dart)
    Widget (framework.dart)
        StatefulWidget (framework.dart)
            TextField (text_field.dart)

• 关联类-> TextEditingController:, 解耦, 分离文本的输入事件

ChangeNotifier (change_notifier.dart)
    ValueNotifier (change_notifier.dart)
        TextEditingController (editable_text.dart)
            _TextSpanEditingController (selectable_text.dart)

• 关联类->InputBoard: 设置输入框的形状及边缘颜色

ShapeBorder (borders.dart)
    InputBorder (input_border.dart)
        _NoInputBorder (input_border.dart)
        OutlineInputBorder (input_border.dart)
        UnderlineInputBorder (input_border.dart)

• 其他Border

ShapeBorder (borders.dart)
    BeveledRectangleBorder (beveled_rectangle_border.dart)
    BoxBorder (box_border.dart)
        Border (box_border.dart)
        BorderDirectional (box_border.dart)
    CircleBorder (circle_border.dart)
    ContinuousRectangleBorder (continuous_rectangle_border.dart)
    RoundedRectangleBorder (rounded_rectangle_border.dart)
    _RoundedRectangleToCircleBorder (rounded_rectangle_border.dart)
    _StadiumToCircleBorder (stadium_border.dart)
    StadiumBorder (stadium_border.dart)
    _StadiumToRoundedRectangleBorder (stadium_border.dart)
    InputBorder (input_border.dart)
        _NoInputBorder (input_border.dart)
        OutlineInputBorder (input_border.dart)
        UnderlineInputBorder (input_border.dart)
    _OutlineBorder (outline_button.dart)
    _CompoundBorder (borders.dart

• 关联属性-> FocusNode: 控制键盘焦点事件

flutter/keyevent channel提供key的输入事件
pointerRouter 来处理点击事件

FocusNode (focus_manager.dart)
    FocusScopeNode (focus_manager.dart)
FocusManager (focus_manager.dart)
   RawKeyboard.instance
   GestureBinding.instance.pointerRouter

• 关联属性->TextInputFormatter: 文本校验

TextInputFormatter (text_formatter.dart)
    _WhitespaceDirectionalityFormatter (editable_text.dart)
    _DateTextInputFormatter (input_date_picker.dart)
    BlacklistingTextInputFormatter (text_formatter.dart)
    LengthLimitingTextInputFormatter (text_formatter.dart)
    _SimpleTextInputFormatter (text_formatter.dart)
    WhitelistingTextInputFormatter (text_formatter.dart)

构建相关类

DiagnosticableTree (diagnostics.dart)
    Widget (framework.dart)
        RenderObjectWidget (framework.dart)
            SingleChildRenderObjectWidget (framework.dart)
                RepaintBoundary (basic.dart) //独立绘制内容,不受parent的干扰

IgnorePointer //(控制是否冻结)
-> MouseRegion //(监听鼠标移动)
   -> AnimatedBuilder (_selectionGestureDetectorBuilder) //选择动画
     -> AnimatedBuilder (InputDecorator builder) //装饰动画
        -> InputDecorator 
          -> RepaintBoundary  //单独绘制
             -> EditableText    //绘制最终的文本
                -> Scrollable (viewportBuilder)
                   -> CompositedTransformTarget
                     -> _Editable(LeafRenderObjectWidget)
//渲染
AbstractNode (node.dart)
    RenderObject (object.dart)
        RenderBox (box.dart)
            RenderEditable (editable.dart)

属性介绍

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.textAlignVertical,     //设置文本是否垂直对齐
this.textDirection,     //文字方向
this.readOnly = false,  //文字内容是否可变
ToolbarOptions toolbarOptions,  //长按时的菜单栏显示项配置
this.showCursor,    //是否显示游标
this.autofocus = false,     //是否自动聚焦
this.obscureText = false,   //安全输入，隐藏文字
this.autocorrect = true,    //自动检查
SmartDashesType smartDashesType,    //破折号样式
SmartQuotesType smartQuotesType,    //引号样式
this.enableSuggestions = 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.selectionHeightStyle = ui. BoxHeightStyle.tight,   //控制选择高亮显示框的高度
this.selectionWidthStyle = ui. BoxWidthStyle.tight,     //控制选择高亮显示框的宽度
this.keyboardAppearance,    //键盘的样式
this.scrollPadding = const EdgeInsets.all(20.0),    //华动区域的内边距
this.dragStartBehavior = DragStartBehavior.start,   //设置拖拽触发的方向
this.enableInteractiveSelection = true,     //是否允许长按显示菜单
this.onTap,     //点击事件监听
this.buildCounter,  //构造长度/最大长度widget
this.scrollController,  //控制文本框内部的滑动事件
this.scrollPhysics,     //垂直滚动输入框的行为
});

• 文本框装饰属性

const InputDecoration({ 
this.icon,  最左边的icon
this.labelText,     输入描述文字
this.labelStyle,    输入描述文字的样式
this.helperText,    帮助文字
this.helperStyle,   帮助文字的样式
this.helperMaxLines,    帮助文字的最大行
this.hintText,  默认输入文字
this.hintStyle,     默认输入文字的样式
this.hintMaxLines,  默认输入文字的最大行
this.errorText,     错误文字
this.errorStyle,    错误文字样式
this.errorMaxLines,     错误文字的最大行
@Deprecated(    
'Use floatingLabelBehaviour instead. '  
'This feature was deprecated after v1.13.2.'    
)   
this.hasFloatingPlaceholder = true, // ignore: deprecated_member_use_from_same_package  是否有浮动的占位label
this.floatingLabelBehavior = FloatingLabelBehavior.auto,    //浮动占位label的行为
this.isDense,   //内容是否是锁紧
this.contentPadding,    //内容边距设定
this.prefixIcon,    //文字输入区域前面的icon
this.prefixIconConstraints,     //文字输入区域前面的icon的大小约束
this.prefix,    //前缀
this.prefixText,    //前缀文字
this.prefixStyle,   //前缀文字样式
this.suffixIcon,    //尾部icon
this.suffix,    //尾部widgt
this.suffixText,    //尾部文本
this.suffixStyle,   //尾部文本样式
this.suffixIconConstraints,     //尾部文本约束
this.counter,   //文本长度widget
this.counterText,   //文本长度占比文字
this.counterStyle,  //文本长度占比文字样式
this.filled,    //填充装饰的container
this.fillColor,     //填充颜色
this.focusColor,    //对焦的颜色
this.hoverColor,    //鼠标盘旋的颜色
this.errorBorder,   //错误的边框掩饰
this.focusedBorder,     //聚焦的边框样式
this.focusedErrorBorder,    //聚焦的错误的边框央视
this.disabledBorder,    //禁止时的边框样式
this.enabledBorder,     //激活时的边框央视
this.border,    //装饰容器的形状边框
this.enabled = true,    //是否允许其他提示
this.semanticCounterText,   //语义文字提示
this.alignLabelWithHint,    //多行时文本对齐