SwiftUI: вложенные представления прокрутки на противоположной оси

Это происходит из-за того, что LazyHStack используется для горизонтальной прокрутки контента.

• Внешний LazyVStack основывает свою высоту на идеальной высоте вложенного (горизонтального) ScrollView.
• Вложенный ScrollView использует идеальную высоту LazyHStack.
• LazyHStack использует высоту первого дочернего элемента, потому что другие подпредставления не видны и поэтому еще не имеют размера.

Если вы измените LazyHStack на HStack, то вертикальная прокрутка будет работать на полный рост самого высокого ребенка. Но, конечно, вы также можете прокрутить вниз за пределы первого дочернего элемента. Вероятно, вы тоже захотите добавить выравнивание .top:

ScrollView(.vertical) {
    LazyVStack {
        Image(systemName: "photo.fill")
            // ...

        ScrollView(.horizontal) {
            HStack(alignment: .top, spacing: 0) { // 👈 HERE
                // ...
            }
            .scrollTargetLayout()
        }
        .scrollPosition(id: $selectedTab)
        .scrollTargetBehavior(.paging)
    }
}

Если известен рост самого высокого ребенка, альтернативным решением было бы применить это значение как minHeight к LazyHStack:

LazyHStack(alignment: .top, spacing: 0) {
    // ...
}
.frame(minHeight: 1000)
.scrollTargetLayout()

Однако, если вы переоцените высоту, то вертикальная прокрутка просто прокрутит в пустое пространство, а если вы недооцените высоту, то более высокий ребенок будет обрезан, как вы видели изначально.

Если вы хотя бы знаете, какое из подпредставлений будет самым высоким, тогда другим обходным решением будет использование самого высокого подпредставления для формирования скрытого контура для первого подпредставления. Фактическое первое подпредставление затем можно отобразить как наложение поверх этого отпечатка:

LazyHStack(alignment: .top, spacing: 0) {
    SampleView(.blue, 20)
        .id("Tab 1")
        .containerRelativeFrame(.horizontal)
        .hidden()
        .overlay(alignment: .top) {
            SampleView(.purple, 5)
        }

    SampleView(.red, 12)
        .id("Tab 2")
        .containerRelativeFrame(.horizontal)

    SampleView(.blue, 20)
        .id("Tab 3")
        .containerRelativeFrame(.horizontal)
}
.scrollTargetLayout()

РЕДАКТИРОВАТЬ Ваш комментарий заставил меня задуматься. Поскольку вы используете scrollTargetLayout, изменение подпредставления будет отражено изменением на selectedTab. Используя GeometryReader на заднем плане каждого подпредставления, minHeight для LazyHStack можно обновить, чтобы он соответствовал высоте выбранного подпредставления при каждом изменении содержимого.

@State private var selectedTab: String? = "Tab 1"
@State private var minContentHeight = CGFloat.zero

private func heightReader(target: String) -> some View {
    GeometryReader { proxy in
        Color.clear
            .onChange(of: selectedTab, initial: true) { oldVal, newVal in
                if target == newVal {
                    withAnimation {
                        minContentHeight = proxy.size.height
                    }
                }
            }
    }
}

var body: some View {
    ScrollView(.vertical) {
        LazyVStack {
            Image(systemName: "photo.fill")
                .resizable()
                .aspectRatio(contentMode: .fill)

            ScrollView(.horizontal) {
                LazyHStack(alignment: .top, spacing: 0) {
                    SampleView(.purple, 5)
                        .id("Tab 1")
                        .containerRelativeFrame(.horizontal)
                        .background { heightReader(target: "Tab 1") }

                    SampleView(.red, 12)
                        .id("Tab 2")
                        .containerRelativeFrame(.horizontal)
                        .background { heightReader(target: "Tab 2") }

                    SampleView(.blue, 20)
                        .id("Tab 3")
                        .containerRelativeFrame(.horizontal)
                        .background { heightReader(target: "Tab 3") }
                }
                .frame(minHeight: minContentHeight)
                .scrollTargetLayout()
            }
            .scrollPosition(id: $selectedTab)
            .scrollTargetBehavior(.paging)
        }
    }
}