Flutter Dart双绘制场景文本与圆形总高度iOS端不一致问题咨询

排查方向 #

• 字体渲染平台差异：iOS和Android对Text行高的默认计算逻辑不同，你使用的GoogleFonts.heebo在iOS端会默认添加额外的顶部行前距，尤其是多行文本场景下，实际渲染高度会高于你理论计算的2*24*heightFactor值，是20px差值的主要来源。
• 浮点精度累积误差：iOS系统对非整数的逻辑像素值会统一向上取整，你代码中多个SizedBox的高度都是heightFactor乘以浮点数的结果，多个组件的微小取整误差累积后就会出现20px左右的偏差。
• 布局对齐规则差异：如果你外层容器用的是Column，默认的CrossAxisAlignment.start对齐规则下，iOS端Text组件的基线对齐会额外产生上下留白，进一步拉高总高度。

解决方案 #

1. 修正Text的行高计算规则，给TextStyle新增leadingDistribution: TextLeadingDistribution.even属性，强制行高在文字上下均分，消除iOS默认的额外顶部留白：

!displayButtons ? 
SizedBox(
  child:CircularProgressIndicator(
    strokeWidth:5, 
    valueColor: AlwaysStoppedAnimation(Color(0xffD10274)),
  ),
  height: 100.0*heightFactor,
  width: 100.0*heightFactor,
):
Text(
  "Xxxxxxxxxxxxxxxxxxxxxxxxxxxx\nxxxxxxxxxxxxxxxxx", 
  style:GoogleFonts.heebo(
    color:Color(0xff333333),
    textStyle:TextStyle(
      height:24/16,
      leadingDistribution: TextLeadingDistribution.even, // 新增行高分配规则
      fontStyle:FontStyle.normal,
      fontWeight:FontWeight.w300, 
      fontSize:16*heightFactor
    )
  ),
  textAlign:TextAlign.center
),

2. 所有高度计算结果统一做取整处理，避免iOS的浮点取整误差：

// 所有高度赋值都用roundToDouble处理为整数逻辑像素
!displayButtons ? SizedBox(height: (heightFactor*42.0).roundToDouble()):SizedBox(height: (heightFactor*19.0).roundToDouble()),

3. 外层容器强制固定总高度，直接约束为理论计算的204*heightFactor，彻底屏蔽子组件的渲染差异：

SizedBox(
  height: (204 * heightFactor).roundToDouble(),
  child: Column(
    // 你的原有布局代码
  )
)

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