SwiftUI LazyVGrid - 顶部对齐

Question

我有很多卡片需要在 vGrid 中显示。但是，卡片具有动态高度，我想要做的是让列中的卡片与顶部对齐。

这是当前设置：

let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10)]

func itemsView() -> some View {
        VStack {
            filterButton()
                .padding(.bottom)
            LazyVGrid(columns: resultGridLayout, spacing: Constants.ItemsGrid.spacing) {
                ForEach(MockData.resultsData, id: \.id) { result in
                    ProductCardView(viewModel: .init(container: viewModel.container, menuItem: result))
                }
            }
            .padding(.horizontal, Constants.ItemsGrid.padding)
        }
    }

当前布局如下：

所以每个项目都在它的列 space 中居中，而我想要发生的是让它们在每一行的顶部对齐。

显然，vGrid 的 alignment 修饰符允许我们水平对齐（.center、.leading、.trailing 等），但我怎样才能阻止它们在中心垂直对齐？

Answer 1

我假设您想对齐网格项本身，例如

let resultGridLayout = [GridItem(.adaptive(minimum: 160), spacing: 10, 
                          alignment: .top)]    // << here !!

使用 Xcode 13.3 / iOS 15.4 测试（在某些复制上）

SwiftUI LazyVGrid - 顶部对齐

SwiftUI LazyVGrid - align top

alignment

swiftui

lazyvgrid