vikingosegundo's questions

Tenho quatro formas colocadas em segundo plano usando ZStack. Coloquei dois botões e um botão de alternância em uma camada acima. No modo retrato, a alternância é renderizada fora da tela, conforme mostrado na hierarquia de visualização. Ao comentar as formas fica claro que o círculo laranja e o retângulo maior estão criando esse efeito.

Como posso criar um plano de fundo com formas que podem ser maiores que os limites da tela, sem que as camadas acima sejam afetadas por isso?

O código pode ser encontrado aqui: https://gitlab.com/vikingosegundo/button-and-toggle-styles

struct GlassmorphismButtons: View {
    @State private var isToggled = false

    var body: some View {
        ZStack {
            LinearGradient(colors: [Color.cyan.opacity(0.7), Color.purple.opacity(0.3)], startPoint: .topLeading, endPoint: .bottomTrailing).edgesIgnoringSafeArea(.all)
            ZStack {
                RoundedRectangle(cornerRadius: 10, style: .continuous)
                    .frame(width: 300, height: 300)
                    .foregroundStyle(LinearGradient(colors: [.indigo, .teal], startPoint: .top, endPoint: .leading))
                    .offset(.init(width: -100, height: 100))
                    .rotationEffect(.degrees(15))
                    .blur(radius: 5)

                Circle()
                    .frame(width: 300)
                    .foregroundColor(Color.blue)
                    .offset(x: -100, y: -150)
                    .blur(radius: 5)

               RoundedRectangle(cornerRadius: 30, style: .continuous)
                   .frame(width: 500, height: 500)
                   .foregroundStyle(LinearGradient(colors: [.purple, .mint], startPoint: .top, endPoint: .leading))
                   .offset(x: 300)
                   .rotationEffect(.degrees(30))
                   .blur(radius: 5)

               Circle()
                   .frame(width: 450)
                   .foregroundStyle(Color.orange)
                   .offset(x: 120, y: -200)
                   .blur(radius: 5)
            }
            VStack {
                VStack {
                    HStack {
                        Button {
                            print("button clicked")
                        } label: {
                            Text("Click me")
                        }.buttonStyle(FrostedGlassButtonStyle())

                        Button {
                            print("button clicked")
                        } label: {
                            Image(systemName: "heart.fill")
                        }.buttonStyle(FrostedGlassButtonStyle())
                    }
                }
                HStack {
                    Toggle(isOn: $isToggled) {
                        Text("Toggle")
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        TabView {
            GlassmorphismButtons()
                .tabItem { Label("Glassmorphism", systemImage: "list.dash") }
            NeumorphismButtons()
                .tabItem { Label("Neumorphism", systemImage: "list.dash") }
        }
    }
}

#Preview {
    ContentView()
}