Flutter如何设置Row固定宽度 解决Row默认占满全宽问题

问题现象 #

开发中给Row组件配置mainAxisSize: MainAxisSize.min希望组件宽度自适应内容、不撑满父容器，实际运行时Row始终占满父容器全部可用宽度。

• 预期自适应窄宽度效果：
  
• 实际占满全宽异常效果：
  

问题对应原有代码如下：

Card(
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.height),
      SizedBox(
        width: 5,
      ),
      Text(
        'Sort',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
      SizedBox(
        width: 24,
      ),
      Text(
        '|',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
      SizedBox(
        width: 24,
      ),
      Icon(Icons.filter_alt_outlined),
      SizedBox(
        width: 5,
      ),
      Text(
        'Filter',
        style: ReediusCustomTheme.lable1
            .copyWith(color: ReediusCustomTheme.lableColor1),
      ),
    ],
  ),
),

问题原因 #

mainAxisSize: MainAxisSize.min仅在父组件传递松约束（即不强制子组件撑满可用宽度）时生效。代码中Row的直接父组件是Card，Card默认会向子组件传递紧约束，强制子组件撑满自身全部可用宽度，因此Row的min宽度配置被父级约束覆盖，无法生效。

解决方案 #

根据需求选择以下任意一种方案即可：

• 实现内容自适应宽度（和预期截图效果一致）：在Row外层包裹一层Center组件，解除父级的强制撑满约束，让Row可以按照内容尺寸渲染，同时自动在Card内居中：

Card(
  child: Center(
    heightFactor: 1, // 可选配置，让Card高度也适配Row内容高度
    child: Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        Icon(Icons.height),
        SizedBox(width: 5,),
        Text(
          'Sort',
          style: ReediusCustomTheme.lable1
              .copyWith(color: ReediusCustomTheme.lableColor1),
        ),
        SizedBox(width: 24,),
        Text(
          '|',
          style: ReediusCustomTheme.lable1
              .copyWith(color: ReediusCustomTheme.lableColor1),
        ),
        SizedBox(width: 24,),
        Icon(Icons.filter_alt_outlined),
        SizedBox(width: 5,),
        Text(
          'Filter',
          style: ReediusCustomTheme.lable1
              .copyWith(color: ReediusCustomTheme.lableColor1),
        ),
      ],
    ),
  ),
)

• 实现指定固定宽度：在Row外层包裹SizedBox组件，明确设置需要的固定宽度值即可：

Card(
  child: SizedBox(
    width: 220, // 替换为实际需要的固定宽度数值
    child: Row(
      // 原有Row的配置保持不变即可
    ),
  ),
)

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