使 SwiftUI 矩形与另一个矩形具有相同的高度或宽度

Posted 2023-02-25

【中文标题】使 SwiftUI 矩形与另一个矩形具有相同的高度或宽度

【英文标题】：Make SwiftUI Rectangle same height or width as another Rectangle

【发布时间】：2020-07-30 03:14:10

【问题描述】：

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

产生这个布局的代码是：

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)
    

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

如何在 SwiftUI 中实现这一点？

【参考方案1】：

这是一种基于视图偏好的工作方法。使用 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)
    

【讨论】：

这很好用。谢谢你。对于这样一个简单的任务，似乎有很多代码。