Flutter布局修复：如何让Row内RadioListTile单行显示且移除Expanded不报错

Hey，我来帮你搞定这个Flutter布局的问题！你现在遇到的情况是：用Expanded包裹RadioListTile虽然避免了溢出错误，但导致布局错乱没法单行显示；直接移除Expanded又会触发溢出。这其实是因为RadioListTile本身是为列表项设计的组件，默认会占据较多的水平和垂直空间，直接塞到Row里就容易出现布局冲突。

下面给你两种可行的解决方案，按需选择：

方案一：自定义横向单选组件（推荐） #

既然是要横向排列单选按钮，不如直接用Row组合Radio和Text，这样完全可控，不会有RadioListTile自带的布局约束问题。

修改后的代码如下：

替换原Row布局 #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround, // 用spaceAround让选项均匀分布
  children: [
    buildRadioItem(1, getTranslated(context, 'received')),
    buildRadioItem(2, getTranslated(context, 'inProgress')),
    buildRadioItem(3, getTranslated(context, 'done')),
  ],
)

实现buildRadioItem方法 #

Widget buildRadioItem(int val, String txt) {
  return Row(
    mainAxisSize: MainAxisSize.min, // 只占据自身内容的宽度，不拉伸
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Radio(
        activeColor: myRed,
        value: val,
        groupValue: _license,
        onChanged: (value) {
          setState(() {
            _license = value;
          });
        },
      ),
      Text(txt),
    ],
  );
}

这个方案的优点是布局紧凑灵活，完全符合横向单选的需求，不会有多余的内边距或空间浪费。

方案二：调整RadioListTile的布局约束（如果一定要用RadioListTile） #

如果坚持要用RadioListTile，可以通过调整它的内边距和外层约束来让它在Row里单行显示：

修改原Row布局（用Flexible代替Expanded） #

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    Flexible(
      child: buildRadioListLicense(1, getTranslated(context, 'received')),
    ),
    Flexible(
      child: buildRadioListLicense(2, getTranslated(context, 'inProgress')),
    ),
    Flexible(
      child: buildRadioListLicense(3, getTranslated(context, 'done')),
    ),
  ],
)

优化buildRadioListLicense方法 #

RadioListTile<dynamic> buildRadioListLicense(val, txt) {
  return RadioListTile(
    controlAffinity: ListTileControlAffinity.leading,
    activeColor: myRed,
    value: val,
    groupValue: _license,
    onChanged: (value) {
      setState(() {
        _license = value;
      });
    },
    title: Text(
      txt,
      style: TextStyle(fontSize: 12), // 缩小字体避免文字换行
      overflow: TextOverflow.ellipsis, // 文字过长时显示省略号
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 4), // 减少左右内边距
    dense: true, // 启用紧凑模式，减少垂直空间
    visualDensity: VisualDensity.compact, // 进一步压缩布局密度
  );
}

这里用Flexible代替Expanded，它不会强制子组件占满所有可用空间；同时通过contentPadding、dense、visualDensity来压缩RadioListTile的内边距和整体大小，再配合缩小字体，就能让三个选项挤在同一行里。

两种方案都能解决你的问题，个人更推荐方案一，因为它更贴合横向单选的场景，代码也更简洁直观。

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