SwiftUI：ZStack内Circle的frame修饰符为何影响其他子视图

这不是ZStack的bug，是你对SwiftUI的布局规则、padding与offset的作用差异理解有误。

问题原因 #

SwiftUI的核心布局逻辑为：父视图先向子视图提议可用尺寸，子视图根据自身属性计算所需尺寸返回给父视图，父视图最终完成子视图的位置摆放。ZStack的默认尺寸是所有子视图返回尺寸的最大宽高组合，你的代码存在两个会撑大ZStack的问题：

• 给Circle设置了固定433宽高，如果当前设备屏幕宽度小于433，Circle会向所在的VStack返回433的宽度需求，VStack会把自身宽度同步调整为433并上报给ZStack，直接把ZStack的宽度撑到超出屏幕边界。
• 你使用.padding(.top, -(diameter / 2))调整Circle位置，负padding会修改视图的实际布局边界，相当于把VStack的顶部布局边界向上扩展了直径的一半，进一步让VStack的布局尺寸超过屏幕可用范围，ZStack的尺寸也会同步被撑大。
  包含Button的VStack在ZStack内部，会继承ZStack被撑大的尺寸，所以Button的左右padding计算是基于超出屏幕的宽度，最终出现Button超出屏幕的问题，和你删除Circle固定尺寸后的效果不一致。

解决方法 #

把调整Circle位置的负padding替换为offset修饰符（offset仅调整渲染位置，不改变布局尺寸），同时给包含Circle的VStack设置maxWidth和maxHeight为infinity，让这个VStack的布局尺寸固定匹配屏幕可用空间，不会被Circle的大尺寸撑大：

struct CircleTestView: View {
    let diameter: CGFloat = 433

    var body: some View {
        ZStack {
            Color(.yellow)
                .ignoresSafeArea()
        
            VStack {
                Circle()
                    .fill(Color(.green))
                    .frame(width: diameter, height: diameter)
                    // 用offset替换负padding，仅调整渲染位置，不改变布局尺寸
                    .offset(y: -(diameter / 2))
                Spacer()
            }
            // 强制VStack的布局尺寸匹配父视图可用空间，不会被Circle撑大
            .frame(maxWidth: .infinity, maxHeight: .infinity)
        
            VStack {
                Spacer()
                Button {} label: {
                    Color(.red)
                        .frame(height: 55)
                        .padding([.leading, .trailing], 16)
                }
            }
        }
    }
}

修改后即可同时保留第一张图的Circle展示效果和第二张图的Button样式。

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