flutter 表单组件TextField、TextFormField使用

发布时间:2023年12月26日

属性介绍

属性说明
controller控制器,可以控制 textField 的输入内容,也可以监听 textField 改变
focusNode焦点控制,
decorationtextField 装饰
keyboardTypeTextInputType,键盘类型
textCapitalization大小写,默认为 TextCapitalization.none
style字体样式
strutStyle字体的布局样式
textAlign文字对齐方式,默认为 TextAlign.start
textAlignVertical文字纵轴对齐方式
textDirectionTextDirection.ltr 是居左,TextDirection.rtl 是居右,和 textAlign 效果一致
readOnly只读属性,默认为 false
toolbarOptions长按时弹出的按钮设置,(如赋值,粘贴,全部选中等)
showCursor是否显示光标,默认为 true
autofocus是否自动聚焦,默认为 false
obscuringCharacter加密输入时的替换字符,默认为 ‘?’
obscureText是否加密,默认为 false
autocorrect是否自动更正,默认为 true
smartDashesTypeSmartDashesType 智能替换破折号,例如连续输入三个’-’ 会自动替换成一个’——',当 obseretext == true 时,smartDashesType 默认不可用
smartQuotesTypeSmartQuotesType 智能替换引号,根据文字情况智能替换为左引号或者右引号,当 obseretext == true 时,SmartQuotesType 默认不可用
enableSuggestions是否在用户输入时显示输入建议,此标志仅影响Android,默认为 true
maxLines最大行数
minLines最小行数
expands是否填充父控件,默认为 false
maxLength最大长度
maxLengthEnforced是否强制限制,或者只提供字符计数器和警告,默认为 true
onChanged输入框文字改变回调
onEditingComplete输入框完成回调
onSubmitted提交按钮点击回调
inputFormatters格式化输入,注意这里比 onChanged 先执行
enabled是否可用
cursorWidth光标宽度,默认为 2.0
cursorRadius光标圆角
cursorColor光标颜色
selectionHeightStyle选中高度样式,默认为 ui.BoxHeightStyle.tight
keyboardAppearance键盘外观,此设置仅适用于iOS设备,iOS的白色以及黑色风格键盘
scrollPadding滚动后距离边缘的距离,默认为 EdgeInsets.all(20.0)
dragStartBehavior启动阻力,默认为 DragStartBehavior.start
enableInteractiveSelection///默认为True,如果为false,则大多数辅助功能支持选择文本、复制和粘贴,移动插入符号将被禁用。
onTap点击事件
mouseCursor鼠标悬停,Web可以了解
buildCounterInputDecorator.counter 自定义小工具
scrollController滚动控制器
scrollPhysics滚动物理效果
autofillHints自动填充

示例代码

     children: [
        const Text("提货点:"),
        //这里只能写在容器container中才可以
        Container(
           width: 500.w,
          child: TextField(
          decoration: const InputDecoration(hintText: "请输入提货点",
            // border: OutlineInputBorder(),
            // 取消自带的下边框
                // border: InputBorder.none,
                // 底部下边框
            enabledBorder:  UnderlineInputBorder(
                  borderSide: BorderSide(color: Color.fromRGBO(235, 229, 229, 1),width: 1),
                
                ),
            // 选中时候下边框
            focusedBorder: UnderlineInputBorder(
                  borderSide: BorderSide(color: Color.fromRGBO(228, 225, 225, 1),width: 1)
                )
          ),
          controller:_username, //默认显示的文字
          onChanged: (value){
            setState((){
              thText=value;
            });
            print("提货点名称$thText");
          },
        )
        )
        
      ],
    )
文章来源:https://blog.csdn.net/u010843503/article/details/135222660
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。