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

Posted 2023-02-24

【中文标题】如何在 SwiftUI 列表行中具有相同的比例？

【英文标题】：How to have same proportions in a SwiftUI List row?

【发布时间】：2021-05-15 09:03:37

【问题描述】：

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

请问如何修改，让左边的名字等宽？

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

【参考方案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)