为什么SwiftUI上下文菜单在预览中显示所有行视图？

Question

我在列表行中有一个复杂的视图：

var body: some View {
        VStack {
            VStack {
                FullWidthImageView(ad)

                HStack {
                    Text("\(self.price) \(self.ad.currency!)")
                            .font(.headline)
                    Spacer()
                    SwiftUI.Image(systemName: "heart")
                }
                        .padding([.top, .leading, .trailing], 10.0)

FullWidthImageView是具有定义的contexMenu修饰符的视图。但是，当我长按图像时，我看到的不是预览中的唯一图像，而是所有行视图。

在任何元素上都没有其他contextMenu。

如何仅在具有图像的上下文中进行预览？

Answer 1

这里是一个有效的代码（可能会模拟您的情况），即仅显示图像用于上下文菜单预览（已通过Xcode 11.3+测试）。

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS8zbU94Yy5wbmcifQ==” alt =“在此处输入图像描述”>

struct FullWidthImageView: View {
    var body: some View {
        Image("auto")
            .resizable()
            .aspectRatio(contentMode: .fit)
            .frame(width: 200)
            .contextMenu(ContextMenu() {
                Button("Ok") {}
            })
    }
}

struct TestContextMenu: View {
    var body: some View {
        VStack {
            VStack {
                FullWidthImageView()

                HStack {
                    Text("100 $")
                        .font(.headline)
                    Spacer()
                    Image(systemName: "heart")
                }
                .padding([.top, .leading, .trailing], 10.0)

            }
        }
    }
}

Answer 2

我们不知道为什么在您的情况下它不起作用，直到我们看到FullWidthImageView以及如何构造上下文菜单。 Asperi接受的答案是有效的示例，并且正确完成了！

麻烦是为什么只在视图的某些部分应用.contextMenu修饰符（如您的示例），所以我们需要小心。

让我们看一些示例。

import SwiftUI

struct FullWidthImageView: View {
    @ObservedObject var model = modelStore
    var body: some View {
        VStack {
            Image(systemName: model.toggle ? "pencil.and.outline" : "trash")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 200)
        }.contextMenu(ContextMenu {
            Button(action: {
                self.model.toggle.toggle()
            }) {
                HStack {
                    Text("toggle image to?")
                    Image(systemName: model.toggle ? "trash" : "pencil.and.outline")
                }
            }
            Button("No") {}
        })
    }
}

class Model:ObservableObject {
    @Published var toggle = false
}

let modelStore = Model()

struct ContentView: View {
    @ObservedObject var model = modelStore
    var body: some View {
        VStack {
            FullWidthImageView()
            Text("Long press the image to change it").bold()
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

运行时，“上下文菜单”修改后的视图似乎是“静态”！

是的，长按您会看到垃圾桶图像，即使您在关闭上下文视图时已正确更新该图像。每按一次，您只会看到垃圾！

如何使其动态？我需要它与我的“主视图！这里我们有.id修饰符。让我们来看看区别！

首先我们必须更新我们的模型

class Model:ObservableObject {
    @Published var toggle = false
    var id: UUID {
        UUID()
    }
}

以及下一个观点

FullWidthImageView().id(model.id)

现在它可以按我们预期的那样工作了。