如何在SwiftUI中创建与单元格对齐的文本单元格行

我想创建这样的东西（在SwiftUI中，每个“单元”之间没有“管道”），假设每个“单元”都是固定大小的

我有以下资料：

import Foundation

struct Activity {
    let id: Int
    let date: String
    let imageURL: String
    let distance: Double
    let elevation: Int
}


extension Activity {
    static func all() -> [Activity] {
        return [
            Activity(id: 1, date: "10/10/2021", imageURL: "map1", distance: 120, elevation: 452),
            Activity(id: 2, date: "10/10/2021", imageURL: "map2", distance: 90, elevation: 34),
            Activity(id: 3, date: "10/10/2021", imageURL: "map3", distance: 460, elevation: 345),
            Activity(id: 4, date: "10/10/2021", imageURL: "map4", distance: 70, elevation: 21),
            Activity(id: 5, date: "10/10/2021", imageURL: "map5", distance: 40, elevation: 345)
        ]
    }
}


    struct ContentView: View {
    
    let activities = Activity.all()
    
    var body: some View {
        
        List(self.activities, id: \.id) { activity in
            
            VStack(alignment: .center) {
                Image(activity.imageURL)
                    .resizable()
                    .frame(width: 300, height: 200)
                    .cornerRadius(16)
               
                HStack(alignment: .lastTextBaseline) {
                    Text("Date").fixedSize().font(.system(size: 10))
                    Spacer()
                    Text("Distance").fixedSize().font(.system(size: 10))
                    Spacer()
                    Text("Elevation").fixedSize().font(.system(size: 10))
                }
                HStack(alignment: .lastTextBaseline) {
                    Text(activity.name).fixedSize()
                    Spacer()
                    Text(String(activity.distance)).fixedSize()
                    Spacer()
                    Text(String(activity.elevation)).fixedSize()
                }
            }
        }
    }
}

---

但很明显，这不是正确的方法。关于如何创建它，我有什么想法吗？

据我所知，可以这样做

---

提供的代码是不可测试的。你能详细说明一下吗？我已经更新了。谢谢。太完美了。非常感谢。

var body: some View {
    
    List(self.activities, id: \.id) { activity in
        
        VStack(alignment: .center) {
            Image(activity.imageURL)
                .resizable()
                .frame(width: 300, height: 200)
                .cornerRadius(16)
            
            HStack(alignment: .lastTextBaseline) {
                VStack(alignment: .leading) {
                    Text("Date").fixedSize().font(.system(size: 10))
                    Text(activity.date).fixedSize()
                }
                Spacer()
                VStack(alignment: .leading) {
                    Text("Distance").fixedSize().font(.system(size: 10))
                    Text(String(activity.distance)).fixedSize()
                }
                Spacer()
                VStack(alignment: .leading) {
                    Text("Elevation").fixedSize().font(.system(size: 10))
                    Text(String(activity.elevation)).fixedSize()
                }
            }
        }
    }
}