如何在 Flutter 中更改收音机的非活动颜色？答案

【问题标题】：How to change radio's inactive color in Flutter?如何在 Flutter 中更改收音机的非活动颜色？
【发布时间】：2022-01-03 13:07:22
【问题描述】：

我在ListTile 中有一个Radio 按钮。单击ListTile 时，我更改了Radio 的值。我不希望收音机可点击，所以我不提供onChanged 回调：

ListTile(
  onTap: () => onChanged(template.id),
  leading: Radio(
    value: template.id,
    groupValue: checkedId,
  )
  ...
)

这样做，Radio 变为“非活动”并将其颜色更改为灰色。 Radio 具有 activeColor 属性，但不适用于非活动状态。

如果我为 Radio 的 onChanged 属性提供一个虚拟函数 - 它会变为活动状态，但问题是我不希望它可点击，我希望 ListTile 仅可点击（原因是 - 我希望能够取消选中 Radio)

另外，我只想更改那些特定 Radio 按钮的非活动颜色，而不是整个应用程序。

当前结果：

onChange 的结果（单击时无法取消选中收音机）：

【问题讨论】：

标签： user-interface flutter dart radio-button

【解决方案1】：

Radio 使用 unselectedWidgetColor 的 ThemeData。如果您只需要为特定屏幕上的几个收音机更改它，请将它们包装在 Theme 小部件中以覆盖颜色：

Theme(
  data: Theme.of(context).copyWith(
    unselectedWidgetColor: Colors.red,
    disabledColor: Colors.blue
  ),
  child: Column(
    children: <Widget>[
      ListTile(
        onTap: () => setState(() => value = 0),
        leading: Radio(
          value: 0,
          groupValue: value,
          onChanged: (v) => setState(() => value = v),
        )
      ),
      ListTile(
        onTap: () => setState(() => value = 1),
        leading: Radio(
          value: 1,
          groupValue: value,
          onChanged: (v) => setState(() => value = v),
        )
      ),
    ],
  ),
)

如果在onChanged 到Radio 中没有传递回调，则将其解释为禁用（这适用于许多默认材质小部件）。

【讨论】：

这将使Radio 在未选中时也变为蓝色。以下将解决此问题：disabledColor: template.ai == checkedAi ? Colors.blue : null, 谢谢
是否可以更改收音机背景颜色？ stackoverflow.com/questions/64166407/…

【解决方案2】：

您还可以设置fillColor 属性，它为多个无线电状态解析颜色。在这种情况下，它会为所有状态返回 Colors.blue。

Radio(
          fillColor: MaterialStateColor.resolveWith((states) => Colors.blue),
          value: 1,
          groupValue: _optionValue,
          onChanged: changeValue,
        )

【讨论】：

【解决方案3】：

更改单选框未选中的颜色：

unselectedWidgetColor: Colors.green,

更改收音机选择的颜色：

toggleableActiveColor: Colors.green,

【讨论】：