SwiftUI求助：Overlay的ContentView无法超出父视图范围

我想用Overlay把一个视图做成弹窗/提示框（tooltip），但发现被叠加的ContentView没法超出宿主视图（Button）的边界。试过设置fixedSize、frame(maxWidth: .infinity)等方法都没效果，相关代码如下：

import SwiftUI

struct ContentView: View {
    let message = "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like)"

    var body: some View {
        VStack {
            Button {

            } label: {
                Text("Tap Me")
                    .background(
                        Rectangle()
                            .fill(.red)
                    )
            }
            .overlay {
                contentView
            }
        }
        .padding()
    }

    var contentView: some View {
        Text(message)
            .foregroundColor(Color.white)
            .padding()
            .background(Color.black)
            .foregroundColor(Color.white)
            .clipShape(RoundedRectangle(cornerRadius: 5))
            .offset(y: 60)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        return ContentView()
    }
}

问题原因分析 #

核心原因是SwiftUI的Overlay是宿主视图的“子布局”，它的布局空间完全受限于宿主视图的边界：

• Overlay本质是附着在宿主视图上的附加内容，默认会被裁剪在宿主视图的布局范围内。哪怕你用offset偏移内容，只是改变了绘制位置，但宿主的布局边界依然会限制Overlay内容的显示区域，超出部分会被自动裁剪。
• 你尝试的fixedSize只是让ContentView保持自身内容的尺寸，但Overlay的父容器（即Button提供的Overlay布局上下文）本身的可用空间就是Button的大小，所以ContentView的内容还是会被这个容器的边界裁剪。同理，frame(maxWidth: .infinity)也无法突破宿主视图的布局限制，因为这个frame的最大宽度是相对于Overlay的父容器（Button）的可用宽度而言的。

简单来说，Overlay从设计上就是用来在宿主视图内部或紧贴宿主显示附加内容的，不适合用来做需要突破宿主边界的弹窗/tooltip这类组件。

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