Flutter 之旅——Radio 单选框篇

2023-10-23 09:02:52

Radio 单选框属于 Flutter 中的选择控件系列，与复选框一样，用于收集用户输入，但单选框的特点是只能选择一个选项，适用于仅允许用户从一组选项中选择一项的情况。

1. Flutter Radio 单选框使用示例

1.1 引入组件

在 Flutter 中使用 Radio 单选框需要导入 material.dart 库。

import 'package:flutter/material.dart';

1.2 实现单选框

为了实现单选框，需要创建一个 Radio 类对象。它有两个必填参数：value 和 groupValue。value 用于指定单选框的当前值，groupValue 用于指定一组单选框的公共值。当用户选择一个单选框时，该单选框的 value 将会更新为 groupValue 的值。

Radio(
  value: 1,
  groupValue: _groupValue,
  onChanged: (value) {
    setState(() {
      _groupValue = value;
    });
  },
)

在上面的示例中，单选框的 value 被设置为 1，groupValue 被设置为 _groupValue。当用户选择该单选框时，_groupValue 将会更新为 1。

1.3 自定义单选框

Flutter 还允许开发人员自定义单选框的样式。可以通过设置 activeColor、fillColor、focusColor 等属性来调整单选框的外观。

Radio(
  value: 1,
  groupValue: _groupValue,
  onChanged: (value) {
    setState(() {
      _groupValue = value;
    });
  },
  activeColor: Colors.red,
  fillColor: MaterialStateProperty.all(Colors.green),
  focusColor: Colors.blue,
)