Flutter：如何让可滚动Row组件内容不自动居中？

问题出在父组件的对齐逻辑上——你的SingleChildScrollView被嵌套在Column中，而Column默认的crossAxisAlignment是CrossAxisAlignment.center，这会导致整个可滚动容器被居中显示，进而让里面的内容看起来像是自动居中了。

你可以通过以下两种方式解决：

方式一：修改父Column的全局对齐方式 #

直接给外层Column添加crossAxisAlignment: CrossAxisAlignment.start，让所有子组件统一左对齐：

Padding(
  padding: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 8.0, top: 8.0),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    crossAxisAlignment: CrossAxisAlignment.start, // 添加这一行
    children: [
      buildHorizontalRow(entries),
      // 其他子组件
    ],
  ),
)

方式二：单独给可滚动容器设置左对齐 #

如果不想改变整个Column的对齐规则，给SingleChildScrollView套一个Align组件，强制它单独左对齐：

Widget buildHorizontalRow(List entries) {
  var list = <Widget>[];

  for (var entry in entries) {
    list.add(Text(entry.name));
  }

  return Align(
    alignment: Alignment.centerLeft,
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.start,
        children: list,
      ),
    ),
  );
}

额外优化（可选） #

如果需要让文本之间保持间隔，可以在Row的子元素之间插入间距组件：

for (var entry in entries) {
  list.add(Text(entry.name));
  list.add(const SizedBox(width: 8)); // 添加固定间距
}

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