Flutter 技术教程：如何设置 Radio 未选中的颜色

原创于 2024-09-23 17:11:09 发布 · 1.2k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #开发语言 #前端

flutter扩展教程专栏收录该内容

2 篇文章

订阅专栏

在 Flutter 开发中，Radio 按钮是常见的 UI 组件之一。它允许用户从多个选项中选择一个。在默认情况下，Flutter 中的 Radio 按钮未选中时的颜色是系统默认的，但是很多时候我们需要自定义未选中时的颜色，以便更好地符合设计要求或应用的主题风格。

本文将带你了解如何在 Flutter 中设置 Radio 按钮未选中时的颜色，并详细解释其中的关键概念和代码实现。

1. 基本的 Radio 按钮

Radio 按钮是一种单选按钮，用户在同一组按钮中只能选择一个选项。它通常与 groupValue 属性结合使用，以确保在同一组中只有一个按钮处于选中状态。以下是一个简单的 Radio 按钮示例：

Radio(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value;
    });
  },
)

在上面的代码中，value 表示该按钮的值，groupValue 表示当前组中选中的按钮的值，onChanged 是当用户点击按钮时触发的回调函数。虽然这是一个基础的实现，但它还缺少自定义未选中状态颜色的部分。

2. 设置未选中的颜色

为了实现自定义未选中时的颜色，我们可以使用 Radio 小部件的 fillColor 属性。fillColor 接受一个 MaterialStateProperty，这个属性允许你根据按钮的不同状态返回不同的颜色。我们可以使用 MaterialStateProperty.resolveWith 来根据按钮的状态返回特定颜色。

示例代码：

Radio(
  value: 1,
  groupValue: selectedValue,
  onChanged: (int? value) {
    setState(() {
      selectedValue = value;
    });
  },
  fillColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
    if (states.contains(MaterialState.selected)) {
      return Colors.blue; // 选中时的颜色
    }
    return Colors.grey; // 未选中时的颜色
  }),
)

3. 代码解析

在这个示例中，我们使用了 fillColor 属性来自定义 Radio 的填充颜色。MaterialStateProperty.resolveWith 方法是实现这一功能的关键，它能够根据不同的按钮状态（比如是否选中）返回不同的颜色。

具体来看：

MaterialState.selected：表示 Radio 处于选中状态。如果 states 包含这个状态，我们设置按钮颜色为蓝色（Colors.blue）。
默认返回灰色（Colors.grey）：当按钮未选中时，将填充为灰色。

MaterialState 是一个状态集合，包含了按钮的各种状态，如 pressed（按下）、hovered（悬停）和 selected（选中）。我们通过判断状态集合中是否包含 MaterialState.selected 来决定按钮的颜色。

4. 实现多个按钮的选择功能

通常我们不会只用一个 Radio 按钮，而是通过一组 Radio 来实现单选效果。以下是一个包含三个选项的示例：

class RadioExample extends StatefulWidget {
  @override
  _RadioExampleState createState() => _RadioExampleState();
}

class _RadioExampleState extends State<RadioExample> {
  int? selectedValue;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Radio(
          value: 1,
          groupValue: selectedValue,
          onChanged: (int? value) {
            setState(() {
              selectedValue = value;
            });
          },
          fillColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return Colors.blue;
            }
            return Colors.grey;
          }),
        ),
        Radio(
          value: 2,
          groupValue: selectedValue,
          onChanged: (int? value) {
            setState(() {
              selectedValue = value;
            });
          },
          fillColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return Colors.blue;
            }
            return Colors.grey;
          }),
        ),
        Radio(
          value: 3,
          groupValue: selectedValue,
          onChanged: (int? value) {
            setState(() {
              selectedValue = value;
            });
          },
          fillColor: MaterialStateProperty.resolveWith<Color>((Set<MaterialState> states) {
            if (states.contains(MaterialState.selected)) {
              return Colors.blue;
            }
            return Colors.grey;
          }),
        ),
      ],
    );
  }
}