实战编程·刻在男人DNA里的浪漫,空气投篮(二)(4)

简介: 实战编程·刻在男人DNA里的浪漫,空气投篮(二)

如此,当我们点击“投篮”的游戏项时,就会跳转到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())

image.png

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

@Environment(.presentationMode) var mode

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

self.mode.wrappedValue.dismiss()

image.png

本章预览

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

本章小结

恭喜你,完成了本章的所有内容!

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

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

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

请保持期待吧~

相关文章
|
存储
实战编程·刻在男人DNA里的浪漫,空气投篮(二)(1)
实战编程·刻在男人DNA里的浪漫,空气投篮(二)
65 1
|
存储 Go iOS开发
实战编程·刻在男人DNA里的浪漫,空气投篮(二)(2)
实战编程·刻在男人DNA里的浪漫,空气投篮(二)
72 1
|
8月前
|
机器人
【每日一题Day343】LC2731移动机器人 | 脑筋急转弯+数学
【每日一题Day343】LC2731移动机器人 | 脑筋急转弯+数学
64 0
|
容器
实战编程·刻在男人DNA里的浪漫,空气投篮(二)(3)
实战编程·刻在男人DNA里的浪漫,空气投篮(二)
69 0
|
安全 iOS开发 UED
实战编程·刻在男人DNA里的浪漫,空气投篮(一)
实战编程·刻在男人DNA里的浪漫,空气投篮(一)
106 0
|
程序员 编译器 Python
《C游记》 第叁章 - 一朝函数思习得 模块思维世间生(贰)
《C游记》 第叁章 - 一朝函数思习得 模块思维世间生(贰)
127 0
【授之于鱼不如授之于渔】高三女孩被哈佛录取:只要一想到能编程,我就会不由自主地笑出来
原文地址:http://news.cnblogs.com/n/534797/     “老师,我是文景,刚收到通知,我被哈佛录取了,感谢您一直以来的支持和鼓励。”发这条信息的女孩叫郭文景,昨天还在美国的她,拿到哈佛通知书后,第一时间向班主任汇报。
1045 0
|
存储 算法 C语言
【算法编程】小学数学题难倒博士
昨天在科学网上得知这样一个新闻《越南小学数学题难倒博士》,据悉题目来自越南保禄小学三年班,不过报道称该题难倒了上至博士下至家长,未免也太言过其实了。
1281 0