SwiftUI中如何让TipKit的popoverTip背景始终为白色？

问题说明 #

需要让SwiftUI中基于TipKit实现的popoverTip背景色始终保持白色，不受系统明暗模式切换影响。UIKit中可直接获取TipUIPopoverViewController实例修改背景，但SwiftUI下尝试两种方法均无效：

已尝试的无效方法 #

• 自定义TipViewStyle：仅能修改提示框内部组件样式，无法改变提示框容器本身的背景色。

  Text("To")
     .popoverTip(tip3, arrowEdge: .leading, action: {_ in})
     .tipViewStyle(MyTipStyle())
  

• UIAppearance全局设置：仅改变了内部组件背景，未修改提示框容器的背景色。

  UIView.appearance(whenContainedInInstancesOf: [TipUIPopoverViewController.self]).tintColor = .white
  UIView.appearance(whenContainedInInstancesOf: [TipUIPopoverViewController.self]).backgroundColor = .white
  UIView.appearance(whenContainedInInstancesOf: [TipUIPopoverViewController.self]).overrideUserInterfaceStyle = .light
  

可行解决方案 #

核心通过UIAppearance针对TipKit的底层容器视图TipUIPopoverView设置背景色和强制浅色模式，同时在自定义TipViewStyle中给内容添加白色背景，确保内外区域统一纯白：

1. 修改UIAppearance目标类：将设置目标从TipUIPopoverViewController改为TipUIPopoverView，同时设置overrideUserInterfaceStyle强制浅色模式，阻断系统明暗模式影响。
2. 自定义TipViewStyle添加白色背景：在样式的根容器中添加.background(.white)，确保内部内容区域背景与容器一致。

修改后的完整代码 #

import SwiftUI
import TipKit

struct InlineTip3: Tip {
    var title: Text {
        Text("保存为收藏")
    }
    var message: Text? {
        Text("你收藏的庭院会始终显示在列表顶部。")
    }
    var image: Image? {
        Image(systemName: "star")
    }
}

struct MyTipStyle: TipViewStyle {
    init() {
        // 针对TipUIPopoverView设置背景和强制浅色模式
        TipUIPopoverView.appearance().backgroundColor = .white
        TipUIPopoverView.appearance().overrideUserInterfaceStyle = .light
    }
    
    func makeBody(configuration: Configuration) -> some View {
        VStack {
            if let image = configuration.image {
                image
                    .font(.title2)
                    .foregroundStyle(.green)
            }
            if let title = configuration.title {
                title
                    .foregroundStyle(.black)
                    .bold()
                    .font(.headline)
                    .textCase(.uppercase)
            }
            if let message = configuration.message {
                message
                    .foregroundStyle(.secondary)
            }
        }
        .frame(maxWidth: 100)
        .background(.white) // 添加内部内容区域背景色
        .overlay(alignment: .topTrailing) {
            Image(systemName: "multiply")
                .font(.title2)
                .alignmentGuide(.top) { $0[.top] - 5 }
                .alignmentGuide(.trailing) { $0[.trailing] + 5 }
                .foregroundStyle(.secondary)
                .onTapGesture {
                    configuration.tip.invalidate(reason: .tipClosed)
                }
        }
        .padding()
    }
}

struct InlineView: View {
    var tip3 = InlineTip3()

    var body: some View {
        VStack(spacing: 20) {
            Text("TipView会直接嵌入视图中，这种样式的提示不会遮挡底层UI元素，是首选样式。")
            
            Text("点击这里")
                .popoverTip(tip3, arrowEdge: .leading, action: {_ in})
                .tipViewStyle(MyTipStyle())
            Spacer()
        }
        .padding()
        .navigationTitle("TipView示例")
    }
}

struct ContentView: View {
    var body: some View {
        InlineView()
    }
}

#Preview {
    ContentView()
}

关键说明 #

• **TipUIPopoverView**是TipKit中popover提示框的底层容器视图，直接对其设置backgroundColor和overrideUserInterfaceStyle才能修改容器背景并强制浅色模式。
• 在自定义样式中添加.background(.white)是为了确保内部内容区域不受系统模式影响，与容器背景保持统一纯白。

内容的提问来源于stack exchange，提问作者Amin