表單組件

使用表單處理使用者輸入是常見的應用的基礎功能，使用這些表單組件可以應用在註冊、登入、電商…需要使用者輸入資料的情境，因此我們今天就來練習這些常在表單上會出現的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 的操作方式。