flutter Radio 单选框

欢迎大家来到IT世界,在知识的湖畔探索吧!

1 flutter单选框Radio的基本使用

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

欢迎大家来到IT世界,在知识的湖畔探索吧!

运行效果如下图所示

欢迎大家来到IT世界,在知识的湖畔探索吧!

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

代码如下：

欢迎大家来到IT世界,在知识的湖畔探索吧!///默认选中的单选框的值 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来实现

///默认选中的单选框的值 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来组件，实现的效果如下图所示，对应的关键代码如下：

代码如下：

欢迎大家来到IT世界,在知识的湖畔探索吧!///单选框的成组使用 ///默认选中的单选框的值 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: [... ... 省略 ], ), ], ); }