如何在 SwiftUI 列表行中具有相同的比例？

Question

作为一个Swift新手，我不明白如何解决布局问题-

正如您在上面的屏幕截图中看到的，名称、游戏统计数据和照片之间的比例随每一行而变化。

在我的 custom View 中使用了以下代码：

struct TopRow: View {
    let model:Top
    
    var body: some View {
        HStack {
            Text(model.given)
                .font(.headline)
            Spacer()
            VStack {
                Text("Elo rating: \(model.elo)")
                Text("Average time: \(model.avg_time ?? "")")
                Text("Average score: \(String(model.avg_score ?? 0.0))")
            }
            Spacer()
            DownloadingImage(url: model.photo ?? "TODO")
                .frame(width: 75, height: 75)
        }
    }
}

请问如何更改，使左边的名字宽度相同？

还有中间的统计数据？（两个宽度不必相等）。

Answer 1

如果所有列表行的中间内容大小相同，则可以使用 .fixedSize 和框架。

var body: some View {
    HStack {
        Text(model.given)
            .font(.headline)
            .frame(minWidth: 0, maxWidth: .infinity) //<-- Here
        Spacer()
        VStack {
            Text("Elo rating: \(model.elo)")
            Text("Average time: \(model.avg_time ?? "")")
            Text("Average score: \(String(model.avg_score ?? 0.0))")
        }.fixedSize(horizontal: true, vertical: false) //<-- Here
        Spacer()
        DownloadingImage(url: model.photo ?? "TODO")
            .frame(width: 75, height: 75)
    }
}

如何在 SwiftUI 列表行中具有相同的比例？

How to have same proportions in a SwiftUI List row?

swiftui

swiftui-list