文章目录
- 概念介绍
- 使用方法
- 示例代码
我们在上一章回中介绍了DateRangePickerDialog Widget相关的内容,本章回中将介绍Radio Widget.闲话休提,让我们一起Talk Flutter吧。
概念介绍
我们在这里说的Radio Widget是指单选按钮,没有选中时是圆形边框,边框和内容都是白色,选中时边框变成蓝色,中间用蓝色填充。当然了这个蓝色是默认的颜色,
可以通过主题颜色或者控制中的颜色属性进行修改。Flutter把单选按钮封装成了独立的组件,使用Radio类来表示该组件,本章回中将详细介绍它的使用的方法。
使用方法
和其它Widget一样,Radio组件也提供了相关的属性来操作自己,下面是一些常用的属性,掌握这些属性的用法后就可以熟练地使用Radio组件了:
- value属性:表示按钮被选中时的值;
- groupValue属性:表示按钮所有组的值;
- onChanged属性:它是方法类型,按钮被按下时回调此方法;
- activeColor属性:表示按钮被选中时的颜色,如果不修改默认为蓝色;
上面的这几个属性中只有最后一个是可选属性,其它的属性都是必选属性。前两个属性看着容易理解,不过使用时容易犯错。当这两个属性的值相等时才能表示按钮被选中,
否则按钮处于未选中状态。这两个属性的类型是泛型,因此它们的使用范围中比较广,给属性赋值时可以使用int等数字类型,也可以使用string类型,甚至时对象类型。
常用的做法是在onChanged方法中修改groupValue属性的值让它和value值保持相等,进而达到选中单选按钮的目的。下面是示例代码:
示例代码
Radio _radio(index) {
_checkState = index;
return Radio(
//这两个值相等时才会显示选中状态,这里用的是int类型
value: _checkState,
groupValue: _groupValue,
onChanged: (v) {
//v的值就是index
print("value $v");
setState(
() {
if (_checkState == _groupValue) {
_groupValue = v + 1;
} else {
_groupValue = v;
}
},
);
},
);
}
上面的代码只是核心代码,完整的代码可以查看Github中ex024文件中的内容。为了方便使用,我们把Radio组件封装到方法中,然后把该方法赋值给column组件的
children属性,多放几个这样的方法就形成了一个包含多个单选按钮的组,我们称其为单选按钮组,这也是常用的做法,同一组内的单选按钮是互斥的,也就是说一组
单选按钮中只能有一个按钮被选中。编译并且运行上面的程序,会看到一组的单选按钮,可以点击其中的任何一个按钮,被点击的按钮处于选中状态,没有被点击的按钮
处理未选中状态。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
看官们,关于Radio Widget的内容就介绍到这里,欢迎大家在评论区交流与讨论!