How to create pages for each random card? - random

Question

(I am a total beginner in Xcode, so try to simplify the answer if you can...)
I have created a random card generator. More specifically I have four cards, when I click a button, a random card among the four cards appears.
The problem is I want to create four pages for each card. For instance, if a random card(image1) appears, I can click the card and go to a page(image1 page), whereas if a random card(image2) appears, I am also able to click the card and go to a page(image2 page)etc....
private var imgs = ["image1", "image2", "image3", "image4"]
#State private var imgsnumbers = [0, 1, 2, 3]
#State var buttonTapped = false
var body: some View {
VStack {
Image(imgs[imgsnumbers[1]])
.resizable()
.frame(width:150 , height:212.63)
Button(action: {
self.imgsnumbers[1] = Int.random(in:0...self.imgs.count - 1)
self.buttonTapped.toggle()
}){
Text("DEAL")
}
.disabled(buttonTapped)
}
}

Answer 1

Depending on how you want the page to be presented, you need to use either a sheet, fullScreenCover or NavigationLink. I'm going to focus on NavigationLink.
First, you need to add a new property #State var randomImage: Int?. This property will help you track what number was generated instead of altering imgsnumbers. You will be assigning the generated number to randomImage in your Button:
Button(action: {
self.randomImage = Int.random(in:0...self.imgs.count - 1)
self.buttonTapped.toggle()
}){
Text("DEAL")
}.disabled(buttonTapped) //note: You can use randomImage != nil instead of using a separate property to check if the button was tapped.
Next, you need to check for whether a number was generated or not using an if let. You'll notice I wrapped the image inside a NavigationLink, this is a button that will present the specific page (destination) for the number generated:
if let randomImage = randomImage {
NavigationLink(destination: PageToNavigateTo()) {
Image(imgs[randomImage])
.resizable()
.frame(width:150 , height:212.63)
}
}else {
//provide a default view if no number was generated
}
If you want to present the page using a different style, checkout fullScreenCover & sheet.

Answer 2

This is best done in two steps , first steps you already did a lot of work but here it is , with some changes, you can disable the button "Show Card" if you want,
The need for an extra #State variable imgsnumber is not there as we can use the random number for storing value and providing to your card view
The way you can create pages is by having another view called CardView of swiftui view type and move to that view with the image you click
This image can be identified by the index number
In a perfect world you would use an ObservableObject class to share the images you have ,but here if its simple need you can type in the array of images again in CardView…
Now you get a small app where you get random card and on clicking on the card you get a exclusive page for that card
You need #Binding property wrapper(in card view) , a facility by compiler that says , my value will be provided by some other View, in this case provided by ContentView, via the Navigation Link code
struct ContentView: View {
private var imgs = ["image1", "image2", "image3", "image4"]
#State private var randomNumber: Int = 0
#State var buttonTapped = false
#State var cardToggle = false
var body: some View {
NavigationView {
VStack {
Image(imgs[randomNumber])
.resizable()
.frame(width:150 , height:212.63)
.onTapGesture {
cardToggle = true
}
Button("Show Card") {
buttonTapped = true
randomNumber = Int.random(in: 0...3)
}
NavigationLink("", destination: CardView(pageNumber: $randomNumber), isActive: $cardToggle)
}
}
}
}
CardView
import SwiftUI
struct CardView: View {
#Binding var pageNumber: Int
var imgs = ["image1", "image2", "image3", "image4"]
var body: some View {
VStack {
Image(imgs[pageNumber])
.resizable()
.frame(width:150 , height:212.63)
}
}
}