SwiftUI - 如何创建带有标题和详细信息标签的列表?
SwiftUI - how to create a list with title and detail labels?
我正在尝试重新创建一个带有标题标签和详细信息标签的列表视图,就像许多标准 iOS 应用程序一样:
https://developer.apple.com/documentation/uikit/uitableviewcell/1623273-detailtextlabel
我想要左边的标题标签,右边的细节标签?没有在 SwiftUI 中构建 UI 的标准实现吗?
谢谢!
为了代码简洁,我将这个小任务的不同部分分开了。
每个单元格数据的模型:
struct CellModel {
let title: String
let detail: String
}
表示每个单独单元格的视图:
struct DetailCellView: View {
let model: CellModel
var body: some View {
HStack() {
Text(model.title)
Spacer()
Text(model.detail)
}
}
}
和列表(table)视图:
struct ContentView : View {
// Data Source
let cells = [
CellModel(title: "Text 1", detail: "Detail 1"),
CellModel(title: "Text 2", detail: "Detail 2"),
CellModel(title: "Text 3", detail: "Detail 3")
]
var body: some View {
List(cells.identified(by: \.title)) { model in
DetailCellView(model: model)
}
}
}
- 默认细节样式
如果您想要一个简单的默认详细信息生成器,可以使用以下方法:
struct DetailCellView: View {
@State var image: UIImage = UIImage()
@State var title: String = ""
@State var detail: String = ""
var body: some View {
HStack() {
Image(uiImage: image)
Text(title)
Spacer()
Text(detail)
}
}
}
您可以使用 HStack
:
struct ContentView : View {
var body: some View {
List {
HStack {
Text("Test")
Spacer()
Text("Detail")
}
}
}
我正在尝试重新创建一个带有标题标签和详细信息标签的列表视图,就像许多标准 iOS 应用程序一样:
https://developer.apple.com/documentation/uikit/uitableviewcell/1623273-detailtextlabel
我想要左边的标题标签,右边的细节标签?没有在 SwiftUI 中构建 UI 的标准实现吗?
谢谢!
为了代码简洁,我将这个小任务的不同部分分开了。
每个单元格数据的模型:
struct CellModel {
let title: String
let detail: String
}
表示每个单独单元格的视图:
struct DetailCellView: View {
let model: CellModel
var body: some View {
HStack() {
Text(model.title)
Spacer()
Text(model.detail)
}
}
}
和列表(table)视图:
struct ContentView : View {
// Data Source
let cells = [
CellModel(title: "Text 1", detail: "Detail 1"),
CellModel(title: "Text 2", detail: "Detail 2"),
CellModel(title: "Text 3", detail: "Detail 3")
]
var body: some View {
List(cells.identified(by: \.title)) { model in
DetailCellView(model: model)
}
}
}
- 默认细节样式
如果您想要一个简单的默认详细信息生成器,可以使用以下方法:
struct DetailCellView: View {
@State var image: UIImage = UIImage()
@State var title: String = ""
@State var detail: String = ""
var body: some View {
HStack() {
Image(uiImage: image)
Text(title)
Spacer()
Text(detail)
}
}
}
您可以使用 HStack
:
struct ContentView : View {
var body: some View {
List {
HStack {
Text("Test")
Spacer()
Text("Detail")
}
}
}