swift - 使用 SwiftUI，有没有办法将 View 的大小限制为另一个非兄弟 View ？

Question

我正在摆弄 View 布局 - 一个图表 - 我看到我可以在全 SwiftUI 布局中走多远。每个组成部分都很好，但组装整体并不像我想要的那样工作。我发现我可以轻松地沿单个堆栈轴限制大小 - 但不能同时限制两个轴(垂直和水平)。

我开始寻找 AlignmentGuides，因为我发现 you can align non-siblings with a custom guide .这将有助于我的目标，但它不能解决尺寸部分，这是这个问题的核心:

有没有办法根据另一个非兄弟 View 来限制 View 的大小？

结构的简化是:

HStack {
   CellOneView {
   }
   CellTwoView {
   }
}
HStack {
   CellThreeView {
   }
   CellFourView {
   }
}

其中映射到:

+-----+-----+
|  1  |  2  |
+-----+-----+
|  3  |  4  |
+-----+-----+

有没有办法告诉 CellFour(它与单元格的 1 和 2 不在同一个 HStack 中)我希望它约束自己(并对齐)到单元格 CellTwo 的宽度？

这不需要严格地是网格 View ( example of grid view )。在这种情况下，我真正关心的只有三个 View - 大致映射到单元格 1、单元格 2 和单元格 4 的区域。我希望单元格 1 和单元格 2 的高度相同(使用当前的HStack)，并且单元格 2 和单元格 4 的宽度相同 - 这就是我挣扎的地方。

Answer 1

1.获取尺寸

struct CellTwoView: View {

    var body: some View {
        Rectangle()
            .background(
                GeometryReader(content: { (proxy: GeometryProxy) in
                    Color.clear
                        .preference(key: MyPreferenceKey.self, value: MyPreferenceData(rect: proxy.size))
                })
        )
    }
}

说明 - 在这里，我使用背景 View (Color.clear)获得了 View 的大小，除非从 CellTwoView 本身获取大小，否则我使用了这个技巧；因为 SwiftUI-View 的大小是由 View 本身决定的，如果它们有大小(父级不能像 UIKit 那样改变大小)。所以如果我使用 GeometryReader使用 CellTwoView 本身，然后是 GeometryReader需要与 中可用的大小一样多家长 的 CellTwoView。 -> reason -> GeometryReader 取决于它们的父尺寸。 (实际上这是另一个主题，也是 SwiftUI 中的主要内容)

键 ->

struct MyPreferenceKey: PreferenceKey {
            static var defaultValue: MyPreferenceData = MyPreferenceData(size: CGSize.zero)


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

        typealias Value = MyPreferenceData
    }

值(value)(以及偏好改变时如何处理)->

struct MyPreferenceData: Equatable {
    let size: CGSize
    //you can give any name to this variable as usual.
}

2. 将尺寸应用到另一个 View

struct ContentView: View {

    @State var widtheOfCellTwoView: CGFloat = .zero

    var body: some View {
        VStack {
            HStack {
                CellOneView()
                CellTwoView ()
                    .onPreferenceChange(MyPreferenceKey.self) { (prefereneValue) in
                        self.widtheOfCellTwoView = prefereneValue.size.width
                }
            }

            HStack {
                CellThreeView ()
                CellFourView ()
                    .frame(width: widtheOfCellTwoView)
            }
        }
    }
}