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)
})

说明：

• 第一个内部框架创建一个白色矩形，该矩形比您显示的视图高100px。
• 第二个外部框架创建一个新框架，该框架的大小与您显示的视图相同。这是通过GeometryReader实现的。
• 第二个外部框架中的alignment:参数确保这两个框架在底部对齐。
• 由于外部框架与GeometryReader一样大，因此它会填充您所显示视图的整个背景。

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

要使用任意箭头边缘进行此操作，您可能需要更改内部框架，同时增加宽度和高度。至于外部框架的对齐方式，应该使用默认参数.center。