在GeometryReader中ZStack对齐不居中？

Question

我有以下的看法：

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内容对齐？

Answer 1

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!
        }
    }
}

结果：