如何将ListView展示为水平RadioListTile单选列表？

直接用Row包裹原代码会出现布局冲突，因为ListView.builder是垂直滚动容器，而RadioListTile本身是为垂直列表项设计的组件。以下是两种可行的修改方案：

方案一：横向滚动的水平列表（适合选项较多的场景） #

用SingleChildScrollView搭配Row实现横向滚动，同时替换RadioListTile为Radio+Text的组合，避免嵌套布局问题：

SingleChildScrollView(
  // 设置为横向滚动
  scrollDirection: Axis.horizontal,
  child: Row(
    children: controller.doc.map((item) {
      return Padding(
        // 给每个选项添加左右间距
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: Row(
          // 让每个选项的Row仅占用自身内容宽度
          mainAxisSize: MainAxisSize.min,
          children: [
            Radio(
              value: item['id'],
              groupValue: tag,
              activeColor: primary,
              onChanged: (value) {
                setState(() {
                  tag = value;
                });
              },
            ),
            Text(
              item['id'],
              style: TextStyle(color: textColor),
            ),
          ],
        ),
      );
    }).toList(),
  ),
)

方案二：自动换行的水平列表（适合选项较少的场景） #

如果不希望滚动，而是让选项超出屏幕时自动换行，可以用Wrap组件替代Row：

Wrap(
  // 选项之间的水平间距
  spacing: 16.0,
  // 行与行之间的垂直间距
  runSpacing: 8.0,
  children: controller.doc.map((item) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Radio(
          value: item['id'],
          groupValue: tag,
          activeColor: primary,
          onChanged: (value) {
            setState(() {
              tag = value;
            });
          },
        ),
        Text(
          item['id'],
          style: TextStyle(color: textColor),
        ),
      ],
    );
  }).toList(),
)

关键修改点说明 #

1. 移除原有的ListView.builder：它是垂直方向的滚动容器，与水平排列需求冲突。
2. 替换RadioListTile：该组件内部默认是垂直布局（单选框+文字），不适合水平列表，改用Radio+Text的组合更灵活。
3. 处理布局溢出：通过SingleChildScrollView横向滚动或Wrap自动换行，避免选项超出屏幕导致的布局报错。

内容的提问来源于stack exchange，提问作者rahaf aldrwish