表单组件

使用表单处理使用者输入是常见的应用的基础功能，使用这些表单组件可以应用在注册、登入、电商…需要使用者输入资料的情境，因此我们今天就来练习这些常在表单上会出现的widget吧。

常用表单组件

• TextField
• TextFormField
• Switch
• Radio
• CheckBox
• DropdownButton

TextField

TextField 可输入文字功能的组件。

在大部份的表单类的组件，会使用onChanged属性监控输入的资料是否发生变动，且使用StatefulWidget的State记录异动的资料，其中我们也可以使用TextEditingController设定controller属性，使用控制器处理资料，例如重置按钮的功能。

    var textField = Container(
      margin: EdgeInsets.all(20.0),
      child: TextField(
        controller: searchController,
        decoration: InputDecoration(
          hintText: 'Search',
        ),
        onChanged: (String text) {
          setState(() {
            value = "Search: $text";
          });
        },
      ),
    );

TextFormField

TextFormField与TextField也类似，不过它额外提供了validator属性，配合 Form widget 的使用，可以在表单送出时用来验证输入的资料格式是否正确。

    var nameTextFiled = Container(
      margin: EdgeInsets.all(20.0),
      child: TextFormField(
        autofocus: true,
        controller: nameController,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: 'Full Name',
        ),
        onChanged: (String text) {
          setState(() {
            value = "Full name: $text";
          });
        },
        validator: (String? value) {
          if (value == null || value.isEmpty) {
            return '姓名不得为空';
          }
          return null;
        },
      ),
    );

若是需要有保密性的输入资料，也可以将obscureText属性设定为true

    var passwordTextFormField = Container(
      margin: EdgeInsets.all(20),
      child: TextFormField(
        obscureText: true,
        decoration: const InputDecoration(
          labelText: 'Password',
        ),
        onChanged: (String text) {
          setState(() {
            value = "Password: $text";
          });
        },
        validator: (String? value) {
          RegExp mobile =
              new RegExp(r"(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,12}$");

          if (value == null || value.isEmpty) {
            return '密码格式不符合为空';
          }

          if (!mobile.hasMatch(value)) {
            return "密码格式不符合";
          }

          return null;
        },
      ),
    );

Switch

Switch组件提供一个控制两种状态的切换按钮。

    var theSwitch = Switch(
      value: isSwitched,
      onChanged: (value) {
        setState(() {
          isSwitched = value;
        });
      },
      activeTrackColor: Colors.yellow,
      activeColor: Colors.orangeAccent,
    );

CheckBox

CheckBox组件可以用来在表单的"多"个提交项目中进行选取。

    var theCheckBox = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Checkbox(
          value: optionsA,
          activeColor: Colors.red, //选中时的颜色
          onChanged: (value) {
            setState(() {
              optionsA = value!;
            });
          },
        ),
        Text("A"),
        Checkbox(
          value: optionsB,
          activeColor: Colors.red, //选中时的颜色
          onChanged: (value) {
            setState(() {
              optionsB = value!;
            });
          },
        ),
        Text("B"),
      ],
    );

Radio

Radio可以用来在表单的"单"个提交项目中进行选取

    var theRadio = Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Radio<String>(
          value: "1",
          groupValue: radioValue,
          onChanged: (value) {
            setState(() {
              radioValue = value;
            });
          },
        ),
        Text("选项一"),
        Radio<String>(
          value: "2",
          groupValue: radioValue,
          onChanged: (value) {
            setState(() {
              radioValue = value;
            });
          },
        ),
        Text("选项二"),
      ],
    );

DropdownButton

DropdownButton 提供下拉式选择的列表功能，需要在items属性提供对应用 DropdownMenuItem。

    var theDropdownButton = DropdownButton(
      value: dropdownValue,
      icon: Icon(Icons.keyboard_arrow_down),
      onChanged: (String? value) {
        print(value);
        setState(() {
          dropdownValue = value!;
        });
      },
      items: items.map((String item) {
        return DropdownMenuItem(
          value: item,
          child: Text(item),
        );
      }).toList(),
    );

小结

练习成果

今天学习了在表单功能上常见的组件，以及如何透过 State 记录使用者输入的资料，我们在後面章节会在介绍到 Http 的操作方式。