一、Radio和RadioListTile的介绍

Radio：单选按钮，当有多个Radio组件，其中一个为选中状态，其他自动变成未选中状态。

RadioListTitle：通常情况下，需要在Radio控件的后面添加说明，用户需要知道自己选择的是什么，当然我们可以直接在Radio后面添加Text控件，不过，Flutter已经为我们提供了相应的控件，就是RadioListTile。

二、Radio和RadioListTile的源码

2.1、Radio的源码

const Radio({
    Key key,
    @required this.value,//此单选按钮表示的值
    @required this.groupValue,//一组单选按钮，当前选择的值
    @required this.onChanged,//监听
    this.mouseCursor,
    this.toggleable = false,
    this.activeColor,//选择此单选按钮的颜色
    this.focusColor,
    this.hoverColor,
    this.materialTapTargetSize,//配置tap目标的最小大小
    this.visualDensity,//radio布局的紧凑程度
    this.focusNode,//
    this.autofocus = false,
  }) : assert(autofocus != null),
       assert(toggleable != null),
       super(key: key);

2.2、RadioListTile的源码

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,

  }) : assert(toggleable != null),
       assert(isThreeLine != null),
       assert(!isThreeLine || subtitle != null),
       assert(selected != null),
       assert(controlAffinity != null),
       assert(autofocus != null),
       super(key: key);

三、属性简介

3.1、Radio的属性简介

属性	说明
value	此单选按钮表示的值
groupValue	一组单选按钮，当前选择的值如果 Radio 的 value 和 groupValue 一样就是此 Radio 选中其他设置为不选中
onChanged	点击radio的监听
activeColor	选择此单选按钮的颜色
materialTapTargetSize	配置tap目标的最小大小
visualDensity	radio布局的紧凑程度

3.1、RadioListTile的属性简介

属性	说明
value	见radio属性简介
groupValue	见radio属性简介
onChanged	见radio属性简介
activeColor	见radio属性简介
title	标题
subtitle	二级标题
isThreeLine	是否三行显示 true ：副标题不能为 null
dense	是否密集垂直
secondary	配置图标或者图片
selected	text 和 icon 的 color 是否是 activeColor 的颜色
controlAffinity	控件相对于文本的位置 ListTileControlAffinity.platform 根据不同的平台，来显示对话框的位置 ListTileControlAffinity.trailing：勾选在右，title 在中，secondary 在左

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

四、demo

4.1、Radio的demo

class _TestFulState extends State<TestFul> {
  var _groupValue = "语文";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("Radio学习"),
          ),
          body: Container(
            child: Column(
              children: [
                Row(
                  children: [
                    Radio(
                        value: "语文",
                        activeColor: Colors.red,
                        groupValue: _groupValue,
                        onChanged: (value) {
                          setState(() {
                            _groupValue = value;
                          });
                        }),
                    Text("语文")
                  ],
                ),

                Row(
                  children: [
                    Radio(
                        value: "数学",
                        activeColor: Colors.red,
                        groupValue: _groupValue,
                        onChanged: (value) {
                          setState(() {
                            _groupValue = value;
                          });
                        }),
                    Text("数学")
                  ],
                ),
                Row(
                  children: [
                    Radio(
                        value: "英语",
                        activeColor: Colors.red,
                        groupValue: _groupValue,
                        onChanged: (value) {
                          setState(() {
                            _groupValue = value;
                          });
                        }),
                    Text("英语")
                  ],
                )
              ],
            ),
          )),
    );
  }
}

80f87e4f06777c8a14e7e23b9de1001.png

4.2、RadioListTile的demo

class _TestFulState extends State<TestFul> {
  var _groupValue = "语文";

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("RadioListTile学习"),
          ),
          body: Container(
            child: Column(
              children: [
                RadioListTile(
                  secondary: Icon(Icons.watch),
                    value: "语文",
                    selected: true,
                    activeColor: Colors.red,
                    groupValue: _groupValue,
                    controlAffinity: ListTileControlAffinity.leading,
                    title: Text("语文"),
                    subtitle: Text("我是语文"),
                    onChanged: (value) {
                      setState(() {
                        _groupValue = value;
                      });
                    }),
                RadioListTile(
                    value: "数学",
                    title: Text("数学"),
                    subtitle: Text("我是数学"),
                    activeColor: Colors.red,
                    secondary: Icon(Icons.watch),
                    controlAffinity: ListTileControlAffinity.trailing,
                    groupValue: _groupValue,
                    onChanged: (value) {
                      setState(() {
                        _groupValue = value;
                      });
                    }),
                RadioListTile(
                    value: "英语",
                    title: Text("英语"),
                    subtitle: Text("我是英语"),
                    secondary: Icon(Icons.watch),
                    controlAffinity: ListTileControlAffinity.platform,
                    activeColor: Colors.red,
                    groupValue: _groupValue,
                    onChanged: (value) {
                      setState(() {
                        _groupValue = value;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}

6bf901cd194a37c80b199eeca1e612d.png