Swift 快速网格布局

我正试图用SwiftUI实现以下网格布局，但不太确定最佳方法

下面是我的代码，它并没有得到我想要的东西，而且有很多嵌套的堆栈似乎也有问题

VStack {
            
            VStack {
                
                HStack {
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.orange)
                    .cornerRadius(10)
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.red)
                    .cornerRadius(10)
                    
                }
                
                HStack {
                    
                    VStack {
                        
                        Text("Text Here")
                        Text("336.851")
                        
                    }
                    .padding(20)
                    .background(ColorManager.green)
                    .cornerRadius(10)
                    
                    VStack {

                        Text("Text Here")
                        Text("336.851")

                    }
                    .padding(20)
                    .background(ColorManager.blue)
                    .cornerRadius(10)

                    VStack {

                        Text("Text Here")
                        Text("336.851")

                    }
                    .padding(20)
                    .background(ColorManager.purpleLight)
                    .cornerRadius(10)
                    
                }
                
                
            }
            
        }

我的代码给出了下面的结果，我只是不确定如何最大化跨越屏幕一半和三分之一的框。另外，我使用嵌套堆栈的方法是否正确

你可以试试这个：

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                cell(header: "Text Here", text: "336.851", color: Color.orange)
                cell(header: "Text Here", text: "336.851", color: Color.red)
            }
            HStack {
                cell(header: "Text Here", text: "336.851", color: Color.green)
                cell(header: "Text Here", text: "336.851", color: Color.blue)
                cell(header: "Text Here", text: "336.851", color: Color.purple)
            }
        }
    }

    func cell(header: String, text: String, color: Color) -> some View {
        HStack {
            VStack(alignment: .leading) {
                Text(header)
                    .font(.caption)
                Text(text)
                    .fontWeight(.semibold)
            }
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .padding(20)
        .background(color)
        .cornerRadius(10)
        .padding(10)
    }
}

你可以试试这个：

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                cell(header: "Text Here", text: "336.851", color: Color.orange)
                cell(header: "Text Here", text: "336.851", color: Color.red)
            }
            HStack {
                cell(header: "Text Here", text: "336.851", color: Color.green)
                cell(header: "Text Here", text: "336.851", color: Color.blue)
                cell(header: "Text Here", text: "336.851", color: Color.purple)
            }
        }
    }

    func cell(header: String, text: String, color: Color) -> some View {
        HStack {
            VStack(alignment: .leading) {
                Text(header)
                    .font(.caption)
                Text(text)
                    .fontWeight(.semibold)
            }
            Spacer()
        }
        .frame(maxWidth: .infinity)
        .padding(20)
        .background(color)
        .cornerRadius(10)
        .padding(10)
    }
}

---

为您拥有的每个框插入此代码

.padding(20)
.frame(maxWidth: .infinity) //This will stretch your Box.
.background(ColorManager.orange)

---

为您拥有的每个框插入此代码

.padding(20)
.frame(maxWidth: .infinity) //This will stretch your Box.
.background(ColorManager.orange)

---

谢谢你，这正是我需要的！更少的代码和跨度是我想要的..framemaxWidth:.由于单元格中的间隔，可能不需要无穷大，但回答很好：谢谢你，正是我需要的！更少的代码和跨度是我想要的..framemaxWidth:.由于单元格中的间隔，可能不需要无穷大，但答案很好：