如何让Flutter的RadioListTile仅占用所需最小空间？

要让每个RadioListTile仅占用自身所需的最小宽度，同时避免无限宽度溢出问题，你可以通过以下两种方式修改代码：

方式一：使用Wrap替代Row（推荐，自动换行适配） #

将外层的Row替换为Wrap，并移除每个RadioListTile外层的Flexible组件。Wrap会自动让子组件占据自身所需宽度，超出屏幕时自动换行，完美匹配你的期望效果：

return Scaffold(
  body: SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Text('Content 1'),
        Text('Content 2'),
        Wrap( // 替换原来的Row
          spacing: 8.0, // 可选：设置组件间的横向间距
          runSpacing: 8.0, // 可选：设置行与行之间的纵向间距
          children: [
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Straw/ Bamboo/ polyhtene/ plastic/ canvas',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Straw/ Bamboo/ polyhtene/ plastic/ canvas', style: style),
            ),
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Soil/ Brick',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Soil/ Brick', style: style),
            ),
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Tin ( CICit)',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Tin ( CICit)', style: style),
            ),
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Wood',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Wood', style: style),
            ),
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Brick-Cement',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Brick-Cement', style: style),
            ),
            RadioListTile(
              contentPadding: EdgeInsets.zero,
              visualDensity: VisualDensity(horizontal: 0),
              value: 'Others',
              groupValue: groupValue,
              onChanged: onChangedMethod,
              title: Text('Others', style: style),
            ),
          ],
        ),
      ],
    ),
  ),
);

方式二：保留Row，使用Flexible(flex:0)控制宽度 #

如果需要保持横向单行布局（超出时可搭配滚动），可以给每个Flexible设置flex:0，让子组件仅占用自身最小宽度：

return Scaffold(
  body: SafeArea(
    child: Column(
      mainAxisSize: MainAxisSize.max,
      children: [
        Text('Content 1'),
        Text('Content 2'),
        SingleChildScrollView( // 添加滚动避免溢出
          scrollDirection: Axis.horizontal,
          child: Row(
            children: [
              Flexible(
                flex: 0, // 不分配额外空间
                fit: FlexFit.loose, // 子组件取自身最小宽度
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Straw/ Bamboo/ polyhtene/ plastic/ canvas',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Straw/ Bamboo/ polyhtene/ plastic/ canvas', style: style),
                ),
              ),
              Flexible(
                flex: 0,
                fit: FlexFit.loose,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Soil/ Brick',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Soil/ Brick', style: style),
                ),
              ),
              // 剩余RadioListTile重复上述Flexible配置即可
              Flexible(
                flex: 0,
                fit: FlexFit.loose,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Tin ( CICit)',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Tin ( CICit)', style: style),
                ),
              ),
              Flexible(
                flex: 0,
                fit: FlexFit.loose,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Wood',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Wood', style: style),
                ),
              ),
              Flexible(
                flex: 0,
                fit: FlexFit.loose,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Brick-Cement',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Brick-Cement', style: style),
                ),
              ),
              Flexible(
                flex: 0,
                fit: FlexFit.loose,
                child: RadioListTile(
                  contentPadding: EdgeInsets.zero,
                  visualDensity: VisualDensity(horizontal: 0),
                  value: 'Others',
                  groupValue: groupValue,
                  onChanged: onChangedMethod,
                  title: Text('Others', style: style),
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  ),
);

原理说明 #

• 原代码中Flexible默认flex:1，会让每个子组件均分Row的剩余空间，导致长标题被压缩、短标题占用多余空间。
• 使用Wrap时，子组件默认以自身固有宽度布局，超出屏幕自动换行，完全满足“仅占自身所需空间”的需求。
• 若用Row配合Flexible(flex:0)，Flexible不会为子组件分配额外空间，仅让其占用自身最小宽度，搭配横向滚动可避免溢出问题。

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