SwiftUI Grid Layout

Question

I'm trying to achieve the following grid layout with SwiftUI but not quite sure on the best approach.

My code is below and it's not quite getting what I want and also seems hacky to have many nested stacks

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)
                    
                }
                
                
            }
            
        }

My code gives the below result, I'm just not sure how I would max the boxes span half and a third of the screen. Also, is the approach I've taken with nested stack the right way?

score 8 · Accepted Answer · answered Jun 25 '20 at 14:28

You may try this:

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)
    }
}

Thank you, just what I needed! Much less code and spans how I wanted. — CIB, Jun 25 '20 at 14:40
.frame(maxWidth: .infinity) might not be needed thanks to the Spacer() in the cell, but nice answer :) — rraphael, Jun 25 '20 at 14:45

score 0 · Answer 2 · answered Jun 25 '20 at 14:30

0

Insert this code for each Box you have.

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

answered Jun 25 '20 at 14:30

Alex B

131
7

SwiftUI Grid Layout

2 Answers2

Linked