如何让TipView的图片显示在左侧而非顶部？

我开发的TipView始终将提示图片显示在标题上方（类似VStack垂直布局），但参考教程中的图片均位于标题左侧（类似HStack水平布局）。竖屏与横屏状态的显示效果如下：

竖屏显示效果 #

横屏显示效果 #

环境与异常说明 #

• 开发环境：Xcode 15.4
• 测试设备：运行iOS 17.5的iPhone 12
• 该异常仅出现在上述旧设备上，iPhone 15模拟器或iPad上显示正常，推测与旧设备的系统布局适配逻辑有关。
• 使用popoverTip时同样会出现相同的布局问题。

复现代码 #

import SwiftUI
import TipKit

@main
struct TipTestApp: App {
    var body: some Scene {
        WindowGroup {
            TipTEST()
                .task {
                    try? Tips.resetDatastore()
                    try? Tips.configure([
                        .datastoreLocation(.applicationDefault)                    
                    ])
                }
        }
    }
}

struct TipTEST: View {
    let setTranslationLanguageTip = SetTranslationLanguageTip()
    var body: some View {
        TipView(setTranslationLanguageTip)
        
        // 启用下方代码测试popoverTip，同样会出现布局问题
        // Text("Tip view test")
        //     .popoverTip(setTranslationLanguageTip)
    }
}

struct SetTranslationLanguageTip: Tip {
    static let translationSetEvent = Event(id: "translationSet")
    
    var title: Text {
        Text("Set translation language")
    }
    
    var message: Text? {
        Text("Placeholder tip message")
    }

    var image: Image? {
        Image(systemName: "globe")
    }
}

解决方案：自定义样式强制水平布局 #

TipKit在小屏旧设备上会自动切换为垂直布局以适配空间，若要强制实现图片在左侧的水平布局，可通过自定义TipViewStyle覆盖默认样式：

自定义TipView水平样式 #

struct HorizontalTipStyle: TipViewStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack(alignment: .top, spacing: 12) {
            // 渲染提示图标
            configuration.image?
                .font(.title)
                .foregroundColor(.accentColor)
            
            VStack(alignment: .leading, spacing: 4) {
                // 渲染标题
                configuration.title
                    .font(.headline)
                
                // 渲染提示消息（若存在）
                if let message = configuration.message {
                    message
                        .font(.subheadline)
                        .foregroundColor(.secondary)
                }
            }
        }
        .padding()
        .background(.ultraThinMaterial)
        .cornerRadius(12)
    }
}

// 扩展TipViewStyle，简化样式调用
extension TipViewStyle where Self == HorizontalTipStyle {
    static var horizontal: HorizontalTipStyle { HorizontalTipStyle() }
}

应用自定义样式 #

在使用TipView时，直接指定自定义样式即可：

TipView(setTranslationLanguageTip)
    .tipViewStyle(.horizontal)

适配popoverTip #

如果需要给popoverTip也应用同样的水平布局，可自定义PopoverTipStyle：

struct HorizontalPopoverTipStyle: PopoverTipStyle {
    func makeBody(configuration: Configuration) -> some View {
        HorizontalTipStyle().makeBody(configuration: configuration)
    }
}

// 扩展PopoverTipStyle，简化调用
extension PopoverTipStyle where Self == HorizontalPopoverTipStyle {
    static var horizontal: HorizontalPopoverTipStyle { HorizontalPopoverTipStyle() }
}

使用方式：

Text("Tip view test")
    .popoverTip(setTranslationLanguageTip, style: .horizontal)

原理说明 #

TipKit的默认布局逻辑会根据设备屏幕尺寸、系统版本自动调整排列方向，旧小屏设备为节省空间会优先采用垂直布局。通过自定义样式，我们可以强制使用水平布局，确保图片始终显示在标题左侧，不受系统默认适配逻辑的影响。

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