Center Scroll View content

Question

I have centered my Scroll View by using GeometryReader like this:

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geom in
                ScrollView(.vertical, showsIndicators: false) {
                    ZStack { 
                        my_super_view()
                    }
                    .navigationBarTitle("Main")
                    .frame(width: geom.size.width)
                    .frame(minHeight: geom.size.height)
                }
            }
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

And it works almost great. My problem is that the height of container ZStack is too big and the page could be scrolled down like this: And when i try to do smth like:

.frame(minHeight: geom.size.height-52)

The page stops scrolling, but is poorly centered. How can I properly center the page so that it fits entirely on the main screen without scrolling below it?

UPD: I found out that i could use position() instead of frame(). In that case page centred properly, but it may cause some issues in future.

What's the reason to have scroll view if content is less than screen and you need to center content, scroll view is just not appropriate in this scenario. — Asperi, Oct 24 '21 at 14:41

score 0 · Accepted Answer · answered Nov 06 '21 at 20:19

struct ContentView: View {
    var body: some View {
        NavigationView {
            GeometryReader { geom in
                ScrollView(.vertical, showsIndicators: false) {
                    ZStack { 
                        my_super_view()
                    }
                    .navigationBarTitle("Main")
                    .position(x: geom.size.width/2, y: geom.size.height/2)
                }
            }
            .navigationBarTitle("Диа Компаньон")
            .navigationBarTitleDisplayMode(.inline)
        }.navigationViewStyle(StackNavigationViewStyle())
    }
}

I had to use .inline NavigationBarDisplayMode and position instead of setting up width and height of ZStack

Center Scroll View content

1 Answers1