18

我有一个自定义视图：

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使用它。

任何想法？

截屏

4

4 回答 4

14

我不确定为什么会发生这种情况，但您可以使用其他人的建议，或使用midXand midYfromGeometryProxy的框架。如下所示：

var body: some View {
    GeometryReader { geometry in
        ImageContent()
        .position(x: geometry.frame(in: .local).midX, y: geometry.frame(in: .local).midY)
    }
}
于 2020-04-18T19:16:18.277 回答
13

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

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

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

于 2020-02-24T11:24:09.583 回答
9

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

var body: some View {
    GeometryReader { geometry in
       VStack { // explicit container with center default alignment
        ImageContent()
       }
    }
}
于 2020-02-24T10:32:54.203 回答
9

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

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

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

于 2021-04-06T12:57:57.127 回答