为何SingleChildScrollView会横向居中Row？未设置却出现异常

解决方案 #

给SingleChildScrollView的子元素Row设置mainAxisSize: MainAxisSize.min，或者用Align组件包裹Row并指定alignment: Alignment.centerLeft，即可让Row保持左对齐。

修改后的代码示例1（设置Row的mainAxisSize） #

Widget _buildPaymentMethodList() {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      mainAxisSize: MainAxisSize.min, // 添加该行
      children: paymentMethods.map((paymentMethod) => _buildPaymentMethodItem(paymentMethod)).toList(),
    ),
  );
}

修改后的代码示例2（使用Align包裹） #

Widget _buildPaymentMethodList() {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Align(
      alignment: Alignment.centerLeft,
      child: Row(
        children: paymentMethods.map((paymentMethod) => _buildPaymentMethodItem(paymentMethod)).toList(),
      ),
    ),
  );
}

原因说明 #

当Row直接作为Column的子元素时，Column的crossAxisAlignment: CrossAxisAlignment.start会强制Row左边缘与Column对齐，同时Row默认的mainAxisSize: MainAxisSize.max会让Row宽度撑满父容器，但Row的子元素依然保持左对齐。

而当Row被SingleChildScrollView包裹后，SingleChildScrollView的宽度等于父容器宽度（如屏幕宽度），此时Row的mainAxisSize: MainAxisSize.max会让Row宽度与SingleChildScrollView一致。如果Row子元素总宽度小于SingleChildScrollView的宽度，Flutter布局系统会默认将Row在视口中居中显示，这就是出现意外居中的原因。

设置mainAxisSize: MainAxisSize.min会让Row宽度仅包含子元素总宽度，自然左对齐；用Align包裹则直接强制Row在SingleChildScrollView中左对齐，不受子元素宽度影响。

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