如何在Row组件中显示Badge且避免元素重叠

Row 中每个 Expanded 子项按顺序渲染，后面的子项会绘制在前面的子项上方，导致前面子项的 Badge 溢出部分被后面的子项覆盖。

方法一：通过 Transform 提升层级 #

给每个包含 Badge 的子项添加 Transform 组件，通过设置 z 轴平移值，让前面的子项层级高于后面的子项，确保 Badge 显示在最上层。

Row(
  children: List.generate(
    7,
    (index) => Expanded(
      child: Transform(
        // 索引越小z值越高，保证前面的Badge不会被后面的元素覆盖
        transform: Matrix4.translationValues(0, 0, 7 - index.toDouble()),
        child: Padding(
          padding: const EdgeInsets.all(2),
          child: Badge(
            badgeContent: const Text('a'),
            child: Container(
              color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
            ),
          ),
        ),
      ),
    ),
  ),
)

方法二：用 Stack 分层渲染 #

将原 Row 作为底层，在 Stack 上层单独绘制所有 Badge，这样 Badge 会处于所有子项的最上层。

Stack(
  children: [
    Row(
      children: List.generate(
        7,
        (index) => Expanded(
          child: Padding(
            padding: const EdgeInsets.all(2),
            child: Container(
              color: Color((Random().nextDouble() * 0xFFFFFF).toInt()).withOpacity(1.0),
            ),
          ),
        ),
      ),
    ),
    ...List.generate(7, (index) {
      final screenWidth = MediaQuery.of(context).size.width;
      final itemWidth = screenWidth / 7;
      // 根据子项宽度计算Badge位置，可根据需求调整数值
      final badgeLeft = itemWidth * index + itemWidth - 12;
      return Positioned(
        left: badgeLeft,
        top: -2,
        child: const Badge(
          badgeContent: Text('a'),
        ),
      );
    }),
  ],
)

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