SwiftUI 自定义 Tip 即 popoverTip

Question

在此输入图片描述

嗨，我正在使用tipKit - popoverTip，它从框中使用某种 Color.secondary 作为背景。但我需要在 popoverTip 中自定义提示的背景颜色。

是否可以自定义tip，即popoverTip类型？

我发现，我可以更改每个元素的前景色，但无法更改提示的背景。

TipView 看起来不同，在这里不合适

Answer 1

使用TipViewStyle自定义提示。

struct CustomTipViewStyle: TipViewStyle {
    func makeBody(configuration: TipViewStyle.Configuration) -> some View {
        VStack {
            HStack(alignment: .top) {
                configuration.image?
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 40.0, height: 40.0)
                    .foregroundStyle(.gray)


                VStack(alignment: .leading, spacing: 8.0) {
                    configuration.title?
                        .font(.headline)
                    configuration.message?
                        .font(.subheadline)

                    ForEach(configuration.actions) { action in
                        Button(action: action.handler) {
                            action.label().foregroundStyle(.blue)
                        }
                    }
                }
                
                Button(action: { configuration.tip.invalidate(reason: .tipClosed) }) {
                    Image(systemName: "xmark").scaledToFit()
                        .foregroundStyle(.white)
                }
            }
        }
        .padding()
        .background(.indigo)
    }
}

struct PopoverTip: Tip {
    var title: Text {
        Text("Write what you want")
            .foregroundStyle(.white)
    }
    var message: Text? {
        Text("And our AI will create an unique image for you")
            .foregroundStyle(.white)
    }
    var image: Image? {
        Image(systemName: "wand.and.stars")
    }
}

struct TipKitView: View {
    let popoverTip = PopoverTip()
    @State private var text: String = ""

    var body: some View {
        VStack {
            TextField("Enter your name", text: $text)
                .textFieldStyle(.roundedBorder)
                .popoverTip(popoverTip)
                .onTapGesture {
                    popoverTip.invalidate(reason: .actionPerformed)
                }
                .tipViewStyle(CustomTipViewStyle())
            Spacer()
        }
        .padding()
    }
}