在 swiftUI 中点击列表条目时呈现全屏视图

Question

我正在尝试完成我认为相对简单的事情，即当您点击列表中的项目时让视图全屏显示。 此处显示的代码或多或少有效。但是，我必须准确地点击文本。点击空闲区域不会触发 onTap 事件。

示例代码：

struct ItemListView: View {
    var items: [Item]
    var titel: String
    
    @State private var selectedItem: Item?
    
    var body: some View {
        List(items) { item in
            ItemListCell(item: item)
                .onTapGesture {
                    selectedItem = item
                }
        }
        .navigationBarTitle(titel)
        .fullScreenCover(item: $selectedItem, onDismiss: nil) { item in
            ItemDetailView(item: item)
        }
    }
}

struct ItemListCell: View {
    var item: Item
    
    var body: some View {
        Text(String(item.id))
        Text(item.name)
    }
}

struct ItemDetailView: View {
    @Environment(\.presentationMode) var presentationMode
    
    var item: Item
    
    var body: some View {
        Text(String(item.id))
        Text(item.name)
        Button {
            presentationMode.wrappedValue.dismiss()
        } label: {
            Label("Close", systemImage: "xmark.circle")
        }
    }
}

我还查看了文档中的“支持列表中的选择”一章，但这仅在列表处于编辑模式时有效。

是否有与 UIKit 的 tableView(_:didSelectRowAt:) 等效的 swiftUI？

Answer 1

确保内容的框架占据了整个单元格。我在下面的示例中使用.frame(maxWidth: .infinity, alignment: .leading) 执行此操作。

然后，添加一个 contentShape 修饰符，以便 SwiftUI 知道将整个形状视为内容 - 否则，它往往会忽略空格。

struct ItemListCell: View {
    var item: Item
    
    var body: some View {
        VStack {
            Text(item.id)
            Text(item.name)
        }
        .frame(maxWidth: .infinity, alignment: .leading)
        .border(Color.green) //just for debugging to show the frame
        .contentShape(Rectangle())
    }
}

或者，如果您使用Button 而不是onTapGesture，您基本上可以免费获得这一切：

List(items) { item in
    Button(action: {
        selectedItem = item
    }) {
        ItemListCell(item: item)
    }
}

最后，不，没有 tableView(_:didSelectRowAt:) 的直接等效项