SwiftUI GeometryReader不会在中心布局自定义子视图

Question

我有一个自定义视图：

struct ImageContent: View {
    var body: some View {
        Image("smile")
            .resizable()
            .scaledToFit()
    }
}

使用GeometryReader将哪个放置在另一个视图中：

var body: some View {
    GeometryReader { geometry in
        ImageContent()
        //Image("smile").resizable().scaledToFit()
    }
}

问题是ImageContent视图不在屏幕中央，而是放在顶部，但是，通过删除ImageContent子视图并将视图内容直接添加到几何读取器中将解决此问题（参见图片）。

此外，删除GeometryReader也可以解决此问题。

我需要子视图，因为我将实现一些其他逻辑，并且还需要GeometryReader，因为在使用它的Image中添加了一个手势。

有什么主意吗？

Answer 1

如果不使用提供的GeometryProxy值，则需要什么GeometryReader？

struct ContentView: View {
    var body: some View {
        GeometryReader { geometry in
            ImageContent()
                .position(x: geometry.size.width / 2, y: geometry.size.height / 2)
        }
    }
}

将根据提供的值定义确切位置

Answer 2

尝试以下操作（默认情况下，内置容器将扩展为GeometryReader的大小，并且将默认的默认对齐方式设置为以两个尺寸为中心）。经过Xcode 11.2测试。

var body: some View {
    GeometryReader { geometry in
       VStack { // explicit container with center default alignment
        ImageContent()
       }
    }
}

Answer 3

我不确定为什么会这样，但是您可以使用其他人的建议，也可以使用midX，而midY是GeometryProxy的框架。如下所示：

var body: some View {
    GeometryReader { geometry in
        ImageContent()
        .position(x: geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY)
    }
}

Answer 4

我刚遇到同样的问题，我不喜欢手动设置位置的解决方案，因为它使自动生成布局的过程复杂化。对我来说，即使将我的内容包装在 VStack 中后，问题仍然存在。但是，如果您将内容包装在 VStack 中并手动设置它的框架 - 一切都按预期进行：

var body: some View {
    GeometryReader { geometry in
       VStack {
        ImageContent()
       }
       .frame(width: geometry.size.width, height: geometry.size.height)
    }
}

我认为出现这个问题是因为 GeometryReader 的内部布局就像一个 ZStack，它需要更多信息。