SwiftUI：更改弹出箭头颜色答案

【问题标题】：SwiftUI: Change Popover Arrow ColorSwiftUI：更改弹出箭头颜色
【发布时间】：2020-09-05 18:01:48
【问题描述】：

在 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 运行），更糟糕！

【问题讨论】：

目前无法测试，但您是否为 .popover 尝试了 .accentColor(Color.red)？
不幸的是，这对 iOS 上的箭头颜色没有影响，而在 macOS 上，它只是导致错误：“'accentColor' 在 macOS 中不可用 "。

标签： ios macos formatting swiftui popover

【解决方案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的默认参数应该可以。

【讨论】：