基于 2 个值呈现屏幕

Question

我有 2 个整数：Xcode 和 Ycode。这些是来自先前屏幕的绑定。现在我想要的是基于这些整数呈现一个新的视图。

该应用程序是一个小测验。所以 Xcode 和 Ycode 是分数。但是我想在您单击基于 Xcode 和 Ycode 的“单击我”按钮时呈现一个新视图。

例如：

Value X = between 8-15 and value Y = between 8-23 -> present screen1
Value X = between 8-15 and value Y = between 24-40 -> present screen2
Value X = between 16-23 and value Y = between 8-17 -> present screen3
And so on......

This is my Code:
      @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

    
    var body: some View {
        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!") {
                    
                    
                }
                    
                .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()
                
            }
        }
    }
}

我该如何创建它？

Answer 1

您可以像这样隐藏 navigation links：

NavigationLink(destination: View1(), isActive: $condition1, label: { EmptyView() })
NavigationLink(destination: View2(), isActive: $condition2, label: { EmptyView() })
NavigationLink(destination: View3(), isActive: $condition3, label: { EmptyView() })
// note that having empty views for your links will keep them hidden on your layout

针对您的每个 X 和 Y 条件。

因此，当您检查 X 和 Y 值时，您可以像这样验证它们：

condition1 = Xcode >= 8 && Xcode <= 15 && Ycode >= 8 && Code <= 23
condition2 = Xcode >= 8 && Xcode <= 15 && Ycode >= 24 && Code <= 40
condition3 = Xcode >= 16 && Xcode <= 23 && Ycode >= 8 && Code <= 17

这将激活您想要的 link 并显示您需要的屏幕。

Answer 2

您可以使用这种方法，使用一个元组、一个开关和一些导航链接：

struct ContentView: View {
    @State var xy = (5.0,7.0) // <-- use a tuple
    
    var body: some View {
        NavigationView {
            QuizView(xy: $xy)
        }.navigationViewStyle(.stack)
    }
}

struct QuizView: View {
    @Binding var xy: (Double, Double)
    
    // set of ranges of your scores for each screen
    let screen1X = 1.0..<4.0
    let screen1Y = 2.0..<4.0
    
    let screen2X = 3.0..<4.0
    let screen2Y = 4.0..<8.0
    
    let screen3X = 5.0..<9.0
    let screen3Y = 6.0..<8.0
    
    @State private var action: Int? = 0
    
    var body: some View {
        VStack {
            Button(action: {
                switch xy {
                case (screen1X,screen1Y): action = 1
                case (screen2X,screen2Y): action = 2
                case (screen3X,screen3Y): action = 3
                default:
                    print("---> default")
                }
            }) {
                Text("Click me")
            }
            NavigationLink(destination: Text("screen1X"), tag: 1, selection: $action) {EmptyView()}
            NavigationLink(destination: Text("screen2X"), tag: 2, selection: $action) {EmptyView()}
            NavigationLink(destination: Text("screen3X"), tag: 3, selection: $action) {EmptyView()}
        }
    }
}

Answer 3

具有 2 个值的 ContentView：valueX 和 valueY。然后是你需要的范围。然后计算属性来决定应该导航到哪个屏幕。仅当计算出的属性不 return 为 nil 时才会创建该按钮。导航的目的地 link 有一个开关决定要显示的屏幕和一个标签，它是要单击的按钮。

import SwiftUI

struct MContentView: View {
    @State var valueX = 17
    @State var valueY = 15
    
    @State var isNextViewActive = false
    
    private let range8_15 = 8...15
    private let range16_23 = 16...23
    private let range8_23 = 8...23
    private let range24_40 = 24...40
    private let range8_17 = 8...17
    
    private var screenToPresent: Int? {
        if range8_15.contains(valueX) && range8_23.contains(valueY) {
            return 1
        } else if range8_15.contains(valueX) && range24_40.contains(valueY) {
            return 2
        } else if range16_23.contains(valueX) && range8_17.contains(valueY) {
            return 3
        }
        
        return nil
    }
    
    var body: some View {
        NavigationView {
            if let screen = self.screenToPresent {
                NavigationLink(isActive: self.$isNextViewActive, destination: {
                    switch screen {
                    case 1:
                        MView1()
                    case 2:
                        MView2()
                    case 3:
                        MView3()
                    default:
                        EmptyView()
                    }
                }) {
                    Button(action: {
                        self.isNextViewActive = true
                    }) {
                        Text("Click me!")
                    }
                }
            }
        }
    }
}

struct MView1: View {
    var body: some View {
        Text("My View 1")
    }
}

struct MView2: View {
    var body: some View {
        Text("My View 2")
    }
}

struct MView3: View {
    var body: some View {
        Text("My View 3")
    }
}

struct MExample_Previews: PreviewProvider {
    static var previews: some View {
        MContentView()
    }
}

希望就是你要找的！

基于 2 个值呈现屏幕

Present screen based on 2 values

swift

swiftui

integer

screen