CODEWITHSUNDEEP
iosswiftswiftui
Womble Tristes
Womble Tristes

Reputation: 443

GeometryReader in SwiftUI ScrollView causes weird behaviour and random offset

Im trying to create a ScrollView that in turn contains a GeometryReader (Explicitly not the other way around). The GeometryReader should contain an (image) with a fixed width and height. However when doing this, the ScrollView pushes the view "above" the screen, it seems like it's applying some random vertical offset.

enter image description here

var body: some View {
    ScrollView {
        GeometryReader { geometry in
            Image("hp")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(width: geometry.size.width, height: 400)
                .clipped()
        }
    }
}

When removing the GeometryReader and just inserting the image it works fine.

Can somebody help?

Edit: Found a solution. I achieved the desired behaviour by telling the image that it should be as high and wide as the inner geometry reader. Then i'm setting the inner geometry reader

var body: some View {
    GeometryReader { outerGeometry in
        ScrollView {
            VStack {
                GeometryReader { innerGeometry in
                    Image("hp")
                        .resizable()
                        .aspectRatio(contentMode: .fill)
                        .frame(width: innerGeometry.size.width,
                        height: innerGeometry.size.height)
                        .offset(y: innerGeometry.frame(in: .global).minY/7)
                        .clipped()
                }
                    .frame(width: outerGeometry.size.width, height: 300)
            }
        }
    }
}

Upvotes: 13

Views: 16132

Answers (2)

Hrabovskyi Oleksandr
Hrabovskyi Oleksandr

Reputation: 3275

Just try to put ScrollView inside GeometryReader and not vice versa:

// ...
    var body: some View {
        
        GeometryReader { geometry in
            
            ScrollView {
                Image("hp")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: geometry.size.width, height: 400)
                    .clipped()
            }
        }
            
    }
// ...

and the result should be:

enter image description here

Upvotes: 26

Asperi
Asperi

Reputation: 258345

GeometryReader, if placed as you did, provides the size not of ScrollView itself, but of "Content View" in which image is placed. "Content View" of ScrollView is bigger than screen size, to allow spring effect at the edges, when one scrolls more than a scrolling document size.

The correct usage is in @Александр_Грабовский's answer.

Upvotes: 9

Related Questions