flutter 表单组件TextField、TextFormField使用

属性介绍

属性 说明
controller 控制器,可以控制 textField 的输入内容,也可以监听 textField 改变
focusNode 焦点控制,
decoration textField 装饰
keyboardType TextInputType,键盘类型
textCapitalization 大小写,默认为 TextCapitalization.none
style 字体样式
strutStyle 字体的布局样式
textAlign 文字对齐方式,默认为 TextAlign.start
textAlignVertical 文字纵轴对齐方式
textDirection TextDirection.ltr 是居左,TextDirection.rtl 是居右,和 textAlign 效果一致
readOnly 只读属性,默认为 false
toolbarOptions 长按时弹出的按钮设置,(如赋值,粘贴,全部选中等)
showCursor 是否显示光标,默认为 true
autofocus 是否自动聚焦,默认为 false
obscuringCharacter 加密输入时的替换字符,默认为 '•'
obscureText 是否加密,默认为 false
autocorrect 是否自动更正,默认为 true
smartDashesType SmartDashesType 智能替换破折号,例如连续输入三个'-' 会自动替换成一个'------',当 obseretext == true 时,smartDashesType 默认不可用
smartQuotesType SmartQuotesType 智能替换引号,根据文字情况智能替换为左引号或者右引号,当 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可以了解
buildCounter InputDecorator.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");
          },
        )
        )
        
      ],
    )
相关推荐
freflying11196 小时前
使用jenkins构建Android+Flutter项目依赖自动升级带来兼容性问题及Jenkins构建速度慢问题解决
android·flutter·jenkins
机器瓦力8 小时前
Flutter应用开发:对象存储管理图片
flutter
江上清风山间明月16 小时前
Flutter最简单的路由管理方式Navigator
android·flutter·ios·路由·页面管理·navigator
weixin_4111918416 小时前
FlutterAssetsGenerator插件的使用
flutter
神秘_博士1 天前
自制AirTag,支持安卓/鸿蒙/PC/Home Assistant,无需拥有iPhone
arm开发·python·物联网·flutter·docker·gitee
陈皮话梅糖@1 天前
Flutter 网络请求与数据处理:从基础到单例封装
flutter·网络请求
陈皮话梅糖@2 天前
深入解析 Flutter Riverpod:从原理到实战
flutter·riverpod
yujunlong39192 天前
android,flutter 混合开发,通信,传参
android·flutter·混合开发·enginegroup
陈皮话梅糖@2 天前
如何使用 Flutter DevTools 和 PerformanceOverlay 监控性能瓶颈
flutter·性能监控
陈皮话梅糖@2 天前
深入解析 Flutter GetX
flutter·状态管理·getx