Programmiererforum

import SwiftUI

struct ContentView: View {
@State private var selectedTab: String? = "Tab 1"

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

ScrollView(.horizontal) {
LazyHStack(spacing: 0) {
SampleView(.purple, 5)
.id("Tab 1")
.containerRelativeFrame(.horizontal)

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

SampleView(.blue, 20)
.id("Tab 3")
.containerRelativeFrame(.horizontal)
}
.scrollTargetLayout()
}
.scrollPosition(id: $selectedTab)
.scrollTargetBehavior(.paging)
}
}
}

@ViewBuilder
func SampleView(_ color: Color, _ size: Int) -> some View {
LazyVGrid(columns: Array(repeating: GridItem(), count: 2), content: {
ForEach(1...size, id: \.self) { _ in
RoundedRectangle(cornerRadius: 15)
.fill(color.gradient)
.frame(height: 150)
}
})
}
}

Ich versuche, eine Schnittstelle mit einer vertikalen Bildlaufansicht auf der oberen Ebene zu erstellen, und dann eine horizontale Bildlaufansicht (mit dem neuen paginierten Scrolling von iOS 17), um eine Reihe von untergeordneten Ansichten anzuzeigen, die der Benutzer seitwärts scrollen kann. Bisher verhält es sich genau so, wie ich es will, außer dass die Höhe der ersten Ansichten in der horizontalen Bildlaufansicht die Höhe für jede andere Ansichten zu setzen scheint, auch wenn sie einen größeren Inhalt haben. Um ehrlich zu sein, ich bin mir nicht sicher, welches Verhalten ich mir vorstellen kann, aber ich habe mich gefragt, ob jemand ein ähnliches Problem gelöst oder ein ähnliches Layout auf andere Weise entworfen hat. < /P>
Hier ist ein minimal reproduzierbares Beispiel: < /p>
[code]import SwiftUI

struct ContentView: View {
@State private var selectedTab: String? = "Tab 1"

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

ScrollView(.horizontal) {
LazyHStack(spacing: 0) {
SampleView(.purple, 5)
.id("Tab 1")
.containerRelativeFrame(.horizontal)

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

SampleView(.blue, 20)
.id("Tab 3")
.containerRelativeFrame(.horizontal)
}
.scrollTargetLayout()
}
.scrollPosition(id: $selectedTab)
.scrollTargetBehavior(.paging)
}
}
}

@ViewBuilder
func SampleView(_ color: Color, _ size: Int) -> some View {
LazyVGrid(columns: Array(repeating: GridItem(), count: 2), content: {
ForEach(1...size, id: \.self) { _ in
RoundedRectangle(cornerRadius: 15)
.fill(color.gradient)
.frame(height: 150)
}
})
}
}
[/code]

als Aus dem Beispiel können Sie die Höhe der horizontalen Scrollview in der Höhe der ersten untergeordneten Ansicht eingesperrt.