Master SwiftUI ScrollViews in Under 10 Minutes

SwiftUI ScrollView - How to add ScrollView in SwiftUI, SwiftUI ScrollViewReader, Sticky Header, Horizontal & Vertical Scrolling, Scroll to Position

Watch This Next:    • How To Make Your SwiftUI Navigation Bar Lo...  

Video Links
ScrollView:
https://developer.apple.com/documenta...

ScrollViewReader:
https://developer.apple.com/documenta...


Connect with me!
X: https://x.com/StemFoxIO

Question - What are you going to use a ScrollView or List? Answer in the comments!

Want to learn more? Here are some sources I've learned from. Plus, some purchases help the channel (Affiliate Links).

I love Big Mountain Studio's books. Detailed and image oriented. Check them out here https://www.bigmountainstudio.com/a/y...


⏰ Timecodes ⏰
00:00 - Intro
00:03 - How to add ScrollView in SwiftUI
00:45 - SwiftUI Vertical ScrollView
01:25 - SwiftUI Horizontal ScrollView
02:28 - ScrollView vs List
02:58 - SwiftUI Sticky Header & Footer
04:48 - Disable ScrollView Scrolling
05:26 - SwiftUI ScrollView Reader
06:15 - SwiftUI ScrollView Scroll To Top Position
06:55 - SwiftUI ScrollView Scroll To Bottom Position
07:14 - SwiftUI ScrollView Scroll To Random Position
08:09 - SwiftUI ScrollView Scroll To View Position
09:21 - Outro


#swift, #ios #development, #software, #swiftui #scrollview

About:
StemFoxIO posts videos to help you become a better, more efficient iOS developer.


Code:

```
import SwiftUI

struct ContentView: View {
var body: some View {
ScrollViewReader { proxy in
ScrollView(.vertical) {
VStack {
ForEach(0...20) { index in
Color.random()
.frame(width: 100, height: 100)
.overlay {
Text("Color \(index)")
.padding(5)
.padding(.horizontal, 5)
.background(.thinMaterial)
.clipShape(.capsule)
}
.id(index)
}
}
}
.border(.red)
.safeAreaInset(edge: .top, spacing: 0) {
VStack {
Text("Scroll To:")
HStack(spacing: 30) {
Button("Top") {
proxy.scrollTo(0)
}
Button("Bottom") {
proxy.scrollTo(19)
}
Button("Color 13") {
proxy.scrollTo(13, anchor: .center)
}
Button("Random") {
let random = Int.random(in: 0...20)
proxy.scrollTo(random, anchor: .top)

}
}
}
.padding(.bottom)
.frame(maxWidth: .infinity)
.background(.thinMaterial)
}
}
}
}

public extension Color {
static func random(randomOpacity: Bool = false) → Color {
Color(
red: .random(in: 0...1),
green: .random(in: 0...1),
blue: .random(in: 0...1),
opacity: randomOpacity ? .random(in: 0...1) : 1
)
}
}
```

#Preview {
ContentView()
}