iT邦幫忙

2021 iThome 鐵人賽

DAY 10
0

表單組件

使用表單處理使用者輸入是常見的應用的基礎功能,使用這些表單組件可以應用在註冊、登入、電商…需要使用者輸入資料的情境,因此我們今天就來練習這些常在表單上會出現的widget吧。

常用表單組件

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

TextField

TextField 可輸入文字功能的組件。

在大部份的表單類的組件,會使用onChanged屬性監控輸入的資料是否發生變動,且使用StatefulWidgetState記錄異動的資料,其中我們也可以使用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";
          });
        },
      ),
    );

TextField

TextFormField

TextFormFieldTextField也類似,不過它額外提供了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;
        },
      ),
    );

textformfield

若是需要有保密性的輸入資料,也可以將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;
        },
      ),
    );

obsecure

Switch

Switch組件提供一個控制兩種狀態的切換按鈕。

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

form_switch

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"),
      ],
    );

form_checkbox

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("選項二"),
      ],
    );

form_radio

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(),
    );

form_dropdown

小結

練習成果

今天學習了在表單功能上常見的組件,以及如何透過 State 記錄使用者輸入的資料,我們在後面章節會在介紹到 Http 的操作方式。


上一篇
Flutter體驗 Day 9-Button組件
下一篇
Flutter體驗 Day 11-日期時間組件
系列文
Flutter / Dart 跨平台App開發體驗30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言