如何让TipKit浮动提示指向表单元素且不影响容器尺寸？

问题描述 #

我正在使用TipKit展示提示信息，表单内包含一张图片，希望提示用户点击该图片以更换图片。现有实现代码如下：

struct TapToSelectImageTip: Tip {
    var id = UUID()
    
    var title: Text {
        Text("Tap to Select Image")
    }
    var message: Text? {
        Text("This is the background for your setting. Tap to select it from your photo library or other places.")
    }
    var asset: Image? {
        Image(systemName: "photo")
    }
}

struct SettingEditView : View {
    @Binding var editValue: DialogSetting

    var tapToSelectImageTip = TapToSelectImageTip()
    
    var body: some View {
        VStack {
            List {
                Section("Background image") {
                    VStack {
                        ImportedImageView(imageID: $editValue.backgroundImage)
                            .frame(maxWidth: .infinity)
                        TipView(tapToSelectImageTip, arrowEdge: .top)
                    }
                }
            }
        }
    }
}

当前遇到的问题：提示未显示时，图片可填满表单区域；提示显示时，容器会被撑开，提示以白色背景展示。需要实现提示悬浮在容器上方，且无论提示是否显示都不改变容器尺寸。

解决方案 #

核心思路是将TipView从常规布局流中移除，通过overlay将其悬浮在图片上方，避免占用列表单元格的布局空间。

修改后的SettingEditView代码如下：

struct SettingEditView : View {
    @Binding var editValue: DialogSetting

    var tapToSelectImageTip = TapToSelectImageTip()
    
    var body: some View {
        VStack {
            List {
                Section("Background image") {
                    ImportedImageView(imageID: $editValue.backgroundImage)
                        .frame(maxWidth: .infinity)
                        .overlay(
                            TipView(tapToSelectImageTip, arrowEdge: .top)
                                .offset(y: -20) // 调整偏移量让提示悬浮在图片上方合适位置
                                .zIndex(1) // 确保提示处于最上层，不被其他内容遮挡
                        )
                }
            }
        }
    }
}

关键修改说明 #

• 用overlay替代VStack嵌套：将TipView作为ImportedImageView的叠加层，提示会悬浮在图片上方，不会影响图片容器的布局尺寸。
• offset微调位置：通过offset(y: -20)调整提示的垂直位置，让箭头准确指向图片区域，数值可根据实际UI需求修改。
• zIndex保证层级：设置zIndex(1)确保提示不会被列表其他元素或图片内容遮挡。

修改后，无论提示是否显示，图片容器的尺寸都不会发生变化，提示会以悬浮形式展示在图片上方。

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