iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
Mobile Development

前端工程師的 Flutter 新手村挑戰系列 第 22

【前端的 Flutter 新手村】Day22-單選?複選?Input Widget

和Html input type一樣,Flutter也有他自己的input widget,像是單選框、複選框、on/off切換...

Checkbox複選框

Checkbox本身不會維護任何狀態,當狀態改變時,widget會用onChange回傳狀態值,並用新的值去更新Checkbox的外觀。
Checkbox的狀態值更改時會用onChanged回傳新的布林狀態,預設為false。當onChanged執行回傳時會使用State.setState的方法更新父級StatefulWidget的狀態,以便重建更新父級。

Checkbox(
  value: _value,
  onChanged: (bool newValue) {
    setState(() {
      _value = newValue;
    });
  },
)

如果onChanged回傳值為null,則該複選框將顯示為禁用狀態。

通常Checkbox在畫面中不會只有他自己,還會伴隨著文字呈現,變成是一個帶有標籤的複選框,在Flutter裡我們不需要自己另外拼湊text或是column來做,直接使用CheckboxListTile就可以輕鬆達到這個樣式,還可以加上icon:

CheckboxListTile(
  title: const Text('標籤'),
  value: _value != 1,
  onChanged: (bool newValue) {
    setState(() { _value = newValue ? 10 : 1; });
  },
  secondary: const Icon(Icons.hourglass_empty),
),

Radio單選框

和Checkbox一樣,Radio同樣不會維護任何狀態,並用onChange回傳狀態值。當groupValuevalue相符時,該Radio就是被選擇的狀態。

Radio(
  value: MyChoices.A,
  groupValue: _value,
  onChanged: (MyChoices newValue) {
    setState(() { _value = newValue; });
  },
),

每個Radio的value我們可以使用enum來定義:

enum MyChoices { A, B }

Radio也有對應的ListTile可以拿來做成標籤選項,那就是RadioListTile

RadioListTile<MyChoices>(
  title: const Text('Choice A'),
  value: MyChoices.A,
  groupValue: _value,
  onChanged: (MyChoices newValue) { setState(() { _value = newValue; }); },
)

Switch的概念也是一樣的,這邊就不多贅述了,想了解的話可以參考官網:

  • Switch:https://api.flutter.dev/flutter/material/Switch-class.html)
  • SwitchListTile:https://api.flutter.dev/flutter/material/SwitchListTile-class.html

上一篇
【前端的 Flutter 新手村】Day21-滑動你的螢幕跟列表項目說掰掰-Dismissible Widget
下一篇
【前端的 Flutter 新手村】Day23-連假前來談談一些有用的Responsive widget
系列文
前端工程師的 Flutter 新手村挑戰30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言