swift - 如何在 SwiftUI 中为网格布局创建自定义大小的正方形

Question

我是 SwiftUI 的新手，一直在查看文档和教程，但似乎无法掌握如何创建我想要连续放置的任何大小的正方形。例如，如果我想要三个、四个或更多排成一行。

我想我会使用GeometryReader，因为我不应该硬编码frame? 我如何做到这一点，我会确保它在其他不同尺寸的设备上工作吗？

这是我正在尝试的示例。有三个项目。当我这样做时，第三个方块正在离开屏幕。

GeometryReader { geo in
    HStack {
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
        Rectangle()
            .fill(Color.black)
            .frame(width: geo.size.width / 3, height: 135)
    }  
}

标签： swiftswiftui

Answer 1

在其他选项中，您甚至可以使用GridItem它，

检查下面的代码，

var columns : [GridItem] = [
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8),
        GridItem(.flexible(), spacing: 8)
    ]

    var body: some View {

        ScrollView() {
            LazyVGrid(columns: columns) {
                Rectangle()
                    .fill(Color.pink)
                    .frame(height: 135)

                Rectangle()
                    .fill(Color.black)
                    .frame(height: 135)

                Rectangle()
                    .fill(Color.green)
                    .frame(height: 135)
            }
            .padding(.vertical)
        }
}