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

问题描述

作为一个 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)
        }
    }
}

请问怎么改，让左边的名字有相同的宽度？

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

解决方法

如果所有列表行的中间内容大小都相同，则可以使用 .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 swiftui-list