游戏中视图
在游戏回合视图展示后，用户会进入到“游戏中”视图，正式开始参与游戏。如下图所示：
空气投篮游戏的游戏视图很简答，还原在现实生活中的篮筐，由一个计分板和投篮的篮筐组成，而计分板分为两块，分别为个位数计分板和十位数计分板。
我们首先要导入“篮筐”的图片，同样是在黑色背景下，我们需要一张SVG格式的矢量图，如下图所示：
回到GameDetailView游戏详情页，我们来构建游戏中视图的样式，由于需要统计计分板的分数，因此需要声明好变量部分，如下代码所示：
@State var unitsDigit: Int = 0 @State var tensDigit: Int = 0
上述代码中，unitsDigit为计分板个位数，tensDigit为计分板十位数。然后，我们再构建样式部分，如下代码所示：
// 游戏页面 func playGameView() -> some View { VStack(alignment: .center, spacing: 40) { HStack(alignment: .center, spacing: 20) { Text(String(unitsDigit)) .font(.system(size: 120)) .bold() .foregroundColor(.white) .padding(40) .background(Color.gray) .cornerRadius(8) Text(String(tensDigit)) .font(.system(size: 120)) .bold() .foregroundColor(.white) .padding(40) .background(Color.gray) .cornerRadius(8) } Image("ball") .resizable() .aspectRatio(contentMode: .fit) .frame(maxWidth: UIScreen.main.bounds.size.width / 2) } }
上述代码，在playGameView视图中，我们使用HStack横向布局容器包裹了计分板的样式内容。
关于Text文字背景部分，SwiftUI提供的方法是使用padding撑开距离，再使用background背景颜色填充撑开的间距，最后再使用cornerRadius设置圆角。
如此，便实现了计分板的样式效果，图片部分这里就不多说了。
同样，前期什么的Int类型的参数，在Text文字组件中使用需要转换成String字符串类型，方可使用。
此时我们就完成了2个页面：preStartView游戏回合视图、playGameView游戏中视图。这里做页面的切换，我们也可以声明一个参数来进行状态的切换，如下代码所示：
@State var isReady:Bool = false
然后通过声明好的isReady参数进行页面间的切换，如下代码所示：
if isReady { playGameView() } else { preStartView() }
进入&返回
经过两个章节的学习，我们完成了两个主要的视图：ContentView首页视图、GameDetailView游戏详情视图，共4个页面，接下来，我们要将这4个页面串起来。
回到ContentView首页视图，我们盘一盘逻辑，在用户点击游戏项时，将会进入到GameDetailView游戏详情视图，游戏详情页首先会展示回合视图，然后再开始游戏。
了解了基本的交互逻辑后，我们先完成页面之间的跳转，这里可以使用基于NavigationView顶部导航栏的跳转方式，如下代码所示：
NavigationView { ZStack { Color(.black).edgesIgnoringSafeArea(.all) if isAffirmInWatch { gameListView() } else { prepareView() .onTapGesture { self.isAffirmInWatch = true } } } }
上述代码中，需要使用NavigationView将整个视图包裹起来，然后再在gameListView游戏列表视图中添加跳转方法，如下代码所示：
NavigationLink(destination: GameDetailView()) { gameRowView(gameName: "投篮", gameHelpText: "手举球开始游戏", gameImage: "basketball") }
