SwiftUI嵌套GeometryReader-断开UI

所以我试图理解为什么我的子视图TopView出现了奇怪的大小调整问题

这是样品

import SwiftUI

struct ContentView: View {
    @State var isInterfaceHidden: Bool = false

    var body: some View {
        VStack(spacing: 0, content: {
            if !isInterfaceHidden {
                TopView()
                    .background(Color.yellow)
            }
            Rectangle()
                .foregroundColor(Color.red)
                /// We make sure it won't cover the top and bottom view.
                .zIndex(-1)
            if !isInterfaceHidden {
                Rectangle()
                    .foregroundColor(Color.yellow)
                    .frame(height: 80)
            }
        })
        .navigationBarTitle("")
        .navigationBarHidden(true)
    }
}

struct TopView: View {var body: some View {
        HStack(content: {
            VStack(spacing: 0, content: {
                Text("Text to show, it is a title.")
                    .tracking(0.2)
                    .foregroundColor(.white)
                    .lineLimit(1)
                GeometryReader(content: { geometry in
                    Text("Text to show, it is a subline.")
                        .tracking(0.2)
                        .foregroundColor(.white)
                        .lineLimit(1)
                })
                .background(Color.purple)
            })
        })
        .padding([.leading, .trailing], 20)
    }
}

我尝试设置一个.fixedSize，如下所示：

GeometryReader(content: { geometry in
    Text("Text to show, it is a subline.")
        .tracking(0.2)
        .foregroundColor(.white)
        .lineLimit(1)
    })
    .background(Color.purple)

---

但它并不完全符合文本，因此我不确定这是否是正确的解决方案。你们知道吗？

据我所知，GeometryReader会将父级给定的大小传递回其父级，除非您明确地将frame设置为GeometryReader。即使如此，如果您想将GeometryReader的区域精确地适配到自定义视图的文本视图，您必须使用preference或AnchorReference计算自定义视图的高度，然后将其设置为GeometryReader的高度，以便让父视图知道需要指定的大小

我希望下面的链接会有所帮助。

---

据我所知，GeometryReader会将父级给定的大小传递回其父级，除非您明确将frame设置为GeometryReader。即使如此，如果您想将GeometryReader的区域精确地适配到自定义视图的文本视图，您必须使用preference或AnchorReference计算自定义视图的高度，然后将其设置为GeometryReader的高度，以便让父视图知道需要指定的大小

我希望下面的链接会有所帮助。

---

请注意，GeometryReader从20年9月26日14.0开始出现了一个回归，或者可能是一个奇妙的、未记录的行为变化，权重布局朝向左上角，而不是中间

这只出现在我用XCode 12开发和构建的应用程序中——在iOS 14上运行的XCode-11编译应用程序没有出现这个问题。网络上的大多数教程都假设这与ios13/XCode 11中的工作方式相同，并且您的代码可能会有不同的功能

---

对于具有相同问题的更为复杂的问题，请注意GeometryReader在20年9月26日14.0时出现了一个回归，或者可能是一个奇妙的未记录的行为变化，权重布局朝向左上角，而不是中间

这只出现在我用XCode 12开发和构建的应用程序中——在iOS 14上运行的XCode-11编译应用程序没有出现这个问题。网络上的大多数教程都假设这与ios13/XCode 11中的工作方式相同，并且您的代码可能会有不同的功能

对于同样问题的更复杂问题

如果希望GeometryReader不影响视图的大小，则应进行反转。在GeometryReader中返回的视图应该是out，而GeometryReader本身应该放在该视图的背景或覆盖中

Text("Text to show, it is a subline.")
    .tracking(0.2)
    .foregroundColor(.white)
    .lineLimit(1)
    .overlay(
        GeometryReader(content: { geometry -> Color in
            print(geometry.frame(in: .global))
            return Color.clear
        })
    )
    .background(Color.purple)

无论是背景还是叠加，都可以解决您的问题。尝试将覆盖更改为背景以查看

请记住返回颜色。清除，这样，GeometryReader将不可见，并且不会更改视图

如果希望GeometryReader不影响视图的大小，则应进行反转。在GeometryReader中返回的视图应该是out，而GeometryReader本身应该放在该视图的背景或覆盖中

Text("Text to show, it is a subline.")
    .tracking(0.2)
    .foregroundColor(.white)
    .lineLimit(1)
    .overlay(
        GeometryReader(content: { geometry -> Color in
            print(geometry.frame(in: .global))
            return Color.clear
        })
    )
    .background(Color.purple)

无论是背景还是叠加，都可以解决您的问题。尝试将覆盖更改为背景以查看

---

只需记住返回颜色。清除，这样，GeometryReader将不可见，并且不会更改视图。

为什么需要在文本视图周围使用该几何体读取器？我看不到正在使用提供的几何图形。我使用的自定义文本在文本大于可用宽度时从右向左和从左向右滑动。如果需要，我也可以共享滑动文本组件。但是我不认为这在这里是必要的，因为不管有没有它，它都会破坏UI。你的自定义文本视图的工作方式是高度取决于宽度，这对吗？比如，如果你有较长的文本，它会以与标准文本视图类似的方式分成多行。是的，但在这里，即使不使用自定义文本，它仍然会破坏我的UI，使GeometryReader的视图过大。我理解这一点。GeometryReader只是以一种尽可能占用空间的方式设计的。在这种情况下，通常有一种方法可以避免使用几何读取器。对于示例中的文本，解决方案是只删除几何体读取器。但我想你真正的问题需要一个不同的解决方案。自定义视图的实现将有所帮助。另一个解决方案是使用锚点将高度从自定义视图发送回几何体读取器，而该读取器在MWM中并不漂亮。为什么在文本视图周围需要几何体读取器？我看不到正在使用提供的几何图形。我使用的自定义文本在文本大于可用宽度时从右向左和从左向右滑动。我也可以共享滑动文本组件

---

---

f需要。但是我不认为这在这里是必要的，因为不管有没有它，它都会破坏UI。你的自定义文本视图的工作方式是高度取决于宽度，这对吗？比如，如果你有较长的文本，它会以与标准文本视图类似的方式分成多行。是的，但在这里，即使不使用自定义文本，它仍然会破坏我的UI，使GeometryReader的视图过大。我理解这一点。GeometryReader只是以一种尽可能占用空间的方式设计的。在这种情况下，通常有一种方法可以避免使用几何读取器。对于示例中的文本，解决方案是只删除几何体读取器。但我想你真正的问题需要一个不同的解决方案。自定义视图的实现将有所帮助。另一个解决方案是使用锚点将高度从自定义视图发送回几何体读取器，这将不是一个漂亮的读取器谢谢！我会检查一下，如果我找到解决办法，我会回来的！！：所以我读了它，但它并没有真正解释为什么我的GeometryReader在单独使用文本时破坏了我的UI。这篇文章最后解释了一点，即GeometryReader占用了所有可用的空间，孩子们会拿走他们需要的东西，但GeometryReader不会适应它。我不明白，因为SwiftUI应该给孩子空间，让家长适应。GeometryReader打破了这个逻辑。您的第一个屏幕截图看起来是第一个代码块的正确结果。但是，老实说，我不知道到底是什么部分的代码让它像第二个截图一样断裂。特别是，我找不到代码中使用了.fixedSize的位置，因此无法找到原因。你能分享更多打破布局的代码吗？这是完整的代码。我不用。这里是固定尺寸谢谢！我会检查一下，如果我找到解决办法，我会回来的！！：所以我读了它，但它并没有真正解释为什么我的GeometryReader在单独使用文本时破坏了我的UI。这篇文章最后解释了一点，即GeometryReader占用了所有可用的空间，孩子们会拿走他们需要的东西，但GeometryReader不会适应它。我不明白，因为SwiftUI应该给孩子空间，让家长适应。GeometryReader打破了这个逻辑。您的第一个屏幕截图看起来是第一个代码块的正确结果。但是，老实说，我不知道到底是什么部分的代码让它像第二个截图一样断裂。特别是，我找不到代码中使用了.fixedSize的位置，因此无法找到原因。你能分享更多打破布局的代码吗？这是完整的代码。我不使用.fixedSize。谢谢你的解释，事实上，我意识到iOS 14实际上是苹果在生产中发布的一个有缺陷的测试版。最新的XCode 12中有一些行为变化-查看发行说明。他们有点记录它们。当然-在实际的技术文档中没有文档-因为谁读过这篇文章？这是胡说八道谢谢你的解释，事实上，我意识到iOS 14实际上是苹果在生产中发布的一个有缺陷的测试版-最新的XCode 12中有行为的变化-查看发行说明。他们有点记录它们。当然-在实际的技术文档中没有文档-因为谁读对了？这简直是胡说八道