如何让Wrap/Column子组件中的Transform.scale组件显示在最上层？

问题描述：在Wrap组件中，当某个子组件通过Transform.scale放大后，会被后续（索引更大）的组件遮挡——比如29号盒子能覆盖索引小于29的组件，但会被索引大于29的组件覆盖，需要让放大的组件显示在所有组件最上层。

核心原因 #

Flutter组件的层级由渲染顺序决定，Wrap的子组件按列表顺序依次渲染，索引越大的组件渲染顺序越靠后、层级越高，所以放大后的组件会被后面的组件遮挡。

解决方案：Stack + 定位渲染放大组件 #

通过Stack包裹原Wrap，当组件hover时，在Stack最上层渲染一个与原组件位置完全重合的放大版本，利用Stack的渲染顺序让放大组件处于最高层级。

修改后的完整代码：

class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final Rx<int?> hoverIndex = Rx<int?>(null);
  late final List<GlobalKey> _itemKeys;

  Color getRandomColor(int index) {
    final random = Random();
    final r = random.nextInt(256);
    final g = random.nextInt(256);
    final b = random.nextInt(256);
    return Color.fromARGB(255, r, g, b);
  }

  Widget widgetBuilder(int index) {
    final color = getRandomColor(index);
    final borderColor = getRandomColor(index);
    return InkWell(
      key: _itemKeys[index],
      onHover: (value) {
        hoverIndex.value = value ? index : null;
      },
      onTap: () {},
      child: Container(
        alignment: Alignment.center,
        width: 50,
        height: 50,
        decoration: BoxDecoration(
          color: color,
          border: Border.all(color: borderColor, width: 1),
        ),
        child: Text(index.toString()),
      ),
    );
  }

  late final itemList = [for (int i = 0; i < 100; i++) widgetBuilder(i)];

  @override
  void initState() {
    super.initState();
    _itemKeys = List.generate(100, (_) => GlobalKey());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Stack(
          children: [
            Wrap(
              spacing: 10,
              runSpacing: 10,
              children: itemList,
            ),
            // 渲染hover状态的放大组件
            Obx(() {
              final currentIndex = hoverIndex.value;
              if (currentIndex == null) return const SizedBox.shrink();

              final renderBox = _itemKeys[currentIndex].currentContext?.findRenderObject() as RenderBox?;
              if (renderBox == null) return const SizedBox.shrink();

              // 获取原组件的位置和尺寸
              final offset = renderBox.localToGlobal(Offset.zero);
              final size = renderBox.size;

              final color = getRandomColor(currentIndex);
              final borderColor = getRandomColor(currentIndex);

              return Positioned(
                left: offset.dx,
                top: offset.dy,
                width: size.width,
                height: size.height,
                child: Transform.scale(
                  scale: 1.5,
                  child: Container(
                    alignment: Alignment.center,
                    width: 50,
                    height: 50,
                    decoration: BoxDecoration(
                      color: color,
                      border: Border.all(color: borderColor, width: 1),
                    ),
                    child: Text(currentIndex.toString()),
                  ),
                ),
              );
            }),
          ],
        ),
      ),
    );
  }
}

代码说明 #

1. GlobalKey列表：给每个子组件分配GlobalKey，用于获取组件的位置和尺寸信息。
2. hover状态管理：用Rx<int?>记录当前hover的组件索引，hover时更新索引，离开时置空。
3. Stack层级控制：原Wrap保持正常布局，Stack最上层通过Positioned放置放大后的组件，位置与原组件完全重合，利用Stack的渲染顺序确保放大组件处于所有组件之上。
4. 移除原组件的Transform.scale：原组件不再需要缩放，放大效果由Stack上层的组件实现，避免原组件缩放后被遮挡。

另一种简化思路（适合简单场景） #

如果不需要保留原组件的阴影或交互状态，也可以直接在hover时将原组件从Wrap列表中移除，添加到列表末尾，利用Wrap的渲染顺序让它处于上层，但这种方法会改变Wrap的布局结构，仅适合布局不敏感的场景。

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