如何将上下文菜单应用于 SwiftUI 列表行中的按钮？

Question

当我长按列表行中的按钮时，会显示所有按钮的所有上下文菜单。看起来整个列表行都被选中了。我怎样才能让上下文菜单只显示按下的按钮？

我已经看到了这个有点相关的问题，并尝试了BorderlessButtonStyle(). 它使行中的单个按钮可点击，但它没有解决上下文菜单问题。我也试过使用.onTapGesture()而不是Button()，但这也不起作用。

在下面的示例中，我希望在长按按钮 1时只看到按钮 1 的操作 - 但也会显示按钮 2 的操作。

struct ContentView: View {
    var body: some View {
        List {
            ForEach((1..<3), content: { _ in
                ListButton()
            })
        }
    }
}

struct ListButton: View {
    var body: some View {
        HStack {
            Spacer()

            Button("Button 1") { }
                .buttonStyle(BorderlessButtonStyle())
                .contextMenu(menuItems: {
                    Text("Action for button 1")
                })

            Spacer()

            Button("Button 2") { }
                .buttonStyle(BorderlessButtonStyle())
                .contextMenu(menuItems: {
                    Text("Action for button 2")
                })

            Spacer()
        }
    }
}

Answer 1

您可以使用Menu而不是ContextMenu使用菜单的标签来显示您的按钮；作为替代解决方案。

但是，为了使按钮手势比行本身具有更高的优先级，您可以添加.highPriorityGesture(TapGesture())到按钮的末尾。

您可以通过使用Menu而不是 ContextMenu 来实现您想要的目标，如下所示：

struct ListButton: View {
    var body: some View {
        HStack {
            Spacer()

            Button("Button 1") { }
                .buttonStyle(BorderlessButtonStyle())
                .contextMenu(menuItems: {
                    Text("Action for button 1")
                })

            Spacer()
            // Here I used menu instead of the button 2
            Menu {
                Text("Action for button 2")
            } label: {
                Button("Button 2") { }
                    .buttonStyle(BorderlessButtonStyle())

            }.highPriorityGesture(TapGesture())

            Spacer()
        }
    }
}