Flutter中如何让橙色容器内文本整体居中且行内左对齐？

要实现橙色容器内文本整体水平居中，同时保持每行左对齐的效果，核心是让文本块的宽度由自身最长行决定，再将这个文本块整体居中在橙色容器中。可以通过 IntrinsicWidth + Center 组合实现，修改后的代码如下：

Row(
  children: [
    Spacer(),
    Expanded(
      child: Container(
        color: Colors.orange,
        child: Center(
          child: IntrinsicWidth(
            child: Text(
              "The quick brown fox jumps over the lazy dog",
              style: TextStyle(fontSize: 24),
              textAlign: TextAlign.left,
            ),
          ),
        ),
      ),
    ),
    Spacer()
  ],
)

原理说明 #

• IntrinsicWidth：强制子组件（这里是Text）的宽度等于自身内容中最长一行的宽度，避免文本占满橙色容器的全部宽度。
• Center：将被IntrinsicWidth约束后的文本块，整体居中在橙色容器内。
• textAlign: TextAlign.left：确保文本的每一行都保持左对齐，不会因为容器宽度变化而让单行文单独居中。

为什么之前的尝试无效？ #

• 直接用Center包裹Text：Text会默认占满Expanded分配的宽度，textAlign作用于每一行，导致每行单独居中，而非文本块整体居中。
• 仅使用IntrinsicWidth：文本块宽度被约束为内容宽度，但会默认靠左对齐，无法实现整体居中。

内容的提问来源于stack exchange，提问作者Marc Van Daele