Flutter Text组件设置FontWeight粗体后宽度变化导致标签偏移如何解决？

你遇到的标签宽度跳动问题本质是不同字重的相同文本渲染宽度不一致：当「Semua」标签处于选中状态时使用w700粗体，文本渲染宽度更宽；切换为未选中状态切回常规字重时，文本宽度会缩小，包裹文本的Container随内容自适应收缩，最终导致后续标签整体左移产生跳动。

下面按实现成本从低到高给出三个可行方案：

方案1：给标签添加最小宽度约束（最简单） #

直接给每个标签外层的Container添加constraints属性，设置最小宽度大于等于该标签粗体状态下的最大宽度即可，保证切换字重时容器宽度不会收缩：

Container(
  // 新增下面这行，数值可根据实际显示效果调整到适配所有标签
  constraints: const BoxConstraints(minWidth: 60),
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  // 其余原有属性保持不变
)

方案2：叠层文本占位法（适配性最强，无需硬编码宽度） #

不需要提前计算宽度，通过双层Text实现自动占位：底层放透明的粗体文本占住最大宽度，上层放实际显示的文本，字重随选中状态切换，无论上层字重如何变化，容器宽度都由底层粗体文本固定：
将原来的Text组件替换为以下Stack结构即可：

Stack(
  mainAxisSize: MainAxisSize.min,
  children: [
    // 底层占位：透明的粗体文本，固定最大宽度
    Text(
      "Semua",
      style: TextStyle(
        fontFamily: "NotoSans",
        fontWeight: FontWeight.w700,
        color: Colors.transparent,
      ),
    ),
    // 上层：实际显示的文本，随状态切换字重
    Text(
      "Semua",
      style: TextStyle(
        fontFamily: "NotoSans",
        color: semuaKolamTextColor,
        fontWeight: _selectedJenisKolam == 0 ? FontWeight.w700 : FontWeight.normal,
      ),
    ),
  ],
)

方案3：使用可变字重字体特性（适合支持可变字重的字体） #

如果你使用的NotoSans字体是可变字重版本，可以通过fontVariations参数控制字重，部分可变字重字体可以做到字重变化时宽度保持一致：

TextStyle(
  fontFamily: "NotoSans",
  color: semuaKolamTextColor,
  // 用fontVariations代替fontWeight属性
  fontVariations: [
    FontVariation('wght', _selectedJenisKolam == 0 ? 700 : 400),
  ],
)

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