flutter如何实现自定义单选组件

在Flutter中如何实现自定义的单选按钮组件？我需要一个可以完全自定义样式（包括选中和未选中状态）的单选按钮，而不是使用默认的Radio widget。最好能提供完整的代码示例，包括如何管理单选组的状态以及如何处理用户选择事件。如果能对比Material Design的Radio和Cupertino风格的Radio实现方式就更好了。

eggper 1楼

使用Flutter实现自定义单选组件：

创建StatefulWidget
使用Radio或自定义Widget
管理选中状态（int或enum）
通过onChanged回调更新状态
可自定义样式和布局

示例：

int _selectedValue = 0;
Radio(
  value: 1,
  groupValue: _selectedValue,
  onChanged: (value) {
    setState(() {
      _selectedValue = value!;
    });
  },
)

更多关于flutter如何实现自定义单选组件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

vueper 2楼

在Flutter中实现自定义单选组件，可以通过组合现有组件或完全自定义绘制来实现。以下是两种常见方法：

方法1：使用RadioListTile + 状态管理

class CustomRadioGroup extends StatefulWidget {
  @override
  _CustomRadioGroupState createState() => _CustomRadioGroupState();
}

class _CustomRadioGroupState extends State<CustomRadioGroup> {
  int _selectedValue = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _buildRadioOption('选项1', 0),
        _buildRadioOption('选项2', 1),
        _buildRadioOption('选项3', 2),
      ],
    );
  }

  Widget _buildRadioOption(String title, int value) {
    return RadioListTile<int>(
      title: Text(title),
      value: value,
      groupValue: _selectedValue,
      onChanged: (newValue) {
        setState(() {
          _selectedValue = newValue!;
        });
      },
      // 自定义样式
      activeColor: Colors.blue,
      tileColor: Colors.grey[100],
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    );
  }
}

方法2：完全自定义单选组件

class CustomRadioButton extends StatelessWidget {
  final String label;
  final bool isSelected;
  final VoidCallback onTap;

  const CustomRadioButton({
    required this.label,
    required this.isSelected,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        padding: EdgeInsets.all(12),
        margin: EdgeInsets.symmetric(vertical: 4),
        decoration: BoxDecoration(
          color: isSelected ? Colors.blue[50] : Colors.grey[100],
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: isSelected ? Colors.blue : Colors.grey[300],
            width: 2,
          ),
        ),
        child: Row(
          children: [
            // 自定义单选圆圈
            Container(
              width: 20,
              height: 20,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(
                  color: isSelected ? Colors.blue : Colors.grey,
                  width: 2,
                ),
              ),
              child: isSelected
                  ? Center(
                      child: Container(
                        width: 10,
                        height: 10,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          color: Colors.blue,
                        ),
                      ),
                    )
                  : null,
            ),
            SizedBox(width: 12),
            Text(
              label,
              style: TextStyle(
                fontSize: 16,
                color: isSelected ? Colors.blue : Colors.black,
                fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 使用示例
class CustomRadioGroup extends StatefulWidget {
  @override
  _CustomRadioGroupState createState() => _CustomRadioGroupState();
}

class _CustomRadioGroupState extends State<CustomRadioGroup> {
  int _selectedIndex = 0;
  final List<String> _options = ['选项1', '选项2', '选项3'];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: _options.asMap().entries.map((entry) {
        return CustomRadioButton(
          label: entry.value,
          isSelected: _selectedIndex == entry.key,
          onTap: () {
            setState(() {
              _selectedIndex = entry.key;
            });
          },
        );
      }).toList(),
    );
  }
}

主要特点

方法1：使用系统组件，开发快速，样式统一
方法2：完全自定义，灵活性高，可以自定义所有样式
两种方法都支持状态管理和点击交互

选择哪种方法取决于你的具体需求：如果需要快速实现且样式要求不高，推荐方法1；如果需要完全自定义外观，推荐方法2。