如何为每张随机卡片创建页面

Question

(我是Xcode的初学者，所以如果可以的话，尽量简化答案…(

我创建了一个随机卡片生成器。更具体地说，我有四张牌，当我点击一个按钮时，四张牌中会随机出现一张牌。

问题是我想为每张卡片创建四页。例如，如果出现一张随机卡(图像1(，我可以单击该卡并转到一个页面(图像1页面(，而如果出现一个随机卡(图2(，我也可以单击卡并转到页面(图像2页面(等。。。。

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

根据页面的显示方式，需要使用sheet、fullScreenCover或NavigationLink。我将集中讨论NavigationLink。

• 首先，您需要添加一个新属性@State var randomImage: Int?。此属性将帮助您跟踪生成的数字，而不是更改imgsnumbers。您将在Button中将生成的号码分配给randomImage：

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.

• 接下来，您需要检查是否使用iflet生成了一个数字。您会注意到我将图像包装在NavigationLink中，这是一个按钮，它将显示生成的数字的特定页面(目的地(：

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
}

如果您想使用不同的样式显示页面，请签出fullScreenCover&CCD_ 11。

Answer 2

这最好分两步完成，第一步你已经做了很多工作，但现在，经过一些更改，你可以禁用按钮"显示卡片"；如果你愿意，

不需要额外的@State变量imgsnumber，因为我们可以使用随机数来存储值并提供给您的卡视图

创建页面的方法是使用另一个名为CardView的swiftui视图类型的视图，并使用单击的图像移动到该视图

该图像可以通过索引号识别

在一个完美的世界里，你会使用ObservableObject类来共享你拥有的图像，但在这里，如果它的简单需要，你可以在CardView…中再次键入图像阵列

现在你有一个小应用程序，在那里你可以获得随机卡，点击卡，你会得到该卡的专属页面

您需要@Binding属性包装器(在卡片视图中(，这是编译器的一个功能，它说，我的值将由其他视图提供，在本例中由ContentView提供，通过导航链接代码

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)
}
}
}