Полноэкранный режим не работает внутри HStack и Horizontal ScrollView

Question

Я пытался создать входящий поток, используя горизонтальные списки и т. Д. Я создал представление под названием OnboardingView и внутри него у меня есть VStack с изображением и два текстовых представления.

struct OnboardingView: View {
var body: some View {
    GeometryReader { geometry in
        VStack(spacing: 10) {
            Spacer()
            Image("1")
                .resizable()
                .frame(width: 300, height: 300)
                .clipShape(Circle())
                .padding(20)
            Text("Travel the World")
                .frame(width: geometry.size.width, height: 20, alignment: .center)
                .font(.title)
            Text("Explore the world and get to know different cultures and people from all around the world")
                .lineLimit(nil)
                .padding(.leading, 15)
                .padding(.trailing, 15)
                .font(.system(size: 16))
                .frame(width: geometry.size.width, height: 50, alignment: .center)
                .multilineTextAlignment(.center)
            Spacer()

        }.background(Color.red)
}

}}

Вот что я получаю с помощью приведенного выше кода:

Теперь я пытаюсь добавить это представление в ScrollView, используя HStack.

struct ContentView: View {

var body: some View {
   ScrollView(.horizontal, showsIndicators: false) {
        HStack {
            OnboardingView()
            OnboardingView()
        }
    }.background(Color.black)

  }
 }

Результат приведенного выше кода абсурден! Это то, что я получаю. Как это исправить? Помощь будет оценена! Благодарю.

Answer 1

Одним из возможных решений было бы установить width из OnboardingView в geometry.size.width:

var body: some View {
    GeometryReader { geometry in
        ScrollView(.horizontal, showsIndicators: false) {
            HStack {
                OnboardingView()
                    .frame(width: geometry.size.width)
                OnboardingView()
                    .frame(width: geometry.size.width)
            }
        }.background(Color.black)
    }
}

Результат

ht tps:https://stackru.com/images/8393e5ca59da6a2b36a8493397f2c3ec5d35a6d1.gif