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

时间:2019-12-18 15:52:08

标签: ios ipad swiftui

我正在使用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设置时,我只能使用2种默认样式,这两种样式都不适合我,因为我无法自定义导航视图的放置位置。有没有一种方法可以注册相同的拍子,但是拥有自己的自定义系统来在界面中所需的位置显示结果数据?也许我对NavigationView错了,或者也许有一种方法可以使NavigationView完全位于包含项目列表的视图之外?

enter image description here

1 个答案:

答案 0 :(得分:1)

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

首先,传递selectedClient作为对列表的绑定。接下来,每当点击列表项之一(可通过.onTapGesture()Button实现)时,更新selectedClient

在详细信息视图中,接受可绑定的Client?参数。如果是nil,则只需显示当前的“文本”视图即可。如果不是零,则构建详细信息用户界面。

希望这会有所帮助!