摘要：控件練習(xí)地址一。單選框中的單選框，和一樣本身沒有狀態(tài)，必須父親有狀態(tài)才能改變值屬性此的值當選擇此的時候的回調(diào)。

flutter控件練習(xí)demo地址：github

flutter 中的單選框 ， 和 Checkbox 一樣 本身沒有狀態(tài)，必須父親有狀態(tài) 才能改變值

value： 此 Radio 的 value 值

onChanged： 當選擇此 radio 的時候 的回調(diào)。 參數(shù)就是 此 value 的值

groupValue： 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設(shè)置為 不選中

activeColor： 選中的顏色

value： 此 Radio 的 value 值

onChanged： 當選擇此 radio 的時候 的回調(diào)。 參數(shù)就是 此 value 的值

groupValue： 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設(shè)置為 不選中

activeColor： 選中的顏色

title： 標題， 具有代表性的就是 Text

subtitle： 副標題（在 title 下面）， 具有代表性的就是 Text

isThreeLine = false：// 是否是三行文本

true ： 副標題 不能為 null

false：如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行

dense： 是否密集垂直

secondary： 左邊的一個控件

selected = false： text 和 icon 的 color 是否 是 activeColor 的顏色

controlAffinity = ListTileControlAffinity.platform：

ListTileControlAffinity.platform 根據(jù)不同的平臺，來顯示 對話框 的位置

ListTileControlAffinity.trailing：勾選在右，title 在中，secondary 在左

ListTileControlAffinity.leading ：勾選在左，title 在中，secondary 在右

注意點 RadioListTile 的父控件 不能選擇Row （暫時不知道為什么），demo中選的是 Column

import "package:flutter/material.dart";

class RadioDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("Radio 和 Radio RadioListTile "),
        centerTitle: true,
      ),
      body: RadioStateDemo(),
    );
  }
}

class RadioStateDemo extends StatefulWidget {
  @override
  State createState() {
    // TODO: implement createState
    return RadioSDemo();
  }
}

class RadioSDemo extends State {
  String groupValue;
  String valueLiu;
  String valueZhang;
  String valueGuo;
  String valueLi;

  @override
  void initState() {
    super.initState();
    groupValue = "劉德華";
    valueLiu = "劉德華";
    valueZhang = "張學(xué)友";
    valueGuo = "郭富城";
    valueLi = "黎明";
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        SizedBox(
          height: 20,
        ),
        Text(
          "一：Radio",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Radio(
              // 此 Radio 的 value 值
              value: valueLiu,
              // 當選擇此 radio 的時候 的回調(diào)。 參數(shù)就是 此 value 的值
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              // 如果 Radio 的 value 和 groupValue 一樣 就 是此 Radio 選中 其他 設(shè)置為 不選中
              groupValue: groupValue,
              // 選中的顏色
              activeColor: Colors.red,
              // 響應(yīng)手勢的大小 ， 默認是 48 * 48
              // MaterialTapTargetSize.shrinkWrap 水波紋 在中間
              // MaterialTapTargetSize.padded  水波紋 靠左上
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueZhang,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueGuo,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
            Radio(
              value: valueLi,
              onChanged: (value) {
                setState(() {
                  groupValue = value;
                });
              },
              groupValue: groupValue,
              activeColor: Colors.red,
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
            ),
          ],
        ),
        SizedBox(
          height: 40,
        ),
        Text(
          "二：RadioListTile",
          style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20),
        ),
        // 不知道 為什么 Row 父布局 不行（暫時不知道why）
        Column(
//          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            RadioListTile(
              title: Text(valueLiu),
              // 必須要的屬性
              value: valueLiu,
              //是否選中發(fā)生變化時的回調(diào)， 回調(diào)的 bool 值 就是是否選中 , true 是 選中
              groupValue: groupValue,
              onChanged: _changed,
              // 選中時 填充的顏色
              activeColor: Colors.red,
              // 標題， 具有代表性的就是 Text ，
              //        selected 如果是 true ：
              //         如果 不設(shè)置 text 的 color 的話， text的顏色 跟隨 activeColor
              // 副標題（在 title 下面）， 具有代表性的就是 Text ， 如果 不設(shè)置 text 的 color 的話， text的顏色 跟隨 activeColor
              subtitle: Text("副標題"),
              // 是否是三行文本
              //        如果是 true ： 副標題 不能為 null
              //        如果是 false：
              //                      如果沒有副標題 ，就只有一行， 如果有副標題 ，就只有兩行
              isThreeLine: false,
              // 是否密集垂直
              dense: false,
              // 左邊的一個控件
//              secondary: Text("secondary"),
              // text 和 icon 的 color 是否 是 activeColor 的顏色
              selected: true,
              controlAffinity: ListTileControlAffinity.leading,
            ),
            RadioListTile(
                title: Text(valueZhang),
                value: valueZhang,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile(
                title: Text(valueGuo),
                value: valueGuo,
                groupValue: groupValue,
                onChanged: _changed),
            RadioListTile(
                title: Text(valueLi),
                value: valueLi,
                groupValue: groupValue,
                onChanged: _changed),
          ],
        )
      ],
    );
  }

  void _changed(value) {
    groupValue = value;
    setState(() {});
  }
}