swiftui - SwiftUI - 将视图悬停在内容视图之外

Question

如何将视图悬停在其内容视图之外？例如内容视图高度 = 400，悬停视图高度 = 1000 悬停视图将需要与内容视图重叠

struct ContentView: View {
    @State  var isHovering = false

    var body: some View {

        Button(action: {
            print("tap")
        }) {
            Text("Hover Me")
        }.onHover(perform: { hovering in
            isHovering.toggle()
        }).overlay(VStack {
            if self.isHovering {
                Rectangle()
                    .background(Color.red)
                    .frame(width: 400, height: 1000)
            } else {
                EmptyView()
            }
        }).frame(width: 400, height: 400)
    }
}

In this case, hover view will match content view height.

标签： swiftui

Answer 1

当 isHovering 为真时，Text 对象的高度和宽度将等于 Rectangle 对象。

Button(action: {
                print("tap")
            }) {
                Text("Hover Me")
                    .frame(width: self.isHovering ? 400 : .none, height: self.isHovering ? 1000 : .none)
                
            }.onHover(perform: { hovering in
                isHovering.toggle()
            }).overlay(VStack {
                if self.isHovering {
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(width: 400, height: 1000)
                } else {
                    EmptyView()
                }
            }).frame(width: 400, height: 400)