Question

我有一个与此问题类似的问题（尚无答案）：SwiftUI HStack with GeometryReader and paddings

不同的是，我的目标是在 HStack 内对齐两个视图，其中左视图获得可用宽度的 1/3，右视图获得可用宽度的 2/3。

在 ChildView 中使用 GeometryReader 会弄乱整个布局，因为它填满了高度。

这是我的示例代码：

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

结果如下：

现在，如果您将此视图嵌入其他视图中，则布局完全混乱：

例如在 ScrollView

内

那么如何实现拥有一个 HStack-ChildView 的理想结果，它填满它获得的空间并将其划分（1/3、2/3）在它的两个孩子之间？

编辑

如答案中所述，我也忘记添加HStack(spacing: 0)。忽略这一点是右子容器溢出的原因。

Answer 1

您可以为视图大小创建自定义 PreferenceKey。 Here 是一个例子：

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

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

然后，创建一个将计算其大小并将其分配给 ViewSizeKey 的视图：

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

SwiftUI 如何在 HStack 中对齐子视图

1 个答案: