SwiftUI GeometryReader紧凑的尺寸

Question

我希望LoadingTitle的宽度为屏幕的70％，所以我使用GeometryReader，但是它会使垂直尺寸扩大，并且LoadingTitle会占用更多的垂直空间。我希望它保持尽可能的紧凑。

使用硬编码的width: 300时，我得到正确的布局（相对宽度除外）：

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 0) {
            LoadingTitle()
            Color.blue
        }
    }
}

struct LoadingTitle: View {
    var body: some View {
        HStack() {
                Color.gray
            }
            .frame(width: 300, height: 22)
            .padding(.vertical, 20)
            .border(Color.gray, width: 1)
    }
}

现在，如果我将body的{​​{1}}包裹在LoadingTitle中，则可以得到正确的相对大小，但是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) } } } 上将.fixedSize(horizontal: false, vertical: true)用作other suggested，但是结果视图过于紧凑，所有填充都被忽略：

如何获得相对宽度的第一个屏幕截图的布局？

Answer 1

这是可行的方法。在Xcode 11.4 / iOS 13.4上进行了测试（不带ContentView）

struct LoadingTitle: View {

    var body: some View {
        VStack { Color.clear }
            .frame(height: 22).frame(maxWidth: .infinity)
            .padding(.vertical, 20)
            .overlay(
                GeometryReader { geo in
                    HStack {
                        HStack {
                            Color.gray
                                .frame(width: geo.size.width * 0.7, height: 22)
                        }
                        .padding(.vertical, 20)
                        .border(Color.gray, width: 1)
                        Spacer()
                    }
                }
            )
    }
}