SwiftUI中如何约束两个View拥有相同的位置与尺寸？

我是一名有一定经验的UIKit/AppKit开发者，刚开始接触SwiftUI。在UIKit里，不管用Interface Builder还是代码编写NSLayoutConstraint，让两个UIView尺寸、位置完全一致都很直接。SwiftUI的声明式语法本该更简单，但我现在却得手动计算帧的大小和位置，肯定是漏了什么方法。

我的核心需求是：在按正确宽高比显示的ImageView上方，叠放一个透明的CanvasView实例，两者完全重合（视图层级结构示意如下）。

当前实现方式 #

我目前通过在ZStack中嵌套GeometryReader，手动计算布局参数，再显式设置两个视图的frame和position来实现：

WidgetView #

struct WidgetView: View {
    let uiimage = UIImage(named: "cateyes")!
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button("Left", action: {print("do left")})
                Spacer()
                Button("Right", action: {print("do right")})
            }
            .padding(.horizontal, 8)
            ZStack(alignment: .center) {
                GeometryReader { geom in
                    let aspect = uiimage.size.width / uiimage.size.height
                    let w = geom.size.width
                    let h = geom.size.width / aspect
                    let fits = h <= geom.size.height
                    let s = fits ? 1.0 : geom.size.height / h
                    let W = s*w
                    let H = s*h
                    let x0 = (geom.size.width - W)/2
                    ImageView(uiimage: uiimage)
                        .frame(width: W, height: H, alignment: .top)
                        .position(x: x0 + W/2, y: H/2)
                    CanvasView()
                        .frame(width: W, height: H, alignment: .top)
                        .position(x: x0 + W/2, y: H/2)
                }
            }
        }
    }
}

ImageView #

仅实现按比例缩放图片：

struct ImageView: View {
    var uiimage : UIImage!
    var body: some View {
        Image(uiImage: uiimage)
            .resizable()
            .aspectRatio(contentMode: .fit)
    }
}

CanvasView #

在视图对角绘制X：

struct CanvasView: View {
    var body: some View {
        GeometryReader { geometry in
            let w = geometry.size.width
            let h = geometry.size.height
            Path { path in
                path.move(to: CGPoint(x: 0,y: 0))
                path.addLine(to: CGPoint(x: w, y: h))
                path.move(to: CGPoint(x: 0, y: h))
                path.addLine(to: CGPoint(x: w, y: 0))
            }
            .stroke(Color.black, lineWidth: 4)
        }
    }
}

这种方法虽然可行，但完全没必要手动计算布局，还担心ZStack无法正确自适应尺寸。

更简洁的实现方案 #

SwiftUI的布局系统支持自动传递尺寸约束，你不需要手动计算任何参数，有两种更直接的方式：

方式1：使用.overlay修饰符 #

直接在ImageView上叠加CanvasView，overlay会自动让叠加视图匹配底层视图的尺寸和位置：

struct WidgetView: View {
    let uiimage = UIImage(named: "cateyes")!
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button("Left", action: {print("do left")})
                Spacer()
                Button("Right", action: {print("do right")})
            }
            .padding(.horizontal, 8)
            
            // 核心：用overlay自动匹配ImageView的尺寸
            ImageView(uiimage: uiimage)
                .overlay(CanvasView())
        }
    }
}

方式2：使用ZStack直接包裹 #

ZStack默认会让所有子视图适配容器内的布局，由于ImageView已经通过.aspectRatio(contentMode: .fit)约束了宽高比，CanvasView会自动对齐并匹配它的尺寸：

struct WidgetView: View {
    let uiimage = UIImage(named: "cateyes")!
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Button("Left", action: {print("do left")})
                Spacer()
                Button("Right", action: {print("do right")})
            }
            .padding(.horizontal, 8)
            
            // ZStack自动让两个视图尺寸位置一致
            ZStack {
                ImageView(uiimage: uiimage)
                CanvasView()
            }
        }
    }
}

原理说明 #

SwiftUI的布局是父视图传递尺寸建议，子视图返回自身需求的过程：

1. ImageView通过.aspectRatio(contentMode: .fit)告诉父视图，它需要按图片的宽高比缩放，且不超过可用空间。
2. 当用overlay或ZStack叠加CanvasView时，CanvasView会自动继承ImageView的最终尺寸，不需要额外设置frame。
3. CanvasView中的GeometryReader依然可以正常获取自身的尺寸，用于绘制路径。

最终效果如下：

内容的提问来源于stack exchange，提问作者wcochran