SwiftUI如何让hover触发的悬浮视图超出父内容视图边界显示

问题原因 #

你遇到的裁切问题核心是：SwiftUI 中视图默认会约束子内容、叠加层（overlay）在自身 frame 范围内显示，超出部分默认会被裁切，你当前的实现中高度 1000 的悬浮矩形被高度 400 的父视图边界限制，无法完整展示。

解决方案 #

只需要在设置了固定尺寸的父视图末尾添加 clipped(false) 修饰符，关闭父视图的裁切限制即可，若需要悬浮视图优先展示不被同层级其他视图遮挡，可同步添加 zIndex 修饰符提高层级。

修改后完整代码 #

struct ContentView: View {
    @State var isHovering = false
    var body: some View {
        Button(action: {
            print("tap")
        }) {
            Text("Hover Me")
        }
        .onHover(perform: { hovering in
            isHovering = hovering
        })
        .overlay(VStack {
            if isHovering {
                Rectangle()
                    .fill(Color.red)
                    .frame(width: 400, height: 1000)
            }
        })
        .frame(width: 400, height: 400)
        .clipped(false) // 关闭裁切，允许内容超出自身边界
        .zIndex(1) // 提高当前视图层级，避免悬浮内容被同层级其他视图遮挡
    }
}

额外注意事项 #

• 若父视图外层还有其他设置了固定 frame 的容器视图，也需要给外层容器同步添加 clipped(false)，否则悬浮视图会被外层容器裁切
• 如果需要实现悬浮视图覆盖整个应用窗口的效果，可以将 isHovering 状态提升到根视图层级，直接在根视图的 ZStack 中添加悬浮视图，完全不受下层子视图的 frame 约束
• 上述代码中把 isHovering.toggle() 替换为了 isHovering = hovering，避免 hover 状态进出时出现误触发的逻辑错误

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