Flutter中缩小容器尺寸时，如何让文本保持居中？

问题分析 #

当容器尺寸与字体大小同步缩小时，文本偏移至容器下方，核心原因是：

• Text组件默认的基线对齐逻辑，在小尺寸下会导致行高计算与容器居中对齐出现偏差
• 原代码中嵌套的Align组件属于冗余布局，可能干扰容器的居中计算

解决方法 #

方案1：移除冗余的Align组件

容器本身已设置alignment: Alignment.center，无需额外嵌套Align，直接将Text作为Container的child，减少布局层级冲突：

Container(
  height: height,
  width: width,
  alignment: Alignment.center,
  decoration: _isSelected
      ? BoxDecoration(
          color: Colors.transparent,
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
        )
      : null,
  child: Text(
    _displayText.isEmpty ? 'Enter Text' : _displayText,
    textAlign: TextAlign.center,
    overflow: TextOverflow.visible,
    maxLines: 1,
    style: TextStyle(
      color: Colors.black,
      fontSize: fontSize,
    ),
  ),
)

方案2：通过StrutStyle强制统一基线对齐

如果仍存在偏移，是因为不同字体大小的基线计算差异，给Text添加strutStyle约束行高和基线：

Container(
  height: height,
  width: width,
  alignment: Alignment.center,
  decoration: _isSelected
      ? BoxDecoration(
          color: Colors.transparent,
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
        )
      : null,
  child: Text(
    _displayText.isEmpty ? 'Enter Text' : _displayText,
    textAlign: TextAlign.center,
    overflow: TextOverflow.visible,
    maxLines: 1,
    strutStyle: StrutStyle(
      fontSize: fontSize,
      leading: 1, // 行高与字体大小比例设为1，消除额外间距
      forceStrutHeight: true,
    ),
    style: TextStyle(
      color: Colors.black,
      fontSize: fontSize,
    ),
  ),
)

方案3：用Center组件替代容器alignment

若容器的alignment属性未生效，直接用Center组件包裹Text，布局逻辑更明确：

Container(
  height: height,
  width: width,
  decoration: _isSelected
      ? BoxDecoration(
          color: Colors.transparent,
          border: Border.all(
            width: 2,
            color: Colors.black,
          ),
        )
      : null,
  child: Center(
    child: Text(
      _displayText.isEmpty ? 'Enter Text' : _displayText,
      textAlign: TextAlign.center,
      overflow: TextOverflow.visible,
      maxLines: 1,
      style: TextStyle(
        color: Colors.black,
        fontSize: fontSize,
      ),
    ),
  ),
)

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