如何修复Flutter移动端RenderFlex右侧溢出3像素问题？

• 排查QuantitySelector内部布局，问题通常出在其内部Row组件未合理分配子元素空间：
  • 给QuantitySelector里的文本组件套Flexible，同时将Row的mainAxisSize设为MainAxisSize.min，避免Row强制占满父容器宽度：

    Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        IconButton(icon: const Icon(Icons.remove)),
        Flexible(
          child: Text(
            '${_quantity}',
            textAlign: TextAlign.center,
          ),
        ),
        IconButton(icon: const Icon(Icons.add)),
      ],
    )
    

• 限制QuantitySelector的最大宽度，避免其在小屏上超出父容器：

  ConstrainedBox(
    constraints: const BoxConstraints(maxWidth: 110),
    child: QuantitySelector(),
  )
  

• 给数量文本添加溢出处理，防止多位数文本撑爆布局：

  Text(
    '${_quantity}',
    overflow: TextOverflow.ellipsis,
    maxLines: 1,
  )
  

• 在MyCartTile的根Row中，用Spacer()分隔左侧内容与QuantitySelector，确保右侧有足够自适应空间：

  Row(
    children: [
      // 商品图片、名称等左侧组件
      const Spacer(),
      QuantitySelector(),
    ],
  )
  

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