swift - 如何在 SwiftUI 中让 2x2 的正方形适合屏幕

Question

我正在尝试通过 VStacks/HStacks 或 LazyVGrid 创建一个 2x2 网格，以使每行上的正方形适合屏幕。例如，第一个和第二个正方形各占屏幕宽度的一半，并根据该长度确定使其成为正方形的高度。我将如何以我提到的两种方式来做到这一点，或者有更好的方法吗？这是我到目前为止所拥有的。

VStack {
    HStack {
        Rectangle()
            .fill(Color.gray)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
    }
    HStack {
        Rectangle()
            .fill(Color.red)
            .frame(width: 100, height: 100)

        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
    }
}

在这里硬编码 frame 属性的宽度和高度感觉是错误的，或者这是消除方块之间间隙的方法？这种硬编码值的方式会扩展到其他手机尺寸吗？

LazyVGrid(columns: layout) {
    Rectangle()
        .fill(Color.gray)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.blue)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.red)
        .frame(width: 210, height: 210)
    Rectangle()
        .fill(Color.green)
        .frame(width: 210, height: 210)
}

编辑：这是得到我想要的新代码的样子。

VStack(spacing: 0) {
    HStack(spacing: 0) {
        Rectangle()
            .fill(Color.gray)

        Rectangle()
            .fill(Color.blue)

    }
    HStack(spacing: 0) {
        Rectangle()
            .fill(Color.red)

        Rectangle()
            .fill(Color.green)

    }
}
.aspectRatio(1.0, contentMode: .fit)

现在让它与 LazyVGrid 一起工作。

Answer 1

您可以使用GeometryReader，如此处所示。

示例用法：

struct MyView: View {
    var body: some View {
       GeometryReader { geo in
           //You now have access to geo.size.width and geo.size.height
       }
    }
}

Answer 2

在这里硬编码框架的宽度和高度感觉是错误的，或者这是消除方块之间间隙的方法？

要消除正方形之间的间隙，只需修改 HStack / VStack 以包含间距：

HStack(alignment: .center, spacing: 0, content: {
            Rectangle()
                .fill(Color.gray)
                .frame(width: 100, height: 100)

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
})

Answer 3

只需应用aspectRatio（值 1 并适合屏幕）修饰符，无需指定任何帧。

VStack {
    HStack {
        Rectangle()
            .fill(Color.gray)
            
        Rectangle()
            .fill(Color.blue)
            
    }
    HStack {
        Rectangle()
            .fill(Color.red)
        
        Rectangle()
            .fill(Color.green)
            
    }
}
.aspectRatio(1.0, contentMode: .fit)