vikingosegundo's questions

我使用 ZStack 将四个形状放置在背景中。我在上面一层放置了两个按钮和一个切换开关。在纵向模式下，切换呈现在屏幕外，如视图层次结构中所示。通过注释掉形状，可以清楚地看出，橙色圆圈和较大的矩形正在创建这种效果。

如何创建形状可能大于屏幕边界的背景，同时上面的图层不受此影响？

代码可以在这里找到：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()
}