单选框radio选中事件_flutter Radio 单选框

1 flutter单选框Radio的基本使用

///单选框的基本使用///默认选中的单选框的值int groupValue = 0;Radio buildRadioUseWidget() {  return Radio(    ///此单选框绑定的值 必选参数    value: 0,    ///当前组中这选定的值  必选参数    groupValue: groupValue,    ///点击状态改变时的回调 必选参数    onChanged: (v) {      setState(() {        this.groupValue = v;      });    },  );}

运行效果如下图所示

ccfc5a799da0e9d6845eae97abc2322d.png


在实际项目开发中，一般单选框都会成组使用，不会单独使用，如下图所示效果：

b6d115e54cf22f6ec4b4568db79f43ed.png


代码如下：

///默认选中的单选框的值int groupValue = 0;///单选框的成组使用Row buildRadioGroupWidget() {  return Row(children: [    Radio(      ///此单选框绑定的值 必选参数      value: 0,      ///当前组中这选定的值  必选参数      groupValue: groupValue,      ///点击状态改变时的回调 必选参数      onChanged: (v) {        setState(() {          this.groupValue = v;        });      },    ),    Radio(      ///此单选框绑定的值 必选参数      value: 1,      ///当前组中这选定的值  必选参数      groupValue: groupValue,      ///点击状态改变时的回调 必选参数      onChanged: (v) {        setState(() {          this.groupValue = v;        });      },    ),    Radio(      ///此单选框绑定的值 必选参数      value: 2,      ///当前组中这选定的值  必选参数      groupValue: groupValue,      ///点击状态改变时的回调 必选参数      onChanged: (v) {        setState(() {          this.groupValue = v;        });      },    )  ],);}

如下图所示效果，是在实际项目中也比较常用的一种设计效果，单选框与文字结合使用，在水平方向通过结合Row来实现

0f4f4d6fa1267db989a8d03fa06ecd7d.png
///默认选中的单选框的值int groupValue = 0;///单选框的成组使用Row buildRadioGroupRowWidget() {  return Row(    children: [      Row(        ///包裹子布局        mainAxisSize: MainAxisSize.min,        children: [          Radio(            ///此单选框绑定的值 必选参数            value: 0,            ///当前组中这选定的值  必选参数            groupValue: groupValue,            ///点击状态改变时的回调 必选参数            onChanged: (v) {              setState(() {                this.groupValue = v;              });            },          ),          Text("语文")        ],      ),      Row(        ///包裹子布局        mainAxisSize: MainAxisSize.min,        children: [          Radio(            ///此单选框绑定的值 必选参数            value: 1,            ///当前组中这选定的值  必选参数            groupValue: groupValue,            ///点击状态改变时的回调 必选参数            onChanged: (v) {              setState(() {                this.groupValue = v;              });            },          ),          Text("数学")        ],      ),      Row(        ///包裹子布局        mainAxisSize: MainAxisSize.min,        children: [          Radio(            ///此单选框绑定的值 必选参数            value: 2,            ///当前组中这选定的值  必选参数            groupValue: groupValue,            ///点击状态改变时的回调 必选参数            onChanged: (v) {              setState(() {                this.groupValue = v;              });            },          ),          Text("英语")        ],      ),    ],  );}

在这里需要注意的是水平线性布局Row默认的填充父布局的，用在这里的话，需要将其设置为包裹子布局的方式，通过配置mainAxisSize的值为MainAxisSize.min来实现。
在上图的效果基础上进行一些改造，将单选框Radio与文字的排列方式使用线性布局Column来组件，实现的效果如下图所示，对应的关键代码如下：

4c095a6b770b93238a6735f9a14ebb43.png


代码如下：

///单选框的成组使用///默认选中的单选框的值int groupValue = 0;  Row buildRadioGroupColumnWidget() {    return Row(      children: [        Column(          ///包裹子布局          mainAxisSize: MainAxisSize.min,          children: [            Radio(              ///此单选框绑定的值 必选参数              value: 0,              ///当前组中这选定的值  必选参数              groupValue: groupValue,              ///点击状态改变时的回调 必选参数              onChanged: (v) {                setState(() {                  this.groupValue = v;                });              },            ),            Text("语文")          ],        ),        Column(          ///包裹子布局          mainAxisSize: MainAxisSize.min,          children: [... ... 省略 ],        ),        Column(          ///包裹子布局          mainAxisSize: MainAxisSize.min,          children: [... ... 省略 ],        ),      ],    );  }