Flutter中RadioListTile无法横向排列问题求助

你遇到的问题根源在于RadioListTile继承自ListTile，默认会占据父容器的全部宽度，且内部布局有固定约束，直接用Row/Wrap包裹会因宽度限制导致选项被迫垂直排列。下面给你两种可行的解决方法：

方法一：自定义横向单选组（推荐，更灵活） #

直接用Radio组件搭配Text组合布局，完全摆脱RadioListTile的默认约束：

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: ['New Connection', 'Upgrade', 'Others'].map((option) {
    return Row(
      mainAxisSize: MainAxisSize.min, // 只占用内容所需宽度
      children: [
        Radio<String>(
          value: option,
          groupValue: _selectedOption,
          onChanged: (String? value) {
            setState(() {
              _selectedOption = value!;
              widget.onChanged?.call(value);
            });
          },
        ),
        Text(option),
      ],
    );
  }).toList(),
)

如果需要支持屏幕宽度不足时自动换行，把外层Row换成Wrap即可：

Wrap(
  spacing: 12.0, // 选项之间的横向间距
  runSpacing: 8.0, // 换行后的纵向间距
  children: ['New Connection', 'Upgrade', 'Others'].map((option) {
    return Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        Radio<String>(
          value: option,
          groupValue: fieldOptions,
          onChanged: (String? value) {
            setState(() {
              fieldOptions = value!;
            });
          },
        ),
        Text(option),
      ],
    );
  }).toList(),
)

方法二：改造RadioListTile实现横向排列 #

如果一定要用RadioListTile，可以通过调整属性让它适配横向布局：

Wrap(
  spacing: 8.0,
  children: ['New Connection', 'Upgrade', 'Others'].map((option) {
    return SizedBox(
      width: MediaQuery.of(context).size.width * 0.3,
      child: RadioListTile<String>(
        title: Text(
          option,
          style: TextStyle(fontSize: 12), // 缩小字体避免换行
        ),
        value: option,
        groupValue: fieldOptions,
        onChanged: (String? value) {
          setState(() {
            fieldOptions = value!;
          });
        },
        dense: true, // 紧凑布局，减少内部间距
        contentPadding: EdgeInsets.symmetric(horizontal: 2), // 去除多余内边距
        horizontalTitleGap: 4, // 缩小单选框和文字的间距
        visualDensity: VisualDensity.compact, // 进一步压缩布局
      ),
    );
  }).toList(),
)

这种方法通过压缩RadioListTile的内部间距、缩小字体来适配有限宽度，从而在Row/Wrap中横向排列。

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