Flutter如何在容器屏幕上层点击触发显示Widget且不扰动原有内容

首选方案：使用Overlay（完全匹配需求） #

Flutter的Overlay是全局浮层栈结构，插入的组件会独立渲染在当前所有页面组件的最上层，完全不需要修改原有页面的组件结构，也不需要调用setState()触发当前页面重绘，完美对应你Android原生的实现逻辑。

具体实现代码 #

仅需修改GestureDetector的onTap回调即可，代码如下：

GestureDetector(
  onTap: (){
    // 1. 获取当前页面的Overlay实例
    OverlayState overlayState = Overlay.of(context);
    // 2. 获取点击按钮的坐标，对应原生代码里的reactionButton.getX/Y
    RenderBox renderBox = context.findRenderObject() as RenderBox;
    Offset buttonPosition = renderBox.localToGlobal(Offset.zero);
    // 3. 获取设备密度，对应原生的density参数
    double density = MediaQuery.of(context).devicePixelRatio;
    double widgetSize = 35 * density;

    // 4. 创建浮层组件，对应原生的ImageView
    OverlayEntry overlayEntry = OverlayEntry(
      builder: (context) {
        return Positioned(
          left: buttonPosition.dx,
          top: buttonPosition.dy,
          width: widgetSize,
          height: widgetSize,
          child: Image.network(
            "你的图片资源地址", // 替换为实际要加载的图片地址
            fit: BoxFit.cover,
          ),
        );
      }
    );

    // 5. 插入浮层到视图最上层，对应原生的addView+bringToFront逻辑
    overlayState.insert(overlayEntry);

    // 6. 执行自定义动画逻辑，动画结束后如需移除可调用overlayEntry.remove()
    animateReaction(overlayEntry);
  },
  child: Button(
    image: _coverImage(),
    width: double.infinity,
    height: 50,
    alignment: Alignment.center,
    fit: BoxFit.fitHeight,
  ),
),

可选方案：Stack嵌套（不推荐） #

如果不想使用Overlay，也可以把原有返回的Container外层嵌套Stack，同时在State中维护浮层组件列表List<Widget> _floatWidgets = []，每次点击往列表中新增浮层组件即可。这种方案需要调用setState()更新列表，会触发当前页面重绘，但不会修改原有子组件的运行逻辑。

• 问：在原有Container上层创建新Widget时是否必须调用setState()？
• 答：不需要。使用Overlay方案时完全不需要调用setState，仅采用Stack嵌套方案维护浮层列表时才需要调用。

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