SwiftUI：更改弹出框箭头颜色

Question

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

在UIPopoverController之外使用底层 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一样大，因此它填充了呈现视图的整个背景。

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

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