Flutter中如何让文本在正方形容器内垂直水平居中？

我来帮你搞定这个布局需求！你要的是让正方形容器内的文本第一行水平居中，同时整个文本块垂直对齐容器的中线位置，我帮你调整代码并解释关键要点：

修正后的核心代码 #

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: Colors.yellow),
  ),
  // 核心：直接在容器内部控制文本的垂直居中+第一行水平居中
  child: Align(
    alignment: Alignment.center,
    child: Text(
      text,
      // 让文本第一行水平居中，若文本换行，所有行都会保持居中
      textAlign: TextAlign.center,
      // 可选：添加溢出处理，避免文本超出容器边界
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
    ),
  ),
)

特殊需求：仅第一行居中，后续行左对齐 #

如果你的文本可能换行，且要求只有第一行居中、后续行左对齐，可以用RichText拆分文本块实现：

Container(
  width: 100,
  height: 100,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(color: Colors.yellow),
  ),
  child: Align(
    alignment: Alignment.center,
    child: RichText(
      textAlign: TextAlign.center,
      text: TextSpan(
        style: DefaultTextStyle.of(context).style,
        children: [
          TextSpan(text: "第一行居中"),
          TextSpan(
            text: "\n后续行左对齐\n更多内容",
            // 后续行手动设置左对齐（通过文本换行+父级 textAlign 仅影响第一行）
          ),
        ],
      ),
    ),
  ),
)

关键调整说明 #

• 垂直居中：用Align(alignment: Alignment.center)直接让文本块在容器内垂直+水平居中，比嵌套Row更简洁直接，这是原代码没精准命中需求的核心原因。
• 第一行水平居中：给Text设置textAlign: TextAlign.center，就能确保第一行（以及所有行）水平居中；如果要做差异化换行处理，就用RichText拆分文本段。
• 原代码里的Row(mainAxisAlignment: MainAxisAlignment.center)只是让容器在父组件里水平居中，容器内部的文本布局需要在容器自身内部处理哦~

这样调整后，文本就会正好落在圆形容器的垂直中线位置，同时第一行水平居中，完全匹配你的需求！

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