GeometryReader 似乎更改了使用其大小数据的视图布局。我怎样才能避免这种情况？

Question

我希望我的图标图像是总可用屏幕宽度的 1/3。我的代码如下：

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

当我这样做时，图标出现在屏幕的左上角，它并没有像我想象的那样留在中间。例如，这可以正常工作，但不是基于屏幕尺寸的动态

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

Answer 1

这是可能的解决方案（使用 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)
    }

Answer 2

If you ever want to center a view inside a GeometryReader, rather than aligning to the top-left corner, add a second frame that makes it fill the full space of the container, like this:

GeometryReader { geo in
Image("Example")
    .resizable()
    .scaledToFit()
    .frame(width: geo.size.width * 0.8)
    .frame(width: geo.size.width, height: geo.size.height)

}

from: https://www.hackingwithswift.com/books/ios-swiftui/resizing-images-to-fit-the-screen-using-geometryreader

GeometryReader 似乎更改了使用其大小数据的视图布局。我怎样才能避免这种情况？

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

layout

swift

swiftui

geometryreader