Flutter form 的表单 input

点击空白处收起键盘

// 使用 GestureDetector 包裹 Scaffold，使得点击空白处时收起键盘
GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {FocusScope.of(context).requestFocus(FocusNode());},
    child:
);

Flutter 常用表单组件介绍

// Flutter 提供了丰富的表单组件，以下为常用组件介绍：
// 1. TextField：常用于输入文本，如单行或多行文本框。
// 2. CheckBox：常用于多选场景。
// 3. Radio：常用于单选场景。
// 4. Switch：常用于开关选择场景。
// 5. CheckboxListTile、RadioListTile、SwitchListTile：带标题、子标题等的多选、单选、开关组件。
// 6. Slide：滑块选择组件。

TextField 文本框组件详解

// TextField 是 Flutter 中常用的文本输入组件，具有以下常见属性：
// maxLines：定义文本框最大行数，设置此参数可以使文本框支持多行输入。
// onChanged：文本内容改变时触发的回调事件。
// decoration：配置文本框的外观，例如提示文本、边框等。
// hintText：提示文本，类似 HTML 中的 placeholder。
// border：配置文本框的边框样式，常与 OutlineInputBorder 配合使用。
// labelText、labelStyle：定义文本框前的标签文字和样式。
// obscureText：当设置为 true 时，文本框为密码框，输入的内容会被遮蔽。
// controller：控制器，常与 TextEditingController 配合使用，可以设置文本框的初始值。

Checkbox、CheckboxListTile 多选框组件详解

// Checkbox 是多选框组件，具有以下常见属性：
// value：表示当前的选中状态，true 表示选中，false 表示未选中。
// onChanged：选中状态改变时触发的回调事件。
// activeColor：选中时的背景颜色。
// checkColor：选中时内部对号的颜色。
// CheckboxListTile 是带有标题、子标题等的多选框组件，除了 Checkbox 的属性外，还增加了如下属性：
// title、subtitle：主标题和子标题文本。
// secondary：左侧的图标或图片。
// selected：是否选中，影响标题和子标题的颜色。

Radio、RadioListTile 单选按钮组件详解

// Radio 是单选按钮组件，常见属性如下：
// value：单选项的值。
// onChanged：选中状态改变时触发的回调事件。
// activeColor：选中时的背景颜色。
// groupValue：表示当前组的值，用于判断哪个 Radio 是被选中的。
// RadioListTile 是带有标题、子标题等的单选按钮组件，基本属性与 Radio 相似，但增加了如 title、subtitle、secondary 等属性。

Switch 开关组件

// Switch 是开关组件，常用于表示开启或关闭状态。主要属性如下：
// value：当前的开关状态。
// onChanged：状态改变时触发的回调事件。
// activeColor：开启状态时的背景颜色。

表单验证及正则表达式

// Flutter 中可以使用正则表达式来进行表单验证。以下为常用的正则表达式及表单验证规则：
// 1. 使用 RegExp 对象来定义正则表达式。如验证是否为中文：RegExp(r'[\u4e00-\u9fa5]')
// 2. 使用 inputFormatters 属性来为文本框设置输入格式规则。
// 例如：
// - 只允许输入字母：WhitelistingTextInputFormatter(RegExp('[a-zA-Z]'))
// - 只允许输入数字：WhitelistingTextInputFormatter.digitsOnly
// - 只允许输入小数：WhitelistingTextInputFormatter(RegExp("[0-9.]"))
// - 限制最大输入长度：LengthLimitingTextInputFormatter(5)
// - 只允许输入汉字、字母或数字：WhitelistingTextInputFormatter(RegExp("[a-zA-Z]|[\u4e00-\u9fa5]|[0-9]"))

TextField表单组件使用案例 代码实现

// 示例：使用 TextField 创建不同的文本输入框

// 1. 带默认值的文本框
TextField(
    decoration: InputDecoration(hintText: '用户名'),
    controller: TextEditingController(text: defaultText)
),

// 2. 带按钮的文本框，点击按钮会更改文本框的值
RaisedButton(
    child: Text('按钮'),
    onPressed: () {
        setState(() {
            defaultText = '666';
        });
    }
),

// 使用 SizedBox 来控制组件之间的间距
SizedBox(height:5),

// 3. 带边框的文本框
TextField(
    decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder())
),

SizedBox(height:5),

// 4. 带标签和红色标签样式的文本框
TextField(
    decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: '用户名',
        labelStyle: TextStyle(color: Colors.red)
    )
),

SizedBox(height:5),

// 5. 密码文本框，输入内容被隐藏
TextField(
    obscureText: true,
    decoration: InputDecoration(hintText: '输入密码', border: OutlineInputBorder())
),

SizedBox(height:5),

// 6. 多行文本框
TextField(
    maxLines: 4,
    decoration: InputDecoration(hintText: '用户名', border: OutlineInputBorder())
),

Flutter Checkbox 示例代码

// 示例：使用 Checkbox 和 CheckboxListTile 创建多选框

// 简单的 Checkbox
Checkbox(
    value: checkFlag,
    onChanged: (val) {
        setState(() {
            checkFlag = val;
        });
    }
),

// Checkbox 结合 Row 使用，带文本描述
Row(
    children: <Widget>[
        Checkbox(value: checkFlag, onChanged: (val) {
            setState(() {
                checkFlag = val;
            });
        }),
        Text('123'),
    ]
),

// 使用 CheckboxListTile，带有主标题、副标题和图标
CheckboxListTile(
    secondary: Icon(Icons.home),
    title: Text('123'),
    subtitle: Text('456'),
    value: checkFlag,
    onChanged: (val) {
        setState(() {
            checkFlag = val;
        });
    }
),

Flutter Radio 示例代码

// 示例：使用 Radio 和 RadioListTile 创建单选按钮

// 使用 Row 布局的 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，带有主标题、副标题和图标
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;
        });
    }
),