点击列表项时如何显示视图?
How to show a view when tapping on a list item?
我正在使用 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,但此功能不是我想要的,下面是我的界面图像。我想要实现的是,当用户点击一个单元格时,它会在 space 右侧显示 "Select a client to view their profile" 中的数据。使用 NavigationView 设置,我只能使用 2 种默认样式,这两种样式都不适合我,因为我无法自定义导航视图的放置位置。有没有一种方法可以注册相同的水龙头,但有我自己的自定义系统来在我的界面中我想要的地方显示结果数据?也许我对 NavigationView 的看法是错误的,或者也许有一种方法可以将 NavigationView 完全定位在包含项目列表的视图之外?
如果您不想或不使用 NavigationView,那么您可能在某个地方的同一视图中同时拥有客户列表和客户详细信息。我会尝试将 @State private var selectedClient: Client? = nil
添加到同时具有列表和详细信息的任何视图。
首先,将 selectedClient
作为列表的绑定传递。接下来,只要点击列表项之一(可通过 .onTapGesture()
或 Button
实现),更新 selectedClient
。
在您的详细视图中,接受一个可绑定的 Client?
参数。如果是 nil
,则只显示您当前的文本视图。如果不是零,则构建详细信息 UI.
希望对您有所帮助!
我正在使用 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,但此功能不是我想要的,下面是我的界面图像。我想要实现的是,当用户点击一个单元格时,它会在 space 右侧显示 "Select a client to view their profile" 中的数据。使用 NavigationView 设置,我只能使用 2 种默认样式,这两种样式都不适合我,因为我无法自定义导航视图的放置位置。有没有一种方法可以注册相同的水龙头,但有我自己的自定义系统来在我的界面中我想要的地方显示结果数据?也许我对 NavigationView 的看法是错误的,或者也许有一种方法可以将 NavigationView 完全定位在包含项目列表的视图之外?
如果您不想或不使用 NavigationView,那么您可能在某个地方的同一视图中同时拥有客户列表和客户详细信息。我会尝试将 @State private var selectedClient: Client? = nil
添加到同时具有列表和详细信息的任何视图。
首先,将 selectedClient
作为列表的绑定传递。接下来,只要点击列表项之一(可通过 .onTapGesture()
或 Button
实现),更新 selectedClient
。
在您的详细视图中,接受一个可绑定的 Client?
参数。如果是 nil
,则只显示您当前的文本视图。如果不是零,则构建详细信息 UI.
希望对您有所帮助!