GeometryReader seems to change layout of view that is using its size data. How can I avoid this?

Question

I would like my icon image to be 1/3 the width of total screen availability. My code is as follows:

    var body: some View {
        GeometryReader { geometry in
            Image(systemName: "square.dashed").resizable()
                .aspectRatio(contentMode: .fit).frame(maxWidth: geometry.size.width/3)
        }
    }

When I do this, the icon shows up in the upper left of the screen, it doesn't remain in the center like I would have thought. For example, this works properly but is not dynamic based on screen size

    var body: some View {
        Image(systemName: "square.dashed").resizable()
            .aspectRatio(contentMode: .fit).frame(maxWidth: 200)
    }

score 2 · Accepted Answer · answered Dec 14 '20 at 16:04

2

Here is possible solution (tested with Xcode 12.1 / iOS 14.1)

    GeometryReader { geometry in
        Image(systemName: "square.dashed").resizable()
            .aspectRatio(contentMode: .fit).frame(maxWidth: geometry.size.width/3)
            .frame(maxWidth: .infinity, maxHeight: .infinity)
    }

answered Dec 14 '20 at 16:04

Asperi

123,447
8
131
245

Hooray, that works. Thank you. It seems odd to me that GeometryReader is not layout nuetral. – Kevin McQuown Dec 14 '20 at 16:17

GeometryReader seems to change layout of view that is using its size data. How can I avoid this?

1 Answers1