swift - SwiftUI：ZStack 中的帧修饰符影响其他视图

Question

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)
                    .padding(.top, -(diameter / 2))
                Spacer()
            }
        
            VStack {
                Spacer()
                Button {} label: {
                    Color(.red)
                        .frame(height: 55)
                        .padding([.leading, .trailing], 16)
                }
            }
        }
    }
}

Circle上面的代码创建了第一个图像，但由于某种原因，如果我删除为（即）设置框架的行，.frame(width: diameter, height: diameter)我会得到第二个图像。

1. 2.

我想要圆圈在第一个屏幕中的样子，以及按钮在第二个屏幕中的样子，但似乎无法实现这一点。不知何故，设置框架Circle会影响其他视图，即使它们位于ZStack. 这是一个错误ZStacks，还是我误解了它们的工作原理？

Answer 1

让我们称这种方法为：

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)
                .padding(.top, -(diameter / 2))
            Spacer()
        }
    
        VStack {
            Spacer()
            Button {} label: {
                Color(.red)
                    .frame(height: 55)
            }
        }
        .padding(.horizontal, 16)
        }
    }
}

让我们称之为一种方法b：

struct CircleTestView: View {
let diameter: CGFloat = 433

var body: some View {
    ZStack {
        Color(.yellow)
            .ignoresSafeArea()
    
        VStack {
            Circle()
                .fill(Color(.green))
                .offset(x: 0, y: -(diameter / 1.00))
            // increment/decrement the offset by .01 example:
            // .offset(x: 0, y: -(diameter / 1.06))
            Spacer()
        }
    
        VStack {
            Spacer()
            Button {} label: {
                Color(.red)
                    .frame(height: 55)
                    .padding([.leading, .trailing], 16)
            }
         }
      }
   }
}

这两种方法的组合将使您进入方法c。这些中的任何一个都实现了您正在寻找的东西吗？