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

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

我正在尝试通过 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 一起工作。

解决方法

您可以使用 GeometryReader，如here 所示。

示例用法：

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

,

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

要消除方块之间的间隙，只需修改 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)
})

,

只需应用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)