SwiftUI - 如何创建带有标题和详细信息标签的列表？答案

【问题标题】：SwiftUI - how to create a list with title and detail labels?SwiftUI - 如何创建带有标题和详细信息标签的列表？
【发布时间】：2019-10-30 10:41:04
【问题描述】：

我正在尝试重新创建一个带有标题标签和详细标签的列表视图，就像许多标准 iOS 应用程序一样：

https://developer.apple.com/documentation/uikit/uitableviewcell/1623273-detailtextlabel

我想要左边的标题标签，右边的细节标签？没有在 SwiftUI 中构建 UI 的情况下是否有标准实现？

谢谢！

【问题讨论】：

请分享您已经尝试过的内容以及哪些部分无法正常工作。此外，您的问题也不清楚您是否要使用 SwiftUI。
我没有尝试过任何具体的实现，也找不到任何示例代码可以尝试，因为目前 SwiftUI 文档很少 :)
但在 SwiftUI 之前，您会使用 UITableViewCellStyleValue1 作为单元格的样式。
是的，确实如此，不确定这在 SwiftUI 中如何工作，或者我们是否需要自定义构建单元格！
你看过任何个WWDC19视频吗？具体来说，第 204 节（SwiftUI 简介：构建您的 Forst 应用程序）。这正是他们向您展示的确切。 developer.apple.com/wwdc19/204 如果不是完全你想要的，你能问更具体的吗？

标签： ios swift xcode swiftui xcode11

【解决方案1】：

为了代码简洁，我把这个小任务的不同部分分开了。

每个单元格数据的模型：

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)
        }
    }
}

和列表（表）视图：

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)
        }
    }
}

【讨论】：

是的，可以，必须设置详细标签的样式以匹配许多标准 UI，例如在设置应用程序中找到的。只是想可能有一个标准的实现！
老兄这只是 5 行代码，别那么认真。除了 Xcode 和 Catalina，swiftUI 本身就充满了（使用 IDE）的 bug。我认为这只是开始，很快就会有很多预定义的模型，包括这些默认值；）
嘿，真的！感谢您的帮助:)
不客气。如果您觉得有用，请不要忘记选择它作为答案；）
我稍后再试试！谢谢:)

【解决方案2】：

您可以使用HStack：

struct ContentView : View {
  var body: some View {
    List {
      HStack {
        Text("Test")
        Spacer()
        Text("Detail")
      }
   }
}

【讨论】：