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

Posted 2023-02-24

【中文标题】SwiftUI GeometryReader 不会在中心布局自定义子视图

【英文标题】：SwiftUI GeometryReader does not layout custom subviews in center

【发布时间】：2020-02-24 10:18:39

【问题描述】：

我有一个自定义视图：

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。

有什么想法吗？

【问题讨论】：

@Asperi 好的，我对 GeometryReader 不太熟悉。让我把它编辑出来......不过，如果有任何修复/解决方法，问题仍然存在。

【参考方案1】：

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

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

【参考方案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)
        
    

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

【参考方案3】：

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

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

【参考方案4】：

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

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

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

【讨论】：

可以改为设置frame(maxWidth: .infinity, maxHeight: .infinity)