swift - 在滚动视图中调整多个 vstack 宽度，SwiftUI

Question

我有一个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
    )

我View喜欢使用它：

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

这导致以下结果：

我试图让width盒子的末端（有.trailing空格），然后当我滚动到下一个时，它应该是相同的宽度。

Answer 1

您可以执行以下操作：

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

所以基本上我只是使用一个HStack和两个Spacers来使用所有可用空间。它看起来像这样：