SwiftUI使用GeometryReader布局后内容偏移的问题

问题描述

在未使用GeometryReader时，内容正常显示。

但是因为iPhone各种机型的尺寸不同，为了适配iPhone SE等机型，需要使用GeometryReader检测屏幕尺寸。

当添加GeometryReader时，发现视图都堆积在左上角：

经过查询了解到在 SwiftUI 中，GeometryReader 的行为是将其子视图扩展到父视图的可用空间，但是如果不显式指定子视图的布局方式，所有内容默认会对齐到左上角。因此，GeometryReader 中的内容显示在左上角是预期的行为。

因此，解决方案为将原先的View代码包裹在VStack或HStack，再明确指定内容的对齐和布局方式。

struct WelcomeView: View {
    var body: some View {
        GeometryReader { geometry in
            VStack { // 使用 VStack 将内容居中
                // 原先的代码部分
                ...
            }
            .frame(width: geometry.size.width, height: geometry.size.height) // 将内容填满 GeometryReader
        }
    }
}

需要注意的一点就是，需要给VStack或HStack设置frame，并将其大小调整为GeometryReader的大小，这样可以保证视图的正常展示。

注意事项

1、GeometryReader 的默认行为

子视图会扩展到整个父视图，但未设置具体对齐方式时，内容会默认对齐到左上角。

需要明确设置 .frame() 或者使用容器布局（如 VStack 和 ZStack）来调整内容的位置。

2、小屏幕设备的适配

确保在 GeometryReader 中，不会为固定位置强制使用绝对布局（如 padding 和硬编码的 frame），而是动态调整。

3、优先使用响应式布局

避免使用 GeometryReader 强制调整内容，优先使用 Spacer、alignment 等 SwiftUI 提供的自适应布局工具。

问题解决后的效果

通过上述方法，界面将正确适配屏幕大小，内容将按照需要对齐并显示在居中的位置，而不是默认堆积在左上角。