3

我有以下看法:

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

呈现:

在此处输入图像描述

我怎样才能使用GeometryReaderZStack 中的内容并且仍然像上面最后一张渲染图片那样居中?为什么 GeometryReader 会弄乱 ZStack 内容对齐?

4

1 回答 1

3

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

结果:

文本居中
于 2021-07-06T18:49:42.970 回答