SwiftUI：更改弹出窗口箭头颜色

Question

在 SwiftUI 中，如何更改将弹出框连接到其锚点的箭头的颜色？

在 SwiftUI 之外使用底层

UIPopoverController

时，我相信这是通过更改

backgroundColor

属性来完成的，但我在这里看不到访问该属性的方法。即使将

background

设置为最后一个修饰符也只会更改弹出窗口中内的视图；不是弹出框本身。

例如，将以下代码添加到视图中：

@State private var showDetailedView: Bool = false

// ...

.popover(isPresented: self.$showDetailedView) {
    Text("Hello!")
        .padding()
        .background(Color.red)
}
.onTapGesture {
    self.showDetailedView = true
}

...结果仍然是默认背景颜色的箭头（此示例取自深色模式下的本机 macOS）：

...在 iOS 上就像这样（通过 Catalyst 运行），这更糟糕！

Answer 1

这是一个使用

GeometryReader

 和两个 

.frame

 调用的纯 SwiftUI 解决方案。关键思想是使背景大于所呈现视图的大小。由于 SwiftUI 此时不会剪辑内容，因此这将覆盖弹出箭头上的默认背景。

请注意，这仅适用于纯色背景。在 Catalyst 中，已经绘制了纯色背景，因此透明内容会显示您发布的丑陋的黑色。对于这种情况，我们可能不得不求助于 UIViewRepresentable 之类的东西。

考虑以下更改顶部边缘箭头颜色的示例：

.background(GeometryReader { geometry in
    Color
        .white
        .frame(width: geometry.size.width,
                height: geometry.size.height + 100)
        .frame(width: geometry.size.width,
                height: geometry.size.height,
                alignment: .bottom)
})

说明：

第一个内部框架创建一个白色矩形，比您呈现的视图高 100 像素。
第二个外框架创建一个与您呈现的视图大小相同的新框架。这是通过
• GeometryReader

   实现的。

第二个外框架中的
• alignment:

   参数确保这两个框架在底部对齐。

由于外框与
• GeometryReader

   一样大，因此它填充了所呈现视图的整个背景。

“溢出”的内容会覆盖默认的黑色箭头颜色。

要使其适用于任意箭头边缘，您可能需要更改内部框架，增加宽度和高度。至于外框的对齐，使用默认参数

.center

 应该可以。

Answer 2

这就是弹出窗口视图用背景颜色填充整个视图所需的全部内容：

struct ExamplePopoverView: View {
var body: some View {
    Text("Example Popover Content")
        .background(Color.red.offset(y: 15).padding(.top, -15))
    }
}

将所有内容稍微向下偏移并将其延伸到顶部以填补新的间隙。是的，您可以设置负填充。 :)