SwiftUI 配置 LazyVGrid 无间距 [英] SwiftUI configure LazyVGrid with no spacing

问题描述

我想创建一个没有空格或空间较小的单元格网格，就像照片应用程序一样，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:

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

spacing The spacing beween the grid and the next item in its parent view.

这没有多大意义，你不能只使用 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 无间距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！