ios - SwiftUI 如何在 HStack 中对齐 subview

Question

我对这个问题有类似的问题(还没有答案):SwiftUI HStack with GeometryReader and paddings
不同的是，我的目标是在 HStack 内对齐两个 View ，其中左 View 获得可用宽度的 1/3，右 View 获得可用宽度的 2/3。
使用 GeometryReader ChildView 内部弄乱了整个布局，因为它填满了高度。
这是我的示例代码:

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(spacing: 5) {
                ChildView().background(Color.yellow.opacity(0.4))
                ChildView().background(Color.yellow.opacity(0.4))
                Spacer()
            }

            .padding()

            Spacer()

            Text("Some random Text")
        }
    }
}

struct ChildView: View {
    var body: some View {
        GeometryReader { geo in
            HStack {
                Text("Left")
                    .frame(width: geo.size.width * (1/3))
                Text("Right")
                    .frame(width: geo.size.width * (2/3))
                    .background(Color.red.opacity(0.4))
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.green.opacity(0.4))
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

结果如下:

现在，如果您将此 View 嵌入其他 View 中，则布局完全困惑:
例如里面ScrollView
那么如何实现拥有 HStack 的预期结果？ -ChildView 填充它获得的空间并将其划分(1/3、2/3)在它的两个 child 之间？
编辑
如答案中所述，我也忘记添加HStack(spacing: 0) .忽略这一点是右子容器溢出的原因。

Answer 1

您可以创建自定义 PreferenceKey对于 View 大小。 Here是一个例子:

struct ViewSizeKey: PreferenceKey {
    static var defaultValue: CGSize = .zero

    static func reduce(value: inout CGSize, nextValue: () -> CGSize) {
        value = nextValue()
    }
}

然后，创建一个将计算其大小并将其分配给 ViewSizeKey 的 View 。 :

struct ViewGeometry: View {
    var body: some View {
        GeometryReader { geometry in
            Color.clear
                .preference(key: ViewSizeKey.self, value: geometry.size)
        }
    }
}

现在，您可以在 ChildView 中使用它们。 (即使它被包裹在 ScrollView 中):

struct ChildView: View {
    @State var viewSize: CGSize = .zero
    
    var body: some View {
        HStack(spacing: 0) { // no spacing between HStack items
            Text("Left")
                .frame(width: viewSize.width * (1 / 3))
            Text("Right")
                .frame(width: viewSize.width * (2 / 3))
                .background(Color.red.opacity(0.4))
        }
        .frame(minWidth: 0, maxWidth: .infinity)
        .background(Color.green.opacity(0.4))
        .background(ViewGeometry()) // calculate the view size
        .onPreferenceChange(ViewSizeKey.self) {
            viewSize = $0 // assign the size to `viewSize`
        }
                    
    }
}