切换fontWeight后保持文本宽度不变的优雅解决方案

问题本质 #

切换fontWeight时出现布局抖动，核心原因是粗体文本的水平排版宽度大于常规字重下的测量值，触发父容器重排。之前用Stack叠加透明粗体文本预留宽度的方案属于冗余hack，会增加不必要的渲染节点，不适合生产环境使用。

推荐方案（按优先级从高到低） #

• 固定Tab宽度，文本居中
  这是主流原生平台、成熟UI库TabBar组件的标准实现：将TabBar头部可用宽度按Tab数量均分，或者给每个Tab设置预设固定宽度，标签内文本始终水平居中展示，同时配置单行截断规则避免长文本溢出。该方案完全没有额外计算开销，切换字重时不会触发任何父容器重排，布局稳定性最高。

• 双状态宽度预计算，取最大值预留空间
  如果需要Tab宽度随文本内容自适应，可以在首次布局阶段对每个Tab的文本分别测量常规字重、粗体字重下的排版宽度，取两个宽度的较大值加上左右内边距，作为对应Tab标签的最小固定宽度，文本在容器内居中即可。
  以Flutter为例的核心实现代码：

  // 分别测量两种字重下的文本宽度
  final regularTextPainter = TextPainter(
    text: TextSpan(text: tabLabel, style: regularTextStyle),
    textDirection: TextDirection.ltr,
  )..layout();
  final boldTextPainter = TextPainter(
    text: TextSpan(text: tabLabel, style: boldTextStyle),
    textDirection: TextDirection.ltr,
  )..layout();
  // 取最大值作为Tab宽度基准
  final tabItemWidth = max(regularTextPainter.width, boldTextPainter.width) + 16 * 2;
  

  该方案没有冗余渲染节点，性能远高于叠加透明层的hack方案，自适应宽度的场景下体验和固定宽度方案一致。

• 可变字体固定字宽（条件适用）
  如果项目使用支持可变字重（Variable Font）的自定义字体，可以通过字体配置固定字宽轴参数，让不同字重下的字符占位完全一致。Web端可通过font-variation-settings配置，客户端侧引入带等宽轴的可变字体即可实现无任何宽度变化的字重切换，体验最优，但对字体资源有要求，适用场景有限。

方案对比 #

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