Swiftui 根据屏幕宽度制作2x2网格

很抱歉，如果这是一个简单的问题，但我刚刚开始使用SwiftUI，我正试图找出如何根据屏幕宽度生成2x2的视图网格。这意味着每个正方形的宽度和高度都与屏幕宽度相同，并且它们排列在2x2网格中，没有填充

我一直在尝试使用两个HStack，每个HStack中有两个视图放置在彼此的顶部，但是HStack中的视图大小似乎决定了HStack的高度

我试图将视图排列到2x2网格中的代码：

var body: some View {
        VStack {
            TextField("0", text: $value)
                .multilineTextAlignment(.center)
                .textFieldStyle(PlainTextFieldStyle())
                .font(.system(size: 40, weight: .semibold, design: .rounded))
                .border(Color.black)
                .padding()

            Text(title)
                .padding([.leading, .bottom, .trailing])
                .font(.system(size: 14, weight: .regular, design: .rounded))
            }
                .background(Color.green)
                .cornerRadius(10)
                .overlay(RoundedRectangle(cornerRadius: 10).stroke(Color.black, lineWidth: 5))
    }

---

这可以使用

GeometryReader

完成：

struct ContentView: View
{
    var body: some View
    {
        GeometryReader
        { geometry in
            self.useProxy(geometry)
        }
    }

    func useProxy(_ geometry: GeometryProxy) -> some View
    {
        let dimension = min(geometry.size.width, geometry.size.height)
        return VStack
        {
            HStack(spacing: 0)
            {
                Text("Top Left")
                    .frame(width: dimension / 2, height: dimension / 2)
                    .border(Color.black)

               Text("Top Right")
                   .frame(width: dimension / 2, height: dimension / 2)
                   .border(Color.black)
            }

            HStack(spacing: 0)
            {
                Text("Bottom Left")
                    .frame(width: dimension / 2, height: dimension / 2)
                    .border(Color.black)

               Text("Bottom Right")
                   .frame(width: dimension / 2, height: dimension / 2)
                   .border(Color.black)
            }
        }
    }
}

---

观看（的第一部分）以了解SwiftUI的布局系统。

我发现结合使用

HStack

s、

VStack

s和

aspectRatio（\uaspectratio:CGFloat？=nil，contentMode:contentMode）

最适合在视图上强制使用某些比例：

struct ContentView: View {

    var body: some View {
        VStack(spacing: 0) {
            HStack(spacing: 0) {
                Rectangle().fill(Color.red)
                    .aspectRatio(1.0, contentMode: .fit)
                Rectangle().fill(Color.green)
                    .aspectRatio(1.0, contentMode: .fill)
            }
            HStack(spacing: 0) {
                Rectangle().fill(Color.blue)
                    .aspectRatio(1.0, contentMode: .fit)
                Rectangle().fill(Color.yellow)
                    .aspectRatio(1.0, contentMode: .fill)
            }
        }.aspectRatio(contentMode: .fit)
    }
}

产生如下布局：

---

非常漂亮和简单，无需使用。对于更复杂的布局，

GeometryReader

非常方便。这适用于矩形，但我使用的视图中有文本和文本字段，当我使用上述代码时，正方形的大小由文本+文本字段的高度决定，因此，在屏幕中间有4个大小相等的正方形，而不是4个大屏幕，它们是屏幕宽度/2Y，提到2x2网格，但是你的代码只包含文本和文本字段。请让我知道，如果他们是打算在同一个广场或两个单独的，我会更新我的答案。