第四十三回： Radio Widget

我们在上一章回中介绍了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的内容就介绍到这里，欢迎大家在评论区交流与讨论!