SwiftUI布局问题：如何以ZStack中背景矩形为参考放置叠加图形？

问题核心是外层ZStack默认采用父容器（如屏幕）的坐标系，导致小图形在整个屏幕范围排布。要让小图形以背景矩形为参照，只需将背景矩形与小图形包裹在内部ZStack中，利用内部ZStack的尺寸由背景矩形决定的特性，让小视图在这个局部坐标系内布局。

修复后的代码示例 #

ZStack {
    // 内部ZStack：尺寸由背景矩形决定，作为小图形的布局容器
    ZStack(alignment: .top) {
        // 背景矩形，自定义尺寸
        Rectangle()
            .frame(width: 300, height: 400)
            .foregroundColor(.gray)
        
        // 顶部小图形组：现在以内部ZStack（背景矩形）为参照布局
        HStack(spacing: 15) {
            Circle().frame(width: 25, height: 25).foregroundColor(.red)
            Circle().frame(width: 25, height: 25).foregroundColor(.blue)
            Circle().frame(width: 25, height: 25).foregroundColor(.green)
        }
        .padding(.top, 12) // 相对于背景矩形顶部的间距
    }
}

关键说明 #

• 内部ZStack会自动匹配背景矩形的尺寸，小视图的布局坐标系被限制在这个范围内，不再延伸到整个屏幕。
• 通过设置内部ZStack的alignment参数（如.topLeading、.bottomTrailing），可以快速定义小图形相对于背景矩形的对齐方式。
• 如果背景矩形是自适应内容大小（未设置固定frame），内部ZStack依然会跟随其尺寸变化，小图形始终以它为参照。

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