LazyVGrid自定义高度下垂直间距不一致问题求助

问题描述 #

我用SwiftUI的LazyVGrid布局，自定义的NewsCell会根据图片比例、描述内容动态改变高度。现在网格能正确调整视图尺寸，但不同高度的单元格之间垂直间距不一致——比如第三格和第一格的间距不是想要的8pt。我已经给LazyVGrid和GridItem设置了spacing，也试过把自定义视图高度设为.infinity，但都没用，怎么让网格项之间保持固定的8pt垂直间距？

原代码 #

import SwiftUI

public struct NewsFeedView: View {
    @StateObject private var viewModel = NewsViewModel()
    
    let columns: [GridItem] = [
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8)
    ]
    
    public var body: some View {
        LazyVGrid(columns: columns, alignment: .leading, spacing: 8.0) {
            
            ForEach(viewModel.newsItems) { newsItem in
                NewsCell(newsItem: newsItem)
                    .frame(minHeight: 100, maxHeight: .infinity)
            }
        }
        .padding(16)
    }
}

public struct NewsCell: View {
    @ObservedObject var newsItem: NewsItemViewModel

    public var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Image(systemName: "heart")          
                .resizable()
                .aspectRatio(CGFloat(newsItem.imageAspectRatio), contentMode: .fit)
                .background(Color.black)

            Text(newsItem.title)
                .lineLimit(nil)
                .font(.headline)

            Text(newsItem.subtitle)
                .lineLimit(nil)
                .font(.subheadline)
                .foregroundColor(.gray)

            Text(newsItem.description)
                .lineLimit(nil)
                .foregroundColor(.black)

            if !newsItem.tags.isEmpty {
                Divider()
                VStack(alignment: .leading, spacing: 4) {
                    ForEach(newsItem.tags) { tag in
                        Text(tag.label)
                            .font(.footnote)
                            .foregroundColor(.blue)
                    }
                }
            }
        }

        .padding()
        .background(Color.white)
        .overlay(
            RoundedRectangle(cornerRadius: 10)
                .stroke(Color.gray, lineWidth: 1)
        )
    }
}

问题根源 #

LazyVGrid的spacing是行与行之间的间距，但因为每行的单元格高度不一致，实际视觉上的垂直间距会被拉伸。比如第一行的两个单元格高度不同，第二行的单元格会对齐到第一行最高单元格的底部，导致矮单元格下方的间距看起来更大。

解决方法 #

修改后的NewsFeedView代码 #

import SwiftUI

public struct NewsFeedView: View {
    @StateObject private var viewModel = NewsViewModel()
    
    // 移除GridItem的spacing设置
    let columns: [GridItem] = [
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    
    public var body: some View {
        // 设置alignment为.top，移除LazyVGrid的spacing
        LazyVGrid(columns: columns, alignment: .top) {
            
            ForEach(viewModel.newsItems) { newsItem in
                NewsCell(newsItem: newsItem)
                    .padding(.bottom, 8) // 给每个单元格添加固定底部间距
            }
        }
        .padding(16)
    }
}

核心调整点 #

1. 移除原有spacing：删掉GridItem和LazyVGrid的spacing参数，避免布局冲突
2. 顶部对齐：给LazyVGrid设置alignment: .top，让每行所有单元格都从顶部开始布局，不会因为高单元格拉低整行底部
3. 固定底部间距：给每个NewsCell添加.padding(.bottom, 8)，确保每个单元格下方都有固定的8pt间距，不受自身高度影响

NewsCell无需修改，它的VStack默认就是顶部对齐，符合需求。

内容的提问来源于stack exchange，提问作者tara tandel