Sizing multiple vstack width in scroll view, SwiftUI

Question

I have a VStack:

VStack(alignment: .leading) {
        Text(question)
            .fontWeight(.heavy)
            .font(.system(.footnote, design: .rounded))
            .padding(.bottom)
        Text(answer)
            .fontWeight(.semibold)
            .font(.system(.title, design: .rounded))
    }
    .padding(35)
    .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color("darkGrey"), lineWidth: 2))
    .padding([.leading,.top,.trailing])
    .frame(minWidth: UIScreen.main.bounds.width - 5,
           minHeight: 50,
           maxHeight: .infinity,
           alignment: .topLeading
    )

And Im using it in my View like:

ScrollView(.horizontal, showsIndicators: false) {
                Group {
                    HStack {
                        questionCard(question: "Cats or Dogs", answer: "Dogs")
                        questionCard(question: "Cats or Dogs", answer: "Dogs")
                    }
                }
            }

This results in the following:

I'm trying to get the width of the box to the end of the screen (with .trailing space) and then when I scroll to the next, it should be the same width.

Answer 1

You could do something like the following:

struct ContentView: View {
    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            Group {
                HStack {
                    QuestionCard(question: "Cats or Dogs", answer: "Dogs")
                    QuestionCard(question: "Cats or Dogs", answer: "Dogs")
                }
            }
        }
    }
}

struct QuestionCard: View {
    let question: String
    let answer: String
    
    var body: some View {
        
        HStack {
            Spacer()
            VStack(alignment: .leading) {//<- Change the alignment if needed
                Text(question)
                    .fontWeight(.heavy)
                    .font(.system(.footnote, design: .rounded))
                    .padding(.bottom)
                Text(answer)
                    .fontWeight(.semibold)
                    .font(.system(.title, design: .rounded))
            }
            Spacer()
            
        }
        .padding(35)
        .overlay(RoundedRectangle(cornerRadius: 12).stroke(Color.black, lineWidth: 2))
        .padding([.leading, .top, .trailing])
        .frame(minWidth: UIScreen.main.bounds.width - 5,
               minHeight: 50,
               maxHeight: .infinity,
               alignment: .top
        )
    }
}

So basically I`m just using an HStack and two Spacers in order to use all of the available space. It looks like this: