Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set contentInset of a ScrollView in SwiftUI

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)
        }
    }
}
like image 617
Gigabite Avatar asked Jun 29 '20 13:06

Gigabite


People also ask

What is contentOffset in ScrollView?

contentOffset is where the user is standing after scrolling the area. So this would change each and every time the user scrolls up and down. At times this can be set programmatically as well as in main thread, which will scroll up to given value if the position exists.

What is content inset Swift?

The contentInset is how much the content is visually inset inside the scroll view. It is the custom distance that the content view is inset from the safe area or scroll view edges. contentInset allows you to specify margins or padding around the content in the scrollview.

What is scroll view in Swiftui?

ScrollView is a view that allows for scrolling through multiple child elements/views, such as Text, Images, Stacks, etc.


1 Answers

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)
        }
    }
}
like image 90
Mofawaw Avatar answered Sep 25 '22 09:09

Mofawaw