Flutter學習-9-4 Radio和RadioListTile

Radio是一單選框，它可以透過設定groupValue: 中的屬性，讓全部Radio有共同的value值，以達到單選的效果。

Radio有三個必要加入的參數，一是value，這是屬於每個Radio自己的value，二是groupValue，這是同一群組的Radio共同有的value值，把它設成同一個 「變數」，則就可以透過這個「變數」來控制那些Radio會被選取，那些不會。第三個是onChanged:(value){}，這個屬性在設定點選時，進行的回調，點選時，會自動的將前面設定的value值當作參數傳進去，此value值的類型為Object?。

對於Radio還要知道的一個知識是當groupValue等於value時，就會被選取，也就是會在圖形中畫面中出現圓圈中有一個點。

因此假如你有1-5個Radio，value的值個別都是1、2、3、4、5，在value是1的單選框中的onChanged裡，如此設定。

onChanged: (value) { 

     groupvalue=value;   

//groupvalue等於這個value，也就是等於1，符合兩個相等的情況，因此這個按鍵就會被選取，又因為groupvalue等於1，其它value等於2  3 4 5的Radio不符合就不被選取。

});

其餘的屬性及方法如下:

const Radio({
  Key? key,
  required this.value,  //此Radio的value，每個value有屬於自己的value
  required this.groupValue, //相同群組Radio共用的變數，需相同。在前面要先設定變數 objects
  required this.onChanged,  //改變時的回調
  this.mouseCursor,  
  this.toggleable = false,
  this.activeColor, //被選中時的顏色
  this.fillColor,  //填充的顏色
  this.focusColor,
  this.hoverColor,
  this.overlayColor,
  this.splashRadius,
  this.materialTapTargetSize,
  this.visualDensity,
  this.focusNode,
  this.autofocus = false,

範例:

Radio(
    value: 1,
    groupValue: drink_groupvalue,
    activeColor:Colors.blue,  //選中時的顏色
    mouseCursor:MouseCursor.defer, //用在滑鼠光標使用，網頁上面。defer是推遲
    materialTapTargetSize:MaterialTapTargetSize.shrinkWrap,  //設定選定目標的大小
    //fillColor: MaterialStateProperty.all(Colors.red), //填充的顏色，與activeColor不能同時使用
    onChanged: (value) {
      drink_groupvalue = value; //drink_groupvalue等於1
      setState(() {}); //更新畫面
    }),
Radio(
    value: 2,
    activeColor:Colors.yellow,
    groupValue: drink_groupvalue,
    onChanged: (value) {
      drink_groupvalue = value; //drink_groupvalue等於2
      setState(() {}); //更新畫面
    }),
Radio(
    value: 3,
    activeColor:Colors.brown,
    groupValue: drink_groupvalue,
    onChanged: (value) {
      drink_groupvalue = value; //drink_groupvalue等於3
      setState(() {});
    }),

二、RadioListTile (有標題屬性的Radio)
使用方法和屬性與Radio幾乎一樣，就是多了title、subtitle、secondary以及與前面有關係的isThreeLine、dense、selected等屬性。
屬性如下:

const RadioListTile({
  Key? key,
  required this.value,
  required this.groupValue,
  required this.onChanged,
  this.toggleable = false,
  this.activeColor,
  this.title,  //說明標題
  this.subtitle, //副標
  this.isThreeLine = false,  /標題是否要占三行空間
  this.dense,  //標題是否要為全部部件的一部份
  this.secondary,  //小圖
  this.selected = false,  // text和icon的color是與activeColor時的颜色相同。
  this.controlAffinity = ListTileControlAffinity.platform,  //標、副標和圖的排列位置
  this.autofocus = false,
  this.contentPadding, //內容內距
  this.shape,  //外形
  this.tileColor,
  this.selectedTileColor,
  this.visualDensity,
  this.focusNode,
  this.enableFeedback,

範例:

SizedBox(
  width: 130, //設定sizebox寬度
  child: RadioListTile(
    value: 1,
    //給予初始值為1
    groupValue: this.status,
    //控制一群RadioList是否亮的值，如果value等於this.status時亮
    onChanged: (value) {
      this._drinksize_text =
          "大杯"; //自設變數，控制點到這個RadioListTile要做的變化
      setState(() {
        this.status = value;
      });
    },
    title: Text("大杯"), //文字設為大杯
    activeColor: Colors.red, //選取時的顏色
    subtitle: Text("副標題"),  //小標
    secondary: Icon(Icons.add), //小圖
    isThreeLine: true,  //文字是否要排成三行
    dense: true,  //文字是否要成為全部組件的一部份
    selected : false,  // text和icon的color是與activeColor時的颜色相同。
    controlAffinity:ListTileControlAffinity.platform, //三個不同組件排列的方式

  ),
),
SizedBox(
  width: 130,
  child: RadioListTile(
    value: 2,
    groupValue: this.status,
    onChanged: (value) {
      this._drinksize_text = "中杯";
      setState(() {
        this.status = value;
      });
    },
    title: Text("中杯"),
  ),
),
SizedBox(
  width: 130,
  child: RadioListTile(
    value: 3,
    groupValue: this.status,
    onChanged: (value) {
      //this._drinksize_text="小杯";
      setState(() {
        this.status = value; //點選以後，groupvalue值因為value為3，所以會變為3
        this._drinksize_text = "小杯";
      });
    },
    title: Text("小杯"),
  ),
),