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

【问题标题】：Make 2x2 grid based on screen width根据屏幕宽度制作 2x2 网格
【发布时间】：2019-10-19 08:51:49
【问题描述】：

对不起，如果这是一个简单的问题，但我刚刚开始使用 SwiftUI，我正在尝试弄清楚如何根据屏幕宽度制作一个 2x2 的视图网格。这意味着每个正方形的宽度和高度都为屏幕宽度，并且它们排列在 2x2 网格中，没有填充。

我一直在尝试使用两个 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))
    }

【问题讨论】：

标签： swiftui

【解决方案1】：

我发现使用 HStacks、VStacks 和 aspectRatio(_ aspectRatio: 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。 GeometryReader 对于更复杂的布局很方便。
这适用于矩形，但我使用的视图中有一个 Text 和一个 TextField，当我使用上面的代码时，正方形的大小由 Text + TextField 的高度决定，所以你最终在屏幕中间有 4 个大小相同的正方形，而不是 screenWidth / 2 的 4 个大正方形
您提到了 2x2 网格，但您的代码仅包含一个 Text 和一个 TextField。请让我知道它们是否应该在同一个方格内或两个不同的方格内，我会更新我的答案。

【解决方案2】：

这可以使用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)
            }
        }
    }
}

观看（第一部分）this WWDC video，了解 SwiftUI 的布局系统。

【讨论】：