1. 基本介绍

Radio 是一个常见的单选框。

2. 示例代码

代码下载地址。如果对你有帮助的话记得给个关注，代码会根据我的 Flutter 专题不断更新。

3. Radio 属性介绍

Radio属性	介绍
value	@required 是否选中
groupValue	@required
onChanged	@required 点击事件
mouseCursor	鼠标光标
toggleable
activeColor	选中时填充颜色
focusColor	聚焦颜色
hoverColor	悬停颜色
materialTapTargetSize	内边距，默认最小点击区域为 48 * 48，MaterialTapTargetSize.shrinkWrap 为组件实际大小
visualDensity	布局紧凑设置
focusNode	焦点控制，Flutter 组件之 FocusNode 详解
autofocus	自动聚焦，默认为 false

4. Radio 详解

4.1 容器创建

import 'package:flutter/material.dart';

class FMRadioVC extends StatefulWidget{
  @override
  FMRadioState createState() => FMRadioState();
}

class FMRadioState extends State <FMRadioVC>{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
      ),
      body: Center(
        child: _radioRow(),
      ),
    );
  }

  Row _radioRow(){
    return Row(
      children: [
        _colorfulCheckBox(1),
        _colorfulCheckBox(2),
        _colorfulCheckBox(3),
        _colorfulCheckBox(4),
        _colorfulCheckBox(5),
        _colorfulCheckBox(6),
      ],
    );
  }

  int groupValue = 1;

  Radio _colorfulCheckBox(index){
    return Radio(
      value: index,
      groupValue: groupValue,
      onChanged: (value){
        print(value);
        groupValue = index;

        setState(() {
          
        });
      },
    );
  }
}

Radio normal.gif

4.2 选中事件

注意与 CheckBox 不同的是，CheckBox 的 value 是用来记住当前框是否是勾选状态。Radio 的 value 只是给 Radio 设置的一个标识，而 groupValue 则是选中的标识。

例如，3个 Radio 的 value 分别为数字 1，2，3。此时 groupValue = 1 则会选中第一个，groupValue = 3 则会选中第三个。

例如，3个 Radio 的 value 分别为字符串 "aa"，"bb"，"cc"，此时 groupValue = "aa" 则会选中第一个，groupValue = "cc"则会选中第三个。

4.3 颜色

使用 activeColor 改变选中后颜色。

  Radio _colorfulCheckBox(index){
    return Radio(
      value: index,
      groupValue: groupValue,
      activeColor: Colors.red,
      onChanged: (value){
        print(value);
        groupValue = index;

        setState(() {

        });
      },
    );
  }

Radio colors.png

5. Radio进阶

这里做一个例子，只能选择一项的问卷。

• 根据需要，批量创建复选框及标题。
• 创建数据模型，保存每一个标题名称及状态。
• 保存当前选中状态，以及数据处理。

相信能看到这里的，对 flutter 也不在陌生了，这里我就简单点，直接上代码。

import 'package:flutter/material.dart';

class FMRadioVC extends StatefulWidget{
  @override
  FMRadioState createState() => FMRadioState();
}

class FMRadioState extends State <FMRadioVC>{

  List <FMRadioModel> _datas = [];

  int groupValue = 1;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    initData();
  }

  void initData(){
    _datas.add(FMRadioModel(1, "游戏"));
    _datas.add(FMRadioModel(2, "社交"));
    _datas.add(FMRadioModel(3, "购物"));
    _datas.add(FMRadioModel(4, "娱乐"));
    _datas.add(FMRadioModel(5, "影视"));

    setState(() {

    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("CheckBox"),
      ),
      body: ListView.builder(
          itemCount: _datas.length,
          itemBuilder: (context, index){
            FMRadioModel model = _datas[index];
            return _buildRow(model);
          }
      ),
      bottomSheet: _bottomSheet(),
    );
  }

  BottomSheet _bottomSheet(){
    return BottomSheet(
      onClosing: (){},
      builder: (BuildContext context){
        return Container(
          height: 60,
          color: Colors.cyan,
          child: Text(_selectedBoxs()),
          alignment: Alignment.center,
        );
      },
    );
  }

  String _selectedBoxs(){
    String string = "";

    _datas.forEach((FMRadioModel model) {
      if (model.index == groupValue) {
        string = "你当前选择的是: " + "${model.text}  ";
      }
    });

    return string;
  }

  Row _buildRow(FMRadioModel model){
    return Row(
      children: [
        _radio(model),
        Text("${model.text}")
      ],
    );
  }

  Radio _radio(FMRadioModel model){
    return Radio(
        value: model.index,
        groupValue: groupValue,
        onChanged: (index){
          groupValue = index;
          print(index);
          setState(() {

          });
        }
    );
  }
}

class FMRadioModel extends Object {

  int index;
  String text;

  FMRadioModel(this.index, this.text);
}

Radio more.gif

6. 技术小结

• Radio 作为单选框没有太多难度，实际应用也不是很多，了解即可。