Custom grid in swift

Question

I need some help building this UI. what I want is to make a this grid 1

What I have tried so fare is this, but the padding between Sets, reps, rest.

struct ProgramContainer: View {
var weight: String = "Weight"
@State var value = ""

private var columns: [GridItem] = [
    GridItem(.flexible(minimum: 0, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40),
    GridItem(.flexible(minimum: 1, maximum: 40), spacing: 40)
]

var body: some View {
    ScrollView {
        VStack(alignment: .leading) {
            Text("name")
                .font(.title3).bold()
            Divider()
            LazyVGrid(
                columns: columns,
                alignment: .leading,
                spacing: 20,
                pinnedViews: [.sectionHeaders, .sectionFooters]
            ) {
                Section {
                    ForEach(0...11, id: \.self) {index in
                        TextField("0", text: $value)
                    }
                } header: {
                    HStack(spacing: 40, content: {
                        Text(weight)
                        Text("Reps")
                        Text("Sets")
                        Text("Rest")
                    })
                }
            }
        }
    }
}

}

and it looks like this:

Answer 1

I find that if you use a LazyVGrid with the same number of columns (GridItems) for the Section header then it is easier to align the header and the items.

Workout Item:

struct Workout: Identifiable {
let id = UUID()
let weight: Int
let sets: Int
let reps: Int
let rest: Int

}

HeaderView:

struct WorkoutHeaderView: View {
private let labels = ["Weight", "Set", "Reps", "Rest"]
private let gridItems: [GridItem] = [GridItem(), GridItem(), GridItem(), GridItem()]

var body: some View {
    LazyVGrid(columns: gridItems, spacing: 10) {
        ForEach(labels, id: \.self) { label in
            Text(label)
        }
    }
}

}

ProgramContainer:

struct ProgramContainer: View {
@State private var workoutData: [Workout] = [
    .init(weight: 100, sets: 3, reps: 12, rest: 1),
    .init(weight: 120, sets: 3, reps: 10, rest: 2)
]
private let gridItems: [GridItem] = [GridItem(), GridItem(), GridItem(), GridItem()]

var body: some View {
    VStack(spacing: 20) {
        VStack(alignment: .leading) {
            Text("Label")
            Divider()
        }
        
        LazyVGrid(columns: gridItems, spacing: 10) {
            Section(header: WorkoutHeaderView()) {
                ForEach(workoutData) { value in
                    Text("\(value.weight)")
                    Text("\(value.sets)")
                    Text("\(value.reps)")
                    Text("\(value.rest)")
                }
            }
        }
        
        Spacer()
            .frame(maxHeight: 150)
    }
    .padding()
    .background(
        RoundedRectangle(cornerRadius: 20)
            .foregroundColor(.blue)
            .opacity(0.5)
    )
    .padding()
}

}

Layout Result