Flutter中如何让圆形容器内的文本正确居中？

针对你遇到的文本在圆形容器内未居中的情况，常见原因及解决方案如下：

可能的原因 #

• TextStyle中设置了不合适的height属性：如果height值不等于1，会改变文本的行高，导致视觉上的偏移。
• 字体本身的基线偏移：部分字体的数字字符基线位置特殊，造成视觉上的不居中。
• Text组件未明确设置文本对齐：虽然使用了Center，但Text自身的对齐方式可能影响最终显示。

解决方案 #

1. 修正TextStyle的行高属性 #

确保TextStyle的height为1，同时通过strutStyle强制行高与字号匹配：

return SizedBox(
  height: 21,
  width: 21,
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: MyColors.gray2,
      shape: BoxShape.circle,
    ),
    child: Center(
      child: Text(
        location.toString(),
        textScaleFactor: 1,
        textAlign: TextAlign.center,
        style: positionTextStyle.copyWith(
          height: 1,
          strutStyle: const StrutStyle(height: 1),
        ),
      ),
    ),
  ),
);

2. 使用Align组件替代Center #

有时候Align组件的居中对齐更精准，可以尝试替换：

return SizedBox(
  height: 21,
  width: 21,
  child: DecoratedBox(
    decoration: BoxDecoration(
      color: MyColors.gray2,
      shape: BoxShape.circle,
    ),
    child: Align(
      alignment: Alignment.center,
      child: Text(
        location.toString(),
        textScaleFactor: 1,
        style: positionTextStyle.copyWith(height: 1),
      ),
    ),
  ),
);

3. 调整字体或文本基线 #

如果是字体问题，可以尝试更换字体，或者设置textBaseline为TextBaseline.alphabetic：

Center(
  child: Text(
    location.toString(),
    textScaleFactor: 1,
    style: positionTextStyle,
    textBaseline: TextBaseline.alphabetic,
  ),
)

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