SwiftUI 如何用 VStack 填充列表行答案

【问题标题】：SwiftUI how to fill a List row with the VStackSwiftUI 如何用 VStack 填充列表行
【发布时间】：2020-11-11 09:02:34
【问题描述】：

我想创建一个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
}

感谢您的帮助！

【问题讨论】：

这里有3个问题，不好！您应该提出 3 个问题，而且您的问题主题不清楚，与这 3 个问题不匹配！

标签： ios swift swiftui navigation

【解决方案1】：

在单元格顶部创建一个黄色矩形并添加 .onTap {}。将出现您的弹出式单元格。
使用 introspect 抓取 tableview 并将单元格分配给 tableview 并在消失时修改 UItableview。你可以检查这个答案。 https://developer.apple.com/forums/thread/660468
您需要修改按钮的禁用修饰符。

【讨论】：

【解决方案2】：

借助

.contentShape(矩形()) 我做了VStack可以被onTapGesture点击显示菜单。
.listRowInsets(EdgeInsets()) 则 SwiftUI 列表单元格的默认灰色选择不再显示。

对于 1 和 2，我使 VStack 占据屏幕的整个宽度/列表行宽度。

【讨论】：