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 子视图并直接将视图的内容添加到geometry reader 将解决这个问题（见图）。

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

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

有什么想法吗？

Answer 1

更新：用 Xcode 13.3 / iOS 15.4

重新测试

尝试以下操作（内置容器默认扩展到 GeometryReader 的大小，并将两个维度的显式默认对齐方式设置为居中）。使用 Xcode 11.2.

测试

var body: some View {
    GeometryReader { geometry in
       VStack { // explicit container with center default alignment
        ImageContent()
       }
       .frame(maxWidth: .infinity, maxHeight: .infinity)
    }
}

Answer 2

您可以使用在您的 GeometryReader 体内传递的 GeometryProxy 值。

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

这将根据提供的值定义准确的位置。

Answer 3

我不确定为什么会这样，但您可以使用其他人的建议，或使用 GeometryProxy 框架中的 midX 和 midY。像下面这样：

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，它需要更多信息。

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

SwiftUI GeometryReader does not layout custom subviews in center

swiftui

geometryreader

更新：用 Xcode 13.3 / iOS 15.4