点击列表项时如何显示视图？

Posted 2023-03-12

【中文标题】点击列表项时如何显示视图？

【英文标题】：How to show a view when tapping on a list item?

【发布时间】：2019-12-18 15:52:08

【问题描述】：

我正在使用 SwiftUI 中的列表，我正在尝试重新创建一个使用 TableView 的系统，用户可以点击一个单元格，然后显示一个新视图，其中包含与所述单元格相关的数据。现在我们列出了我的代码已更改为以下内容：

                        List 
                            ForEach(clients, id: \.id)  client in
                                VStack(alignment: .center) 
                                    HStack
                                        Text(client.firstName ?? "Unknown" + " ")
                                            .font(.system(size: 17))
                                            .foregroundColor(Color.init(hex: "47535B"))
                                            .fontWeight(.medium)
                                            .multilineTextAlignment(.leading)
                                            .padding(.leading)
                                        Text(client.lastName ?? "Unknown")
                                            .font(.system(size: 17))
                                            .foregroundColor(Color.init(hex: "47535B"))
                                            .fontWeight(.medium)
                                            .multilineTextAlignment(.leading)
                                        Spacer()
                                    
                                
                                .frame(height: 50.0)
                                .background(Color.init(hex: "F6F6F6"))
                                .cornerRadius(7.0)
                            
                        
                        .padding(.horizontal, 3.0)
                        .padding(.vertical, 115.0)
                        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity)

我意识到我可以使用 NavigationLink 并将整个内容放入 NavigationView 中，但这个功能不是我想要的，下面是我的界面图像。我想要实现的是，当用户点击一个单元格时，它会在右侧的空间中显示数据，其中显示“选择一个客户以查看他们的个人资料”。使用 NavigationView 设置，我只能使用两种默认样式，这两种样式都不适合我，因为我无法自定义导航视图的放置位置。有没有一种方法可以注册同一个水龙头，但有我自己的自定义系统来在我的界面中显示我想要的结果数据？也许我对 NavigationView 有误，或者有办法让 NavigationView 完全位于包含项目列表的视图之外？

【参考方案1】：

如果您不想或不使用 NavigationView，那么您可能在某个视图中同时拥有客户端列表和客户端详细信息。我会尝试将@State private var selectedClient: Client? = nil 添加到具有列表和详细信息的任何视图中。

首先，将selectedClient 作为绑定传递给列表。接下来，只要点击列表项之一（可通过.onTapGesture() 或Button 实现），更新selectedClient。

在您的详细视图中，接受一个可绑定的Client? 参数。如果是nil，则只显示您当前的文本视图。如果不为零，则构建详细 UI。

希望这会有所帮助！