0
    var body: some View {
  ZStack {
    //MARK: -3. DEPTH
    Color.customGreenDark
      .cornerRadius(40)
      .offset(y: 12)
    
    //MARK: -2. LIGHT
    Color.customGreenLight
      .cornerRadius(40)
      .offset(y: 3)
      .opacity(0.85)
    
    //MARK: -1. SURFACE
    LinearGradient(
      colors: [
        Color.customGreenLight,
        Color.customGreenMedium
      ],
      startPoint: .top,
      endPoint: .bottom
    )
    .cornerRadius(40)
  }
}

I have a view with ZStack with views that has a small depth effect at the bottom. My question is about the first view inside the ZStack.

Why applying the offset as a first view modifier and then the corner radius does not give me any depth effect?

Furthermore, if I only apply the offset to the view , it seems to give some offset, but as soon as I apply the cornerRadius the offset is gone.

What is the mechanism of drawing view when there are multiple view modifiers? How to know the order of adding view modifier? I am new to this subject.

0 Answers0