為什么 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

我們不知道為什么在您的情況下它不起作用，直到我們看到您的 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)

現在它按我們的預期工作。

再舉一個例子，在“標准”狀態/綁定根本不起作用的情況下，檢查帶有動態數據崩潰的 SwiftUI 分層選擇器

更新

作為臨時解決方法，您可以通過 ScrollView 模擬 List

import SwiftUI

struct Row: View {
    let i:Int
    var body: some View {
        VStack {
            Image(systemName: "trash")
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 200)
                .contextMenu(ContextMenu {
                    Button("A") {}
                    Button("B") {}
                })
            Text("I don’t want to show in preview because I don’t have context menu modifire").bold()
        }.padding()
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            ScrollView {
                ForEach(0 ..< 20) { (i) in
                    VStack {
                        Divider()
                        Row(i: i)
                    }
                }
            }
        }
    }
}

它不是最佳的，但在你的情況下它應該工作

Answer 2

這是一個有效的代碼（模擬可能的場景），即。 僅顯示用於上下文菜單預覽的圖像（使用 Xcode 11.3+ 測試）。

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 3

它隱藏在此處的回復中，但關鍵的發現是List正在改變.contextMenu的行為——它創建了隨菜單彈出的“塊”，而不是將菜單附加到指定的元素。 為ScrollView切換List解決了這個問題。