使SwiftUI矩形的高度或宽度与另一个矩形相同 [英] Make SwiftUI Rectangle same height or width as another Rectangle

问题描述

对于macOS应用中的SwiftUI布局，我具有三个矩形，如下所示:

For a SwiftUI layout in a macOS app, I have three Rectangles as shown below:

产生这种布局的代码是:

The code to produce this layout is:

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                ZStack {
                    Rectangle()
                        .fill(Color.purple)
                        .frame(width: 20)
                    Text("1")
                        .font(.subheadline)
                        .foregroundColor(.white)
                }
                
                ZStack {
                    Rectangle()
                        .fill(Color.orange)
                    Text("2")
                        .font(.subheadline)
                        .foregroundColor(.white)
                }
            }
            
            HStack {                
                ZStack {
                    Rectangle()
                        .fill(Color.red)
                        .frame(height: 20)
                    Text("3")
                           .font(.subheadline)
                           .foregroundColor(.white)
                }
            }
        }
        .frame(minWidth: 400, minHeight: 250)
    }
}

我的目标是使Rectangle 1与Rectangle 2的高度相同，并使Rectangle 3与Rectangle 2的宽度相同.矩形之间的大小关系应随窗口大小的改变而保持不变.正确完成后，最终结果应如下所示:

My objective is for Rectangle 1 to be the same height as Rectangle 2 and for Rectangle 3 to be the same width as Rectangle 2. The size relationships between the rectangles should stay the same as the window size is changed. When done correctly, the final result should look like the following:

如何在SwiftUI中完成此操作?

How can I accomplish this in SwiftUI?

推荐答案

这是一种基于视图首选项的可行方法.经过Xcode 11.4/macOS 10.15.6的测试

Here is a working approach, based on view preferences. Tested with Xcode 11.4 / macOS 10.15.6

struct ViewWidthKey: PreferenceKey {
    typealias Value = CGFloat
    static var defaultValue: CGFloat { 0 }
    static func reduce(value: inout Value, nextValue: () -> Value) {
        value = value + nextValue()
    }
}

struct ContentView: View {
    @State private var boxWidth = CGFloat.zero
    var body: some View {
        VStack {
            HStack {
                ZStack {
                    Rectangle()
                        .fill(Color.purple)
                        .frame(width: 20)
                    Text("1")
                        .font(.subheadline)
                        .foregroundColor(.white)
                }

                ZStack {
                    Rectangle()
                        .fill(Color.orange)
                    Text("2")
                        .font(.subheadline)
                        .foregroundColor(.white)
                }
                .background(GeometryReader {
                    Color.clear.preference(key: ViewWidthKey.self,
                        value: $0.frame(in: .local).size.width) })
            }

            HStack {
                ZStack {
                    Rectangle()
                        .fill(Color.red)
                        .frame(height: 20)
                    Text("3")
                           .font(.subheadline)
                           .foregroundColor(.white)
                }.frame(width: boxWidth)
            }.frame(maxWidth: .infinity, alignment: .bottomTrailing)
        }
        .onPreferenceChange(ViewWidthKey.self) { self.boxWidth = $0 }
        .frame(minWidth: 400, minHeight: 250)
    }
}

这篇关于使SwiftUI矩形的高度或宽度与另一个矩形相同的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！