SwiftUI：如何用GeometryReader实现LoadingTitle相对宽度且保持紧凑布局

我完全懂你的困扰——用GeometryReader实现相对宽度后，垂直空间被莫名撑大，破坏了原本紧凑的布局。其实问题出在GeometryReader的默认行为上：它会尽可能占据父视图提供的所有可用空间，包括垂直方向，所以才会导致你的LoadingTitle变得“臃肿”。

下面给你几个可行的解决方案，按优雅程度排序：

方案一：用relativeFrame（iOS 16+ 推荐） #

如果你的项目支持iOS 16及以上，直接用relativeFrame是最简洁的方式，完全不需要GeometryReader：

struct LoadingTitle: View {
    var body: some View {
        HStack {
            Color.gray
                .frame(height: 22)
                .relativeFrame(.horizontal, width: 0.7) // 直接设置为父视图宽度的70%
            Spacer()
        }
        .padding(.vertical, 20)
        .border(Color.gray, width: 1)
        .frame(maxWidth: .infinity) // 让HStack占满父视图宽度，确保relativeFrame计算正确
    }
}

这个方法直接通过SwiftUI的原生API实现相对宽度，布局行为和你硬编码width:300时完全一致，垂直空间只会保留内容和内边距的大小。

方案二：限制GeometryReader的垂直扩张（兼容iOS 13+） #

如果你需要兼容更低版本的iOS，我们可以调整GeometryReader的使用方式，不让它占据多余的垂直空间：

struct LoadingTitle: View {
    var body: some View {
        HStack {
            // 只在需要获取宽度的灰色条外层用GeometryReader
            GeometryReader { geo in
                Color.gray
                    .frame(width: geo.size.width * 0.7, height: 22)
            }
            Spacer()
        }
        .padding(.vertical, 20)
        .border(Color.gray, width: 1)
        .frame(maxWidth: .infinity) // 确保HStack能拿到父视图的完整宽度
    }
}

这里的关键是把GeometryReader放在HStack内部，只包裹灰色条，而不是包裹整个LoadingTitle的内容。这样GeometryReader的垂直尺寸会由内部的灰色条高度决定，不会向外扩张，整个LoadingTitle的垂直布局就和硬编码时一样紧凑了。

方案三：给GeometryReader设置垂直对齐（兼容iOS 13+） #

如果你还是想保留把整个内容包裹在GeometryReader里的写法，可以给GeometryReader添加垂直方向的对齐限制，让它只占据内容需要的垂直空间：

struct LoadingTitle: View {
    var body: some View {
        GeometryReader { geo in
            HStack() {
                Color.gray
                    .frame(width: geo.size.width * 0.7, height: 22, alignment: .leading)
                Spacer()
            }
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
        }
        .frame(maxHeight: .infinity, alignment: .top) // 垂直方向只对齐顶部，不占据多余空间
        .fixedSize(vertical: true) // 强制垂直方向适应内容高度
    }
}

这个写法通过.frame(maxHeight: .infinity, alignment: .top)让GeometryReader在垂直方向只对齐顶部，再用.fixedSize(vertical: true)锁定垂直尺寸为内容的实际高度，这样就不会出现垂直空间被撑大的问题了。

你可以根据自己的iOS版本需求选择对应的方案，这三个方案都能实现“屏幕宽度70%+紧凑垂直布局”的效果，和你硬编码width:300时的布局完全一致。

内容的提问来源于stack exchange，提问作者Jan