Question

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

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

我想要标题标签在左侧，细节标签在右侧？没有在SwiftUI中构建UI的标准实现吗？

谢谢！

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

Answer 2

您可以使用HStack来实现：

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

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

2 个答案:

-默认详细信息样式