SwiftUI 配置 LazyVGrid 无间距

问题描述

我想创建一个没有空格或空间较小的单元格网格，就像照片应用程序一样，SwiftUI 2 LazyVGrid 可以吗?我试过了，但列之间总是有这个空间.

I wanted to create a grid of cells with no spaces or smaller space just like the Photos app, is it possible with SwiftUI 2 LazyVGrid? I've tried it but there is always this space in-between columns.

在文档中，spacing 参数被描述为:

In the documentation, the spacing parameter is described as:

间距网格与其父视图中的下一项之间的间距.

这没有多大意义，你不能只使用 padding 吗?此外，当我尝试增加间距时，它似乎实际上影响了单元格行之间的空间，这更加出乎意料.

Which doesn't make much sense, can't you just use padding for that? Also, when I tried increasing the spacing, it seems to be actually impacting the space in-between rows of cells, which is even more unexpected.

推荐答案

你在 LazyVGrid 中给 spacing: 0 设置垂直间距，spacing: 0<GridItem 中的/code> 用于水平间距.

You give spacing: 0 in LazyVGrid for vertical spacing, and spacing: 0 in GridItem for horizontal spacing.

这是一个演示.使用 Xcode 12/iOS 14 测试

Here is a demo. Tested with Xcode 12 / iOS 14

struct TestImagesInGrid: View {
    @State private var imageNames: [String]

    private let threeColumnGrid = [
        GridItem(.flexible(minimum: 40), spacing: 0),
        GridItem(.flexible(minimum: 40), spacing: 0),
        GridItem(.flexible(minimum: 40), spacing: 0),
    ]

    init() {
        _imageNames = State(initialValue: (0..<8).map { _ in
            "image_\(Int.random(in: 1...3))"
        })
    }

    var body: some View {
        LazyVGrid(columns: threeColumnGrid, alignment: .leading, spacing: 0) {
            ForEach(imageNames.indices) { i in
                Image(imageNames[i]).resizable()
                    .aspectRatio(1, contentMode: .fill)
                    .border(Color.black)
            }
        }
    }
}

这篇关于SwiftUI 配置 LazyVGrid 无间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！