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,
          ),
        ],
      ),
    );
  }
}