Flutter - 表单录入widget - TextField 封装

程序员文章站 2022-03-11 10:57:04

...

##### demo 地址: https://github.com/iotjin/jh_flutter_demo

对TextField 简单封装

JhTextField

JhFormInputCell

JhFormSelectCell

JhLoginTextField

JhSetCell

###有以下几种效果：

Flutter - 表单录入widget - TextField 封装

#使用方法：

JhTextField

JhTextField(hintText: "默认样式，没有边框",),
SizedBox(height: 10),
JhTextField(text: "text赋初值,不可编辑",enabled: false,),
SizedBox(height: 10),
JhTextField(hintText: "限制 长度5，0-9，phone键盘",
    keyboardType:TextInputType.phone,
    inputFormatters:[WhitelistingTextInputFormatter(RegExp("[0-9]")) ,
      LengthLimitingTextInputFormatter(5)]),
SizedBox(height: 10),
JhTextField(hintText: "自定义inputFormatters 长度10，a-zA-Z0-9",
    inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-zA-Z0-9]")) ,
      LengthLimitingTextInputFormatter(10)]),
SizedBox(height: 10),
JhTextField(hintText:'左侧自定义，maxLength=15',leftWidget: Container(color: Colors.yellow,width: 100,),maxLength: 15,),
SizedBox(height: 10),
JhTextField(hintText:'右侧自定义，maxLength=15',rightWidget: Container(color: Colors.yellow,width: 100,),maxLength: 15,),
SizedBox(height: 10),
JhTextField(hintText: "设置maxLines=5，设置边框",maxLines:5,
  border: OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    borderSide: BorderSide(
      width: 1,
      style: BorderStyle.none,
    ),
  ),
),
SizedBox(height: 10),
JhTextField(hintText: "默认1行，自动换行，最多5行，100字符",
  border: OutlineInputBorder(
        borderRadius: const BorderRadius.all(Radius.circular(4)),
        borderSide: BorderSide(
          width: 1,
          style: BorderStyle.none,
        ),
      ),
),

JhFormInputCell


JhFormInputCell(hintText: "默认样式，不设置左标题",inputCallBack: (value){
  print(value);
},),
JhFormInputCell(title: "左标题",hintText: "默认1行,最多5行,100字符,标题垂直居中",),
JhFormInputCell(title: "左标题",text: "text赋初值,不可编辑",enabled: false),
JhFormInputCell(title: "左标题",hintText: "标题加红星",showRedStar: true,),
JhFormInputCell(title: "左标题",hintText: "红色标题",titleStyle:TextStyle(fontSize: 15.0,color: Colors.red,),),
JhFormInputCell(title: "左标题",text: "红色文字",textStyle:TextStyle(fontSize: 15.0,color: Colors.red,),),
JhFormInputCell(title: "左标题",text: "text靠右",textAlign: TextAlign.right,),
JhFormInputCell(title: "左标题",hintText: "限制 长度5，0-9，phone键盘",keyboardType:TextInputType.phone,
    inputFormatters:[WhitelistingTextInputFormatter(RegExp("[0-9]")) ,
      LengthLimitingTextInputFormatter(5)]),

JhFormInputCell(title: "左标题",hintText: "自定义inputFormatters 长度10，a-zA-Z0-9",
    inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-zA-Z0-9]")) ,
      LengthLimitingTextInputFormatter(10)]),
JhFormInputCell(hintText:'左侧自定义，maxLength=15',
  leftWidget: Container(color: Colors.yellow,width: 92,height: 45,),
  maxLength: 15,),
JhFormInputCell(title: "左标题",hintText:'右侧自定义',
  rightWidget: Container(color: Colors.yellow,width: 150,height: 45,),
  maxLength: 15,
),

JhFormInputCell(title: "左标题",hintText: '',enabled: false,
  rightWidget:
  CupertinoSwitch(
    value: _switchSelected,
    onChanged: (value) {
      setState(() {
        _switchSelected = value;
      });
    },
  ),
),
SizedBox(height: 10),
JhFormInputCell(title: "左标题",hintText: "设置边框,隐藏底部线",hiddenLine: true,
  border: OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    borderSide: BorderSide(width: 1,style: BorderStyle.none,),
  ),
),
SizedBox(height: 10),
JhFormInputCell(title: "左标题",hintText: "设置maxLines=5，设置边框，显示红星和最大长度，title顶部对齐",
  maxLines:5,maxLength: 50,showMaxLength: true,hiddenLine: true,showRedStar: true,topAlign: true,
  border: OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    borderSide: BorderSide( width: 1,style: BorderStyle.none,),
  ),
),

JhFormSelectCell

JhFormSelectCell(clickCallBack:(){
print("点击cell");
}),
JhFormSelectCell(title: "左标题"),
JhFormSelectCell(title: "左标题",text: "text赋初值"),
JhFormSelectCell(title: "左标题",hintText: "标题加红星",showRedStar: true,),
JhFormSelectCell(title: "左标题",hintText: "红色标题",titleStyle:TextStyle
(fontSize: 15.0,color: Colors.red,),),
JhFormSelectCell(title: "左标题",text: "红色文字",textStyle:TextStyle(fontSize: 15.0,color: Colors.red,),),
JhFormSelectCell(title: "左标题",text: "text靠右",textAlign: TextAlign.right,),
JhFormSelectCell(hintText:'左侧自定义',
  leftWidget: Container(color: Colors.yellow,width: 92,height: 45,),
  ),
JhFormSelectCell(title: "左标题",hintText:'右侧自定义',
  rightWidget: Container(color: Colors.yellow,width: 150,height: 45,),
  ),
JhFormSelectCell(title: "左标题",hintText:'隐藏箭头',
  rightWidget: Container(color: Colors.yellow,width: 168,height: 42,),hiddenArrow: true,
),

SizedBox(height: 10),
JhFormSelectCell(title: "左标题",hintText: "设置边框,隐藏底部线",hiddenLine: true,
  border: OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    borderSide: BorderSide(width: 1,style: BorderStyle.none,),
  ),
),
SizedBox(height: 10),
JhFormSelectCell(title: "左标题",hintText: "设置边框，显示红星，title顶部对齐",
  hiddenLine: true,showRedStar: true,topAlign: true,
  border: OutlineInputBorder(
    borderRadius: const BorderRadius.all(Radius.circular(4)),
    borderSide: BorderSide( width: 1,style: BorderStyle.none,),
  ),
),

JhLoginTextField

JhLoginTextField(text: "text赋初值",hintText: "请输入",),
    JhLoginTextField(hintText: "输入时不显示删除按钮",),
    JhLoginTextField(hintText: "输入时显示删除按钮",isShowDeleteBtn: true,),
    JhLoginTextField(hintText: "密码样式(右侧默认图片)",isShowDeleteBtn: true,isPwd: true,),
    JhLoginTextField(hintText: "默认只限制长度20",isShowDeleteBtn: true),
    JhLoginTextField(hintText: "自定义inputFormatters 长度5，a-zA-Z0-9",isShowDeleteBtn: true,
     inputFormatters:[WhitelistingTextInputFormatter(RegExp("[a-zA-Z0-9]")) ,
      LengthLimitingTextInputFormatter(5)]),
    JhLoginTextField(hintText: "限制 长度5，0-9，phone键盘",isShowDeleteBtn: true,
        keyboardType:TextInputType.phone,
        inputFormatters:[WhitelistingTextInputFormatter(RegExp("[0-9]")) ,
          LengthLimitingTextInputFormatter(5)]),

//                JhLoginTextField(hintText: "左侧添加按钮",leftWidget: Icon(Icons.perm_identity)),

    JhLoginTextField(hintText:'左侧自定义',
      leftWidget: Container(color: Colors.yellow,width: 50,),),
    JhLoginTextField(hintText:'右侧自定义',rightWidget: Container(color: Colors.yellow,width: 100,height: 45,)),
    JhLoginTextField(hintText: "请输入手机号",leftWidget: Container(width: 50,child: Center(child:Text("+86"))),keyboardType:TextInputType.phone, ),
    JhLoginTextField(text: _name,hintText: "请输入用户名",labelText:'用户名',leftWidget: Icon(Icons.person),isShowDeleteBtn: true,
      inputCallBack: (value) => _name=value
    ),
    JhLoginTextField(text: _pwd,hintText: "请输入密码(添加右侧密码图片)",leftWidget: Icon(Icons.lock),isShowDeleteBtn: true,
        isPwd: true,pwdClose: 'assets/images/ic_pwd_close.png',pwdOpen: 'assets/images/ic_pwd_open.png',

      inputCallBack: (value) => _pwd =value
    ),
    JhLoginTextField(hintText: "验证码",maxLength: 6,
        keyboardType:TextInputType.number,
        rightWidget:
        JhCountDownBtn(
            showBorder: true,
            getVCode:()async {
              return true;
            }
        ),
    ),

JhSetCell

JhSetCell(title: '左标题',text: '右侧文字',clickCallBack: (){
    print('点击cell');
  },),
  JhSetCell(title: '左标题左标题',text: '右侧文字',),
  JhSetCell(title: '左标题左标题左标题',text: '右侧文字',space: 150,),

  JhSetCell(leftImgPath: "assets/images/shezhi.png", title: '设置',text: '右侧文字'),
  JhSetCell(leftImgPath: "assets/images/shezhi.png", title: '关于',text: '有新版本',textStyle: TextStyle(fontSize: 15.0,color: Colors.red),),
  JhSetCell(leftImgPath: "assets/images/shezhi.png", title: '左侧文字红色',titleStyle: TextStyle(fontSize: 15.0,color: Colors.red),),
  JhSetCell( title: '左标题',text: '隐藏箭头',hiddenArrow: true,),

  JhSetCell(title: '左标题',text:'左侧自定义',
    leftWidget: Container(color: Colors.yellow,width: 35,height: 35,),
  ),
  JhSetCell(title: "左标题",text:'右侧自定义',
    rightWidget: Container(color: Colors.yellow,width: 150,height: 45,),
  ),
  SizedBox(height: 5),
  JhSetCell(leftImgPath: "assets/images/shezhi.png",title: "左标题",text:'隐藏底部线', hiddenLine: true,),
  SizedBox(height: 5),
  JhSetCell(leftImgPath: "assets/images/shezhi.png",title: "左标题",text:'隐藏底部线', hiddenLine: true,),

Flutter - 表单录入widget - TextField 封装

JhTextField

JhFormInputCell

JhFormSelectCell

JhLoginTextField

JhSetCell

17.Flutter学习之路常用表单TextField、CheckBox等组件

Flutter自定义Widget实现自带删除键的TextField

Flutter 组件之表单组件TextField、CheckBox、Radio、Switch

Flutter - Form简单封装 - 单行多行TextField

Flutter入门疑难杂症：TextField 双击报错：No Media Query widget found._OverlayEntryWidget widgets require a Media

Flutter - 表单录入widget - TextField 封装

Flutter 基础（二）基础 widget Text Image TextField Button