Flutter學習-9-2 checkbox和CheckboxListTile組件

 一、checkbox 複選框

check為複選框，有些時候可能不只要選擇一個選項，而是需要選擇多個選項，此時就可以利用到複選框這個部件。每個複選框是獨立的元件，基本上它的屬性value就只有「true」，畫面上顯示為打勾，和屬性為「false」，畫面沒有顯現打勾。

首先，vaue的屬性值設為true，那畫面中複選框就會打勾，相反的vaue的屬性值為false，就沒有勾。只是此按鍵的目的在透過打v和不打v，來控制程式中，要不要選擇此選項，因此不會把它設成固定值，而是設成一個變數，這樣就可以透過控制這個變數來改變checkbox的狀態。如:

bool _checkboxSelected = true; //複選開關狀態的變數,預設為true

我們可以在任何一個地方，寫程式來改變這個值，但最常會用到需要改變，基本上就是這個switch  開關按鈕的onchange:(value){}裡，當點選時，switch  開關會傳一個值給onchange裡的value，打勾時，value為true，相反的沒有打勾時，valus為false。因此只要在改變時，將原本value的變數設為這個checkbox現在拉動的狀態傳回來的value值，並在這裡設上setState，那就可以將畫面中switch  開關按鈕的狀態更新。延續上面的變數checkboxSelected，可以寫成下列的寫法:

onChanged: (value) {
  //點擊時的回調行動
  print('Checkbox現在的狀態是$value');
  setState(() {
    _checkboxSelected = value!;  //設定點擊時，_checkboxSelected變為選中的valus值
  });
},

要特別注意是，checkbox傳回來的value值類型為bool? 不能為空，因此_checkboxSelected = value!這段程式的value後要加!號，告知這個程式這個值永遠不為空，否則程式會報錯。

或者在宣告變數時，類型用以下的寫法

bool? _checkboxSelected = true; //複選開關狀態的變數,預設為true

其它的屬性如下:

const Checkbox({
  Key? key,  //部件的key
  required this.value,  //此部件的值，一開始設定的為初始值
  this.tristate = false, //複選框的value值會本為true和false，加上ture後，會多一個null
  required this.onChanged, //狀態改變時要執行的回調程式
  this.mouseCursor, 
  this.activeColor,  //true時的框的顏色
  this.fillColor,   //選中時填充的顏色
  this.checkColor, //選中時勾的顏色
  this.focusColor,
  this.hoverColor,
  this.overlayColor,
  this.splashRadius,
  this.materialTapTargetSize,  //有效的點擊範圍
  this.visualDensity,  //
  this.focusNode,
  this.autofocus = false,
  this.shape,  //外框形狀
  this.side,  //邊線設定

範例:

Checkbox(
  value: _checkboxSelected, //checkbox的值
  activeColor: Colors.red,
  //選中時的颜色
  onChanged: (value) {
    //點擊時的回調行動
    print('Checkbox現在的狀態是$value');
    setState(() {
      _checkboxSelected = value;  //設定點擊時，_checkboxSelected變為選中的valus值
    });
  },
  //可點擊的範圍，.padded較大.shrinkWrap較小，大概是原有0.8倍大小
  materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
  //設定checkbox外形
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(5.0))),
  //設定checkbox的線段
  side: BorderSide(
      color: Colors.black, width: 2, style: BorderStyle.solid),
),

二、CheckboxListTile 有標題的複選框

CheckboxListTile 與Checkbox差不多，主要是多了title、subtitle。如果需要在開關按鈕前設定文字說明它的用途，或用文字顯示它目前的狀態就可以用到title和subtitle。title是滑動前的文字說明，而subtitle則是文字說明下面的小標題。

const CheckboxListTile({
  Key? key,
  required this.value, //此部件的值，一開始設定的為初始值
  required this.onChanged, //狀態改變時要執行的回調程式
  this.activeColor,  //被選取時框的顏色
  this.checkColor,  //被選取時勾的顏色
  this.tileColor,  //主標題顏色
  this.title,  //主標題
  this.subtitle, //副標題
  this.isThreeLine = false,  //告知文字是否為三行，title和subtitle要一起使用，否則會報錯
  this.dense,  //是否為垂直密集列表的一部份，真的話會成為一部份,因此縮小
  this.secondary, //圖標
  this.selected = false,
  this.controlAffinity = ListTileControlAffinity.platform,  //文字、圖標、複選框的排列顺序
  this.autofocus = false,
  this.contentPadding,
  this.tristate = false,
  this.shape,  //外框形狀
  this.checkboxShape, //複選框的形狀
  this.selectedTileColor,
  this.side, //邊線設定
  this.visualDensity,  //畫面適應方式一般為 VisualDensity.comfortable，適手機情況自行調整
  this.focusNode,
  this.enableFeedback,

範例:

Row(
  children: [
    SizedBox(
      //利用sizebox限制畫面大小，否則會超出營幕
      width: 100,
      child: CheckboxListTile(
        value: _drinksize_big,
        activeColor: Colors.red, //選中時的颜色
        onChanged: (value) {
          //更新畫面值
          setState(() {
            _drinksize_big = value!;
          });
        },
        title: Text("大杯"),
      ),
    ),
    SizedBox(
      width: 100,
      child: CheckboxListTile(
        value: _drinksize_middle,
        activeColor: Colors.blue,
        //選中時的颜色
        onChanged: (value) {
          setState(() {
            _drinksize_middle = value!;
          });
        },
        title: Text("中杯"),
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0))),
      ),
    ),
    SizedBox(
      width: 100,
      child: CheckboxListTile(
        visualDensity: VisualDensity.comfortable,
        value: _drinksize_small,
        activeColor: Colors.red,
        //選中時的颜色
        onChanged: (value) {
          setState(() {
            _drinksize_small = value!; 
            print(value);
          });
        },
        title: Text("小杯"),
      ),
    ),
  ],
),