Flutter Column布局中Icon图标异常下移问题如何解决

期望实现图标在上、文本在下的垂直排列效果，使用Column组件实现布局时，文本显示位置正常，但Icon图标出现异常下移，异常效果如下：

当前使用的实现代码：

Column(
    mainAxisAlignment: MainAxisAlignment.start, 
    crossAxisAlignment: CrossAxisAlignment.center, 
    mainAxisSize: MainAxisSize.max,
    children: <Widget>[
      Container(          // 仅用于添加红色背景标记位置
        color: Colors.red,
        child: Icon(
          getIconDataLuna(fase),
          size: 90,
        ),
      ),
      const SizedBox(
        height: 15,
      ),
      Text(
        fase,
        style: const TextStyle(fontSize: 17),
      ),
    ],
  ),

Flutter的Icon组件本质是通过字体字形渲染的，最终显示位置受对应图标字体文件的字形度量参数（上下留白、基线位置）影响。如果使用的自定义图标（即getIconDataLuna返回的自定义图标）在导出字体时没有调整字形的边界位置，就会出现视觉上图标整体下移、上方冗余留白过多的问题，并非Column组件布局逻辑错误。

• 快速适配方案：给图标添加向上偏移修正
  在外层包裹Transform.translate，根据实际显示效果调整垂直偏移量即可快速对齐，90尺寸的图标一般向上偏移10~15像素即可达到预期：

  Container(
    color: Colors.red,
    child: Transform.translate(
      offset: const Offset(0, -12), // 垂直方向向上偏移12像素，可按需调整数值
      child: Icon(
        getIconDataLuna(fase),
        size: 90,
      ),
    ),
  )
  

• 根治方案：修正自定义图标字体导出配置
  如果是自行生成的自定义图标字体，在导出ttf文件时，将所有图标的字形对齐到字体画布上边缘，清除多余的上方留白，从资源层面解决偏移问题，后续使用无需额外做位置修正。
• 对齐兜底方案：固定容器尺寸手动对齐
  给图标外层的Container设置和图标尺寸一致的宽高，指定对齐方式为顶部居中，绕开字体度量带来的位置计算偏差：

  Container(
    color: Colors.red,
    width: 90,
    height: 90,
    alignment: Alignment.topCenter,
    child: Icon(
      getIconDataLuna(fase),
      size: 90,
    ),
  )
  

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