How can I create a full-width VStack?

Question

I have a body with a VStack, another VStack inside that I'd like to start 20 points in, just like my "Explore More" text but for some reason it's indented like this and I can't figure out why. Would love some help here.

    struct BrandExploreMore: View {

    let brand: Brand

    var body: some View {
        VStack {
            HStack {
                Text("Explore More")
                    .font(.headline)
                    .foregroundColor(BrandColors.titleGray.color)
                    .padding(.leading, 20)
                Spacer()
            }

            VStack(spacing: 12) {
                Grid(leftTitle: "Desert", rightTitle: "Kids")
                Grid(leftTitle: "Stripes", rightTitle: "Pastels")
            }
             //.padding(.horizontal, 20)
//            .padding(EdgeInsets(top: 0, leading: -40, bottom: 0, trailing: 0))
            .padding(.bottom, 20)
            .background(SwiftUI.Color.red)
        }.background(SwiftUI.Color.orange) // end VStack
    }

}

struct BrandExploreMore_Previews: PreviewProvider {
    static var previews: some View {
        BrandExploreMore(brand: .kateZaremba)
    }
}

// MARK: - Grid

struct Grid: View {

    let leftTitle: String
    let rightTitle: String

    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {
        HStack(spacing: 12) {
//            Spacer()
            Button(action: { self.showLeft = true }) {
                ZStack {
                    Image(leftTitle)
                    Text(leftTitle)
                        .foregroundColor(BrandColors.titleGray.color)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showLeft) {
                Text(self.leftTitle)
            }

            Button(action: { self.showRight = true }) {
                ZStack {
                    Image(rightTitle)
                    Text(rightTitle)
                        .foregroundColor(BrandColors.titleGray.color)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showRight) {
                Text(self.rightTitle)
            }
//            Spacer()
        }
    }

}

Can you show the code that you have for the GridView as that may be affecting padding that you have in the second VStack? Have you tried taking the padding off of the second VStack? — Andrew
It should have a left border same as the beginning of the explore more text (20 pts) and a right margin to the edge of 20 pts — Zack Shapiro
Images, colors..., the output of the code you provided is not same with the image. — Mojtaba Hosseini

Mojtaba Hosseini Mojtaba Hosseini · Accepted Answer · 2019-10-31T20:18:02

The modifier you need is .frame(maxWidth: .infinity) for anything you need to stretch to fill.

In your code:

Each Button in the Grid
The middle VStack(spacing: 12) in BrandExploreMore

So after removing unknown resources and cleaning your code and performing some refactoring to it:

struct BrandExploreMore: View {

    var body: some View {
        VStack(alignment: .leading) {
            Group {
            Text("Explore More")

            VStack(spacing: 12) {
                Grid(leftTitle: "Desert", rightTitle: "Kids")
                Grid(leftTitle: "Stripes", rightTitle: "Pastels")
            }
            .frame(maxWidth: .infinity)

            .padding(.bottom, 20)
            .background(SwiftUI.Color.red)
            }.padding(.horizontal, 12)
        }
            .background(SwiftUI.Color.orange) // end VStack
    }

}

struct BrandExploreMore_Previews: PreviewProvider {
    static var previews: some View {
        BrandExploreMore()
    }
}

// MARK: - Grid

struct Grid: View {

    let leftTitle: String
    let rightTitle: String

    @State private var showLeft = false
    @State private var showRight = false

    var body: some View {
        HStack(spacing: 12) {
            Button(action: { self.showLeft = true }) {
                ZStack {
                    Rectangle()
                        .foregroundColor(.yellow)
                        .frame(maxHeight: 100)
                        .cornerRadius(16)
                    Text(leftTitle)
                        .foregroundColor(.blue)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showLeft) {
                Text(self.leftTitle)
            }
            .frame(maxWidth: .infinity)

            Button(action: { self.showRight = true }) {
                ZStack {
                    Rectangle()
                        .foregroundColor(.yellow)
                        .frame(maxHeight: 100)
                        .cornerRadius(16)
                    Text(rightTitle)
                        .foregroundColor(.black)
                        .font(.subheadline)
                }
            }.sheet(isPresented: self.$showRight) {
                Text(self.rightTitle)
            }
            .frame(maxWidth: .infinity)
        }
    }
}

Resulting this:

How can I create a full-width VStack?

1 Answers