Scrollbare Liste mit präziser Ausrichtung

Beschreibung

Diese View zeigt eine lange, vertikal scrollbare Liste von Elementen mit gleichmäßigem Abstand und abgerundeten Hintergründen. Durch die Verwendung von scrollTargetLayout und scrollTargetBehavior(.viewAligned) wird sichergestellt, dass beim Scrollen einzelne Elemente exakt ausgerichtet im Viewport einrasten.

🔍 Zweck

• Darstellung vieler gleichartiger Elemente in einer performanten Liste
• Erstellung eines Katalogs oder einer Artikelliste
• Präsentation von scrollbaren Onboarding-Inhalten
• Testen von scrollbasierten Layout- und Paging-Effekten
• Aufbau einer strukturierten Liste mit exakter Ausrichtung

🖥️ Betriebssystem

iOS

📄 Codebeispiel

import SwiftUI

@main
struct ScrollAlignedListApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        ScrollView {
            LazyVStack(alignment: .leading, spacing: 10) {
                ForEach(0..<50) { index in
                    Text("Item \(index)")
                        .padding()
                        // Apply subtle background for readability
                        .background(.gray.opacity(0.2))
                        .cornerRadius(8)
                        // Enable precise scroll snapping for each item
                        .scrollTargetLayout()
                }
            }
        }
        // Ensure that scrolling aligns items cleanly within the viewport
        .scrollTargetBehavior(.viewAligned)
        .padding()
    }
}

// Modern Swift 5.10+ preview syntax
#Preview {
    ContentView()
}