Flutter 中的表单

点击空白 input 失去焦点， 在页面的Scaffold外层加

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {FocusScope.of(context).requestFocus(FocusNode());},
    child:
);

 

一、Flutter 常用表单介绍

  Flutter 中常见的表单有 TextField 单行文本框，TextField 多行文本框、CheckBox、Radio、Switch  CheckboxListTile、RadioListTile、SwitchListTile、Slide.

 

二、TextField 文本框组件

  TextField 表单常见属性：

  maxLines  设置此参数可以把文本框改为多行文本框

  onChanged  文本框改变的时候触发的事件

  decoration

  hintText 类似 html 中的 placeholder

  border  配置文本框边框 OutlineInputBorder 配合使用

  labelText lable 的名称

  labelStyle 配置 lable 的样式

  obscureText  把文本框框改为密码框

  controller  controller 结合 TextEditingController()可以配置表单默认显示的内容

 

三、Checkbox、CheckboxListTile 多选框组件

 

  Checkbox 常见属性：

  value  true 或者 false

  onChanged  改变的时候触发的事件

  activeColor  选中的颜色、背景颜色

  checkColor  选中的颜色、Checkbox 里面对号的颜色

 

CheckboxListTile 常见属性：

  valuetrue 或者 false

  onChanged  改变的时候触发的事件

  activeColor  选中的颜色、背景颜色

  title  标题

  subtitle  二级标题

  secondary  配置图标或者图片

  selected  选中的时候文字颜色是否跟着改变 

 

四、Radio、RadioListTile 单选按钮组件

  Radio 常用属性：

    value 单选的值

   onChanged 改变时触发

   activeColor  选中的颜色、背景颜色

   groupValue  选择组的值

   RadioListTile 常用属性：

 

  RadioListTile 常用属性

    value  true 或者 false

    onChanged  改变的时候触发的事件

    activeColor  选中的颜色、背景颜色

    title  标题

    subtitle  二级标题

    secondary  配置图标或者图片

    groupValue  选择组的值 

 

五、开关 Switch

  value  单选的值

  onChanged  改变时触发

  activeColor  选中的颜色、背景颜色

 

表单验证  正则格式  RegExp(r'[\u4e00-\u9fa5]')

inputFormatters: [
  WhitelistingTextInputFormatter(RegExp('[a-zA-Z]')), //只允许输入字母
  WhitelistingTextInputFormatter.digitsOnly, // 只允许输入数字
  WhitelistingTextInputFormatter(RegExp("[0-9.]")), //允许输入小数
  LengthLimitingTextInputFormatter(5), // 限制字符串长度
  WhitelistingTextInputFormatter(RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]")) //只能输入汉字或者字母或数字
],

 

案例代码

 

 TextField(decoration: InputDecoration(hintText: '用户名'), controller: TextEditingController(text: defaultText)),
          RaisedButton(child: Text('按钮'), onPressed: () {setState(() {defaultText = '666';});},),
          SizedBox(height:5),
          TextField(decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder()),),
          SizedBox(height:5),
          TextField(decoration: InputDecoration(border: OutlineInputBorder(), labelText: '用户名', labelStyle: TextStyle(color: Colors.red)), ),
          SizedBox(height:5),
          TextField(obscureText: true, decoration: InputDecoration(hintText: '输入密码', border: OutlineInputBorder()),),
          SizedBox(height:5),
          TextField(maxLines: 4, decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder()),),
//          多选框
          Checkbox(value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });},),
          Row(
            children: <Widget>[
              Checkbox(value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });},),
              Text('123'),
            ],
          ),
          CheckboxListTile(secondary: Icon(Icons.home), title: Text('123'), subtitle: Text('456'), value: checkFlag, onChanged: (val) { setState(() { checkFlag = val; });}),

          // Radio
          Row(
            children: <Widget>[
              Text('男:'),
              Radio(value: 1, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
              Text('女:'),
              Radio(value: 2, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
              Text('保密:'),
              Radio(value: 3, onChanged: (val) { setState(() {radioFlag = val;});}, groupValue: radioFlag,),
            ],
          ),
          RadioListTile(value: 1, title: Text('123'), subtitle: Text('456'), secondary: Icon(Icons.home), groupValue: radioFlag, onChanged: (val) { setState(() {radioFlag = val;});}),
          RadioListTile(value: 2, title: Text('123'), subtitle: Text('456'), secondary: Icon(Icons.home), groupValue: radioFlag, onChanged: (val) { setState(() {radioFlag = val;});}),