Question

我要创建一个List，然后按行（单元格），然后弹出一个按钮，按该按钮可以导航到新视图。

喜欢这个gif：

问题是：

仅按绿色区域（RowView），将弹出“添加”按钮部分（MenuView）。我要按下整个单元格的黄色部分以弹出添加按钮部分。
如何禁用灰色选择部分，或仅去除灰色？
在下面的代码中，isAddPressed默认为false，因此不应该按下该单元格，不确定为什么仍导航到目标视图。

这是我的代码：

MenuView （添加按钮部分）

struct MenuView: View {
    var onAdd: () -> Void

    var body: some View {
        VStack {
            Button("Add") {
                onAdd()
            }.background(Color.blue)
            .foregroundColor(.white)
            .clipShape(Rectangle())
        }
    }
}

RowView 绿色部分。

struct RowView: View {
    var foo: Foo
    var body: some View {
        VStack {
            Text(foo.title)
        }
        .background(Color.green)
    }
}

AView1 主要部分。

struct AView1: View {

    @State var foos: [Foo] = [Foo(title: "a"), Foo(title: "b"), Foo(title: "c")]
    @State var isDisplayMenue: Bool = false
    @State var isAddPressed: Bool = false

    var body: some View {
        NavigationView {
            GeometryReader(content: { geometry in
                List {
                    ForEach(foos, id:\.self) { foo in
                        ZStack {
                            Color(.yellow)
                            VStack {
                                RowView(foo: foo)
                                    .onTapGesture(count: 1, perform: {
                                        isDisplayMenue = true
                                    })
                                    .background(
                                        NavigationLink(
                                            destination: isAddPressed ? Text("Destination") : nil,
                                            isActive: $isAddPressed,
                                            label: {
                                                EmptyView()
                                            })

                                    )
                                    .padding()
                                if isDisplayMenue {
                                    MenuView() {
                                        isAddPressed = true
                                        isDisplayMenue = false
                                    }
                                }
                            }
                        }
                    }

                }.onAppear() {
                    isAddPressed = false
                }
            })

        }

    }
}

以下是一些不重要的部分：

struct DestionationView: View {
    @Binding var isAddPressed: Bool
    var body: some View {
        Text("Destination")
    }
}

struct Foo: Hashable {
    var title: String
}

感谢您的帮助！

Answer 1

在单元格顶部创建一个黄色矩形，然后添加.onTap {}。将会出现您弹出的单元格。
使用内省来获取表视图，并将单元格分配给表视图，并在消失时修改UItableview。您可以检查此答案。 https://developer.apple.com/forums/thread/660468
您需要修改按钮的disable修饰符。

Answer 2

在
的帮助下
.contentShape（Rectangle（））我使VStack可以单击onTapGesture以显示菜单。
使用.listRowInsets(EdgeInsets())，则SwiftUI列表单元格的默认灰色选择不再显示。

使用1和2都使VStack占据屏幕/列表行宽度的整个宽度。

SwiftUI如何使用VStack填充列表行

2 个答案: