flutter修改Radio组件未选中时颜色

在 Flutter 中，如果你想要自定义 Radio 组件（通常用于单选按钮）未选中状态的颜色，你需要创建一个自定义 Widget，并覆盖默认样式。你可以通过实现 `StatefulWidget` 或者 `StatelessWidget` 并使用 `Theme` 和 `MaterialStateProperty` 来改变 `RadioButton` 的 `color` 属性。

以下是一个简单的例子：

import 'package:flutter/material.dart';

class CustomRadioButton extends StatelessWidget {
  final IconData iconData;
  final Function onChanged;

  const CustomRadioButton({Key? key, required this.iconData, required this.onChanged})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(0)),
        onPressed: () {
          if (onChanged != null) onChanged();
        },
        child: Padding(
          padding: EdgeInsets.all(8),
          child: InkResponse(
            onTap: onChanged,
            child: Container(
              decoration: BoxDecoration(
                border: Border.all(color: isPressed ? Colors.black : Colors.grey),
                borderRadius: BorderRadius.circular(24),
                color: isPressed ? Colors.blueAccent : Colors.grey[300],
              ),
              child: Icon(iconData, size: 24, color: isPressed ? Colors.white : Colors.black),
            ),
          ),
        ));
  }
}

// 使用自定义组件
List<IconData> radioOptions = [Icons.radio_button_unchecked, Icons.radio_button_checked];
List<String> labels = ['Option 1', 'Option 2'];

final radioButtonController = TextEditingController();

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _selectedValue = false;

  void onRadioChange(int index) {
    setState(() {
      _selectedValue = index == 0; // 指定选择第一个选项作为示例
    });
    radioButtonController.value = TextEditingValue(text: labels[index]);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Radio')),
        body: Column(
          children: radioOptions.map((iconData, index) {
            return GestureDetector(
              onTap: () => onRadioChange(index),
              child: CustomRadioButton(
                iconData: iconData,
                onChanged: (_) => onRadioChange(index),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

在这个示例中，当 Radio 未被选中时，背景颜色是灰色 (`Colors.grey[300]`)。当你点击它时，颜色会变为蓝色 (`Colors.blueAccent`) 并触发回调函数 `onChanged`。请注意，这个示例只展示了基础的定制，实际应用中可能需要根据主题或需求进一步调整。