SwiftUI如何根据绑定整数Xcode、Ycode的取值区间点击按钮跳转对应页面

你可以用SwiftUI的NavigationStack实现多分支跳转逻辑，修改代码如下： #

1. 新增必要状态和枚举 #

首先在属性区新增跳转控制变量和页面标识枚举，方便统一管理目标页：

// 首先定义所有目标页的枚举
enum QuizResultScreen: Hashable {
    case screen1, screen2, screen3 // 你可以根据自己的实际页面数量扩展
}
@Binding var Xcode: Int
@Binding var Ycode: Int
@State var ShowButton: Bool = false
@State var ButtonYes: Bool = false
@State var ButtonNo: Bool = false
@State var ButtonSometimes: Bool = false
// 新增导航路径控制变量
@State private var navPath = NavigationPath()

2. 外层包裹NavigationStack并配置跳转目标 #

把你原来的body里的ZStack外层套上NavigationStack，同时加navigationDestination处理不同页面的跳转：

var body: some View {
    NavigationStack(path: $navPath) { // 新增外层NavigationStack
        ZStack{
            Image("Zebras")
                .resizable()
                .ignoresSafeArea()
                .navigationBarHidden(true)
            
            VStack{
                Text("Wat ben ik?")
                    .font(.largeTitle)
                    .fontWeight(.heavy)
                    .padding()
                    .foregroundColor(.white)
                    .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                    .cornerRadius(20)
                Spacer()
                Text("Je heb alle vragen beantwoord. Nu is de vraag: Welk dier ben ik?")
                    .foregroundColor(Color.white)
                    .font(.headline)
                    .padding()
                    .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                    .cornerRadius(20)
                Spacer()
                
                Text("Your score:")
                    .foregroundColor(Color.white)
                    .font(.headline)
                    .padding()
                    .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                    .cornerRadius(20)
                
                HStack (spacing:0){
                    Text("X = ")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .padding()
                        .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                        .cornerRadius(20)
                    
                    Text(String(Xcode))
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .padding()
                        .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                        .cornerRadius(20)
                }
                HStack (spacing:0){
                    
                    Text("Y = ")
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .padding()
                        .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                        .cornerRadius(20)
                    
                    Text(String(Ycode))
                        .foregroundColor(.white)
                        .font(.largeTitle)
                        .padding()
                        .background(Color(red: 0.493, green: 0.184, blue: 0.487))
                        .cornerRadius(20)
                }
                Spacer()
                
                Button("Click here!") {
                    // 这里加区间判断逻辑
                    switch (Xcode, Ycode) {
                    case (8...15, 8...23):
                        navPath.append(QuizResultScreen.screen1)
                    case (8...15, 24...40):
                        navPath.append(QuizResultScreen.screen2)
                    case (16...23, 8...17):
                        navPath.append(QuizResultScreen.screen3)
                    // 你可以继续扩展其他区间的判断
                    default:
                        // 处理不在以上区间的兜底逻辑
                        break
                    }
                }
                .frame(width: 100, height: 50, alignment: .center)
                .font(.headline)
                .foregroundColor(.white)
                .padding()
                .background(ButtonYes ? Color(red: 0.272, green: 0.471, blue: 0.262) : Color(red: 0.493, green: 0.184, blue: 0.487))
                .cornerRadius(20)
                .shadow(color: .black, radius: 10, x: 10, y: 10)
                Spacer()
                
            }
        }
        // 配置跳转目标，把Screen1、Screen2、Screen3换成你自己实际的页面视图
        .navigationDestination(for: QuizResultScreen.self) { screen in
            switch screen {
            case .screen1: Screen1()
            case .screen2: Screen2()
            case .screen3: Screen3()
            }
        }
    }
}

其他说明 #

如果你不需要压入导航栈，想要弹窗展示结果页，可以不用NavigationStack，改为给每个结果页定义一个布尔类型的@State控制变量，区间匹配之后直接把对应变量设为true，再用sheet(isPresented:) modifier展示对应页面即可。

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