Flutter中如何复刻指定单选按钮设计？

兄弟，我看了你遇到的问题，先帮你捋捋当前代码里的几个明显问题：

• 你把RadioListTile直接塞到Row里是不合理的，因为RadioListTile本身已经是一个包含文本和单选按钮的横向布局组件，嵌套Row会导致布局冲突，这也是你报错的原因之一
• 所有选项的value和groupValue都设成了1，这样单选按钮无法区分选中状态，每个选项的value应该是唯一的
• activeColor你设成了接近白色的Color(0xffF8F8F8)，这会导致选中后的单选按钮几乎看不见，应该设置成你想要的按钮选中颜色，比如蓝色

接下来给你一个可以实现需求的完整方案：我们用一个StatefulWidget来管理选中状态，给每个选项外层套一个容器，根据选中状态切换容器的背景色，同时正确配置RadioListTile的参数。

import 'package:flutter/material.dart';

class CustomRadioScreen extends StatefulWidget {
  const CustomRadioScreen({super.key});

  @override
  State<CustomRadioScreen> createState() => _CustomRadioScreenState();
}

class _CustomRadioScreenState extends State<CustomRadioScreen> {
  // 用来存储当前选中的选项值，初始设为null表示未选中
  int? _selectedReason;

  // 定义选项列表，方便后续维护
  final List<Map<String, dynamic>> _reasonOptions = [
    {'value': 1, 'text': 'Some details are incorrect'},
    {'value': 2, 'text': 'I didn’t make this order'},
    {'value': 3, 'text': 'Request came in too late'},
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: _reasonOptions.map((option) {
            // 判断当前选项是否被选中
            bool isSelected = _selectedReason == option['value'];
            return Container(
              margin: const EdgeInsets.only(bottom: 8.0),
              // 根据选中状态设置背景色
              decoration: BoxDecoration(
                color: isSelected ? Colors.lightBlue.withOpacity(0.3) : Colors.transparent,
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: RadioListTile<int>(
                // 选项唯一值
                value: option['value'],
                // 当前选中的值
                groupValue: _selectedReason,
                // 单选按钮选中时的颜色
                activeColor: Colors.blue,
                // 点击时更新选中状态
                onChanged: (int? value) {
                  setState(() {
                    _selectedReason = value;
                  });
                },
                // 选项文本
                title: Text(option['text']),
                // 让RadioListTile占满容器宽度，保证背景色覆盖整个区域
                contentPadding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

代码里的关键细节说明：

• 用_selectedReason变量管理选中状态，每次点击单选按钮时通过setState更新状态
• 每个选项的容器通过isSelected判断是否选中，切换浅蓝背景色
• 去掉了多余的Row嵌套，直接用RadioListTile自带的布局，避免布局冲突
• 把选项做成列表形式，后续新增选项只需要在_reasonOptions里添加即可，更易维护

这样实现后，选中某个选项时，整个容器会变成浅蓝色，单选按钮也会显示正确的选中颜色，完全符合你想要的UI效果。

备注：内容来源于stack exchange，提问作者tesseract