前军教程网

在一些细微狭小的空间下，Text组件在IOS和Android中使用默认字体，并在相同高度的情况，垂直居中会出现不同的情况

费话不多说，先上代码

Container(
        height: 19,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(6)),
          color: backgroundColor ?? context.theme.primaryColorLight,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              label,
              style: context.textTheme.labelSmall!.copyWith(
                fontWeight: FontWeight.bold,
                fontSize: 11,
                height: 1.1,
              ),
              textAlign: TextAlign.center,
            ),
            text ?? const SizedBox(width: 0)
          ],
      ),
 ),

Container高度19.0，字体大小是11.0

Android ：

IOS：

通常情况在设定了字体的高度的情况下，正常是可以居中的，但是在高度偏小，字体无法正确识别上升，下降以及行距，这时候就需要用到Text组件中的属性StrutStyle来手动设置段落属性，强制将字体居中。

StrutStyle属性

定义了Strut，它设置了行相对于基线的最小高度。

Strut是独立于任何文本内容或[TextStyle]的。

Strut的垂直组件如下：

* 字体定义的行距的一半

* `上升 * 高度`

* `下降 * 高度`

* 字体定义的行距的一半

属性：

* [fontFamily]：计算strut时要使用的字体的名称（例如，Roboto）。将不绘制来自字体的任何字形，并且字体仅用于度量。

* [fontFamilyFallback]：要在找不到[fontFamily]中的字体时搜索的有序字体系列名称。当所有指定的字体系列都用尽并且未找到匹配时，将使用默认平台字体。

* [fontSize]：文本的大小（以逻辑像素为单位），用于从字体获取指标。这个值不能为负。

默认值为14个逻辑像素。

* [height]：行高应该是的[fontSize]的倍数。如果省略或为空，则行高将采用字体定义的上升和下降值。如果提供了，行的EM-square上升和下降（总和为[fontSize]）将按[height]缩放。

[height]将根据字体的上升和下降之间的比例以不同的方式影响基线上方和基线下方的间距。此属性与领先倍增器分开，领先倍增器通过[leading]进行控制。

默认为null。

* [leading]：作为[fontSize]的倍数的strut的自定义行距。领先是行之间的额外间距。一半的领先被添加到行高的顶部，另一半被添加到底部。这与[height]不同，因为间距在基线上方和基线下方总是均匀分布的。

默认为null，这将使用字体指定的行距。

* [fontWeight]：计算strut时要使用的字体的类型厚度（例如，粗体）。

默认值为[FontWeight.w400]。

* [fontStyle]：计算strut时要使用的字体变体（例如，斜体）。

默认为[FontStyle.normal]。

* [forceStrutHeight]：当为true时，所有行都将使用strut的高度布局。将忽略/覆盖所有行和运行特定的度量标准，而只使用strut度量标准。

此属性保证统一的行间距，但相邻行中的文本可能重叠。应谨慎启用此属性，因为它绕过了大部分垂直布局系统。

默认值为false。

修改后：

Container(
        height: 19,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(6)),
          color: backgroundColor ?? context.theme.primaryColorLight,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Text(
              label,
              style: context.textTheme.labelSmall!.copyWith(
                fontWeight: FontWeight.bold,
                fontSize: 11,
                height: 1.1,
              ),
              /// forceStrutHeight=true 强制按照Strut布局，说白了就是强制居中其他属性都失效
              strutStyle: const StrutStyle(height: 1.1, forceStrutHeight: true),
              textAlign: TextAlign.center,
            ),
            text ?? const SizedBox(width: 0)
          ],
        ),
),