如此，当我们点击“投篮”的游戏项时，就会跳转到GameDetailView游戏详情页。

我们来到GameDetailView游戏详情页，由于当前GameDetailView游戏详情页的isReady参数变量为false，因此GameDetailView游戏详情页会展示preStartView游戏回合视图。

我们希望的交互是preStartView游戏回合视图在显示2秒后自动到playGameView游戏中视图。

这里在页面载入时增加多一个方法，如下代码所示：

ZStack {
  Color(.black).edgesIgnoringSafeArea(.all)
  if isReady {
    playGameView()
  } else {
    preStartView()
  }
}
.onAppear(){
  DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
        self.isReady = true
      }
}

上述代码中，我们在GameDetailView游戏详情页onAppear展示时添加了一个在主线程上的操作，即基于当前时间2秒钟后，切换isReady状态。

如此，我们便实现了在用户进入GameDetailView游戏详情页时，先展示preStartView游戏回合视图，再展示preStartView游戏中视图了。

进入操作有了，最后是返回操作。

原有的返回按钮太丑了，我们可以自定义一个返回按钮，如下代码所示：

// 返回上一页
func backButton() -> some View {
  Button(action: {
    }) {
      Image(systemName: "chevron.left.circle")
      .font(.system(size: 17))
      .foregroundColor(.white)
    }
}
并将它加到GameDetailView游戏详情页视图中，如下代码所示：
scss
复制代码
ZStack {
  Color(.black).edgesIgnoringSafeArea(.all)
  if isReady {
    playGameView()
  } else {
    preStartView()
  }
}
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: backButton())

返回的操作交互也很简单，我们可以调用SwiftUI的通用返回方法，如下代码所示：

@Environment(.presentationMode) var mode

最后在点击backButton返回按钮的时候使用返回方法，如下代码所示：

self.mode.wrappedValue.dismiss()

本章预览

完成后，我们回到ContentView预览下整体项目。

本章小结

恭喜你，完成了本章的所有内容！

在本章中，我们构建了游戏详情页的视图，并完成了详情页的两种状态页面，准备开始游戏和游戏中的状态页面，还实现了从首页跳转到详情页、返回首页的全过程。

空气投篮项目iOS端整体的交互内容基本就到这里了，接下来我们将继续使用MVVM开发模式调整iOS端的内容，后面还会完成Watch端的页面及其交互。

最后如果条件成熟，我们将调用Apple提供的各种传感器来完成真实的交互体验。

请保持期待吧～