在 GeometryReader 中 ZStack 对齐不居中？

问题描述

我有以下观点：

struct TestView: View {
    
    var body: some View {
        GeometryReader { geo in
            ZStack(alignment: Alignment(horizontal: .center,vertical: .center)) {
                                
                    Text("TEST TEXT")
                
            }.background(Color.red)
        }
    }
    
}

渲染：

我希望 ZStack 中的视图居中，这只有在我删除 GeometryReader 时才有效，如下所示：

struct TestView: View {
    
    var body: some View {
        ZStack(alignment: Alignment(horizontal: .center,vertical: .center)) {
            
            Text("TEST TEXT")
            
        }.background(Color.red)
    }
    
}

渲染：

如何使用 GeometryReader 并且仍然使 ZStack 中的内容居中，如上面最后一张渲染图所示？为什么 GeometryReader 会搞乱 ZStack 内容对齐？

解决方法

GeometryReader 的对齐方式不断变化 - 参见 GeometryReader Discrepancies with Previous OS Versions。为了获得正常行为，我通常只添加 .frame(maxWidth: .infinity,maxHeight: .infinity)。

struct TestView: View {
    var body: some View {
        GeometryReader { geo in
            ZStack { /// no need for the custom Alignment
                Text("TEST TEXT")
            }
            .background(Color.red)
            .frame(maxWidth: .infinity,maxHeight: .infinity) /// here!
        }
    }
}

结果：

geometryreader swiftui zstack