How to set contentInset of a ScrollView in SwiftUI - swift

Question

I can't seem to find how to set the contentInset of a ScrollView. My goal is to make the last object in my ScrollView above the Purple Main Button.
https://i.stack.imgur.com/QfjZb.jpg
If there is a command, could someone help how to implement this into my current code below. I would appreciate your help!
struct Overview: View {
var body: some View {
NavigationView {
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<5) {
Text("Item \($0)")
.foregroundColor(.white)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(Color("Boxes"))
.cornerRadius(10)
}
}
.frame(maxWidth: .infinity)
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}
}

Answer 1

Just add a padding to the VStack embedded inside the ScrollView.
Using paddings with the embedded stacks provides the same behaviour as content insets.
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
// Some content //
}
.padding(.bottom, 200) // Choose a value that works for you
}

Answer 2

You could put an invisible view underneath your ScrollView content and give it bottom padding.
For example with Color.clear and a bottom-padding of 300.
struct Overview: View {
var body: some View {
NavigationView {
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<5) {
Text("Item \($0)")
.foregroundColor(.white)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(Color("Boxes"))
.cornerRadius(10)
}
Color.clear.padding(.bottom, 300)
}
.frame(maxWidth: .infinity)
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}
}

Answer 3

iOS 15's SwiftUI now has a safeAreaInset modifier.
It's also correctly adjusts scroll bars.
ScrollView(.vertical, showsIndicators: true) {
// scrollview's content
}
.safeAreaInset(edge: .bottom, spacing: 0) {
// some bottom-sticked content, or just –
Spacer()
.frame(height: 44)
}

Answer 4

In iOS 15 I just add negative padding to the VStack.
struct Overview: View {
var body: some View {
NavigationView {
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
ForEach(0..<5) {
Text("Item \($0)")
.foregroundColor(.white)
.font(.largeTitle)
.frame(width: 340, height: 200)
.background(Color("Boxes"))
.cornerRadius(10)
}
.padding(.top, -50)
}
.frame(maxWidth: .infinity)
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}
}

Answer 5

This article has a pretty good solution that seems to work on iOS13+ and calculates the correct inset automatically so you don't need to guess. It looks like it also doesn't handle the scroll indicator though.

Answer 6

You just need to add some Stack
struct Overview: View {
var body: some View {
NavigationView {
ScrollView(showsIndicators: false) {
VStack(spacing: 10) {
VStack {}.frame(width: 16, height: 40)
ForEach(0..<5) {
Text("Item \($0)")
}
VStack {}.frame(width: 16, height: 40)
}
}
.navigationBarHidden(false)
.navigationBarTitle("Overview", displayMode: .automatic)
}
}
}