Flutter中如何让Column组件内的元素从同一位置开始对齐？

要让列表中的文本元素从同一位置开始对齐，调整嵌套Column的crossAxisAlignment属性即可，具体修改如下：

修改后的代码 #

Widget build(BuildContext context) {
  return Column(
    children: [
      Image.network(url),
      TextButton(onPressed: () {}, child: const Text('Show Details')),
      const Column(
        // 关键设置：将交叉轴对齐方式改为start，让子元素左对齐
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('order : Late'),
          Text(r'price : 10$'),
          Text('ingredient : milk - butter - coffee ')
        ],
      ),
    ],
  );
}

原理说明 #

• 默认状态下Column的crossAxisAlignment值为CrossAxisAlignment.center，子元素会居中显示，导致文本起始位置参差不齐。
• 将crossAxisAlignment设为CrossAxisAlignment.start后，所有子元素会沿水平方向的起始端对齐，也就是全部左对齐，自然能从同一位置开始排列。

如果需要让嵌套的Column占满父容器宽度，可以保留SizedBox(width: double.infinity)，但需将其作为Column的子元素，同时配合crossAxisAlignment: CrossAxisAlignment.start使用，示例如下：

const Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    SizedBox(width: double.infinity),
    Text('order : Late'),
    Text(r'price : 10$'),
    Text('ingredient : milk - butter - coffee ')
  ],
),

内容的提问来源于stack exchange，提问作者Hana.HD