SwiftUI嵌套的GeometryReader-中断的UI

编程问答 2022-06-12

问题描述

所以我试图理解为什么我的子视图（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)
    }
}

enter image description here

我试图这样设置.fixedSize()：

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

enter image description here

但是它不能完全适合文本，因此我不确定这是否是正确的解决方案。你们有什么主意吗？

解决方法

请注意，从14.0（26 / Sep / 20）开始，GeometryReader似乎已经回归-也许是行为的奇妙无记录-加权布局朝着左上角-而不是中心。

这仅在我使用XCode 12开发和构建的应用程序中出现-在iOS 14上运行的XCode-11-compiled-app没有出现此问题。网上的大多数教程都将假定它可以像在iOS 13 / XCode 11中那样工作，并且您的代码可能会发挥不同的作用

iOS 14 has Changed (or broken?) SwiftUI GeometryReader中涉及相同问题的更复杂问题

,

据我所知，除非您将frame()显式设置为GeometryReader，否则GeometryReader会传回其父级给定的大小。即便如此，如果您想让GeometryReader的区域适合Text视图（恰好是您的自定义视图），则必须使用preference或{{1} }，然后将其设置为GeometryReader的高度，以使父级知道需要分配的尺寸。

我希望以下链接会有所帮助。
https://swiftui-lab.com/communicating-with-the-view-tree-part-1/

,

GeometryReader fit to View

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

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)

无论哪种方式（背景或叠加），都可以解决您的问题。尝试将 overlay 更改为 background 以查看。

只要记住返回一个 Color.clear，这样，GeometryReader 就会变得不可见并且不会改变视图。

geometryreaderios14swiftswiftswiftswiftswiftui