Flutter基礎-049-RadioListTile

構造方法

const RadioListTile({
    Key key,
    @required this.value, // 當前item所代表的值，
    @required this.groupValue,// radio所在組的值，如果value==groupValue 則為  選中狀態
    @required this.onChanged,// 選中該radio時，回撥該方法
    this.activeColor,// 選中後，核取方塊的顏色
    this.title,  // 主標題   第一行
    this.subtitle,  // 副標題   第二行
    this.isThreeLine = false,   // 是否空出第三行
    this.dense,
    this.secondary, // 右側頂部的widget   一般是個icon，也可以定義成其他
    this.selected = false,// title subtitle secondary是否也採用activeColor的顏色，如果是true預設是activeColor的顏色，但優先順序比較低，各widget也可以設定自己的顏色
    this.controlAffinity = ListTileControlAffinity.platform,
  })
複製程式碼

重要的點：

• 一般radio都有個group，但是我沒找到這裡的Group在哪兒。
• 經研究發現，groupValue可以代表組的值，只是需要與value進行對比，如果value值與groupValue值相同，則處於選中狀態，否則為不選中狀態
• onChanged方法，只有選中該radio時才呼叫
• value和groupValue值不是bool型別的，可以使用泛型指定
• 其他的與上篇的CheckBoxListTile屬性值類似

示例

程式碼

class _MyHomePageState extends State<MyHomePage> {
  int groupValue = 21;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("RadioListTile"),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          RadioListTile<int>(
            value: 1,
            groupValue: groupValue,
            onChanged: (int value) {
              setState(() {
                groupValue = value;
              });
            },
            secondary: Icon(
              Icons.crop_original,
            color: Colors.orange[200],
            ),
            title: new Text("主標題1"),
            subtitle: new Text("副標題1"),
            dense: false,
            activeColor: Colors.green[200], // 指定選中時勾選框的顏色
            isThreeLine: false, // 是否空出第三行
            selected: true,
          ),
          Divider(
            color: Colors.grey[300],
            height: 1,
          ),
          RadioListTile<int>(
            value: 2,
            groupValue: groupValue,
            onChanged: (int value) {
              setState(() {
                groupValue = value;
              });
            },
            secondary: Icon(
              Icons.add_alarm,
            ),
            title: new Text("主標題2"),
            subtitle: new Text("標題副2"),
            dense: false,
            activeColor: Colors.green[200], // 指定選中時勾選框的顏色
            isThreeLine: false, // 是否空出第三行
            selected: true,
          ),
          Divider(
            color: Colors.grey[300],
            height: 1,
          ),
          RadioListTile<int>(
            value: 3,
            groupValue: groupValue,
            onChanged: (int value) {
              setState(() {
                groupValue = value;
              });
            },
            secondary: Icon(
              Icons.add_alarm,
            ),
            title: new Text("主標題3"),
            subtitle: new Text("標題副3"),
            dense: false,
            activeColor: Colors.green[200], // 指定選中時勾選框的顏色
            isThreeLine: false, // 是否空出第三行
            selected: true,
          ),
          Divider(
            color: Colors.grey[300],
            height: 1,
          ),
        ],
      ),
    );
  }
}
複製程式碼