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

Posted 2023-02-24

【中文标题】在 swiftUI 中点击列表条目时呈现全屏视图

【英文标题】：Present full screen view on tap on list entry in swiftUI

【发布时间】：2021-07-22 18:43:13

【问题描述】：

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

【参考方案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:) 的直接等效项

【讨论】：

用按钮提示解决方案。然后文本以强调色显示。

您可以使用.foregroundColor(.primary) 更改按钮中文本的颜色，或者在受影响的平台上使用.buttonStyle(PlainButtonStyle())。