SwiftUI教程二:搭建一个数字选择游戏
2020-07-09 本文已影响0人
狂奔的胖蜗牛
目的
今天搭建一个数字选择游戏,根据提示选择对应数字,选择对则加分,否则减分。
开始
直接上代码,具体代码含义请看注释,这种方式应该比看文字方便快捷。
1.搭建出数字选择内容
/// 使用导航栏
NavigationView {
/// 使用垂直堆叠视图
VStack {
/// 遍历0-2,识别id为自身
ForEach(0...2, id: \.self) {
/// 往VStack上面添加图片
Image(systemName: self.numbers[$0])
/// 设置图片可变化尺寸
.resizable()
/// 设置图片大小
.frame(width: 100, height: 100)
/// 设置图片边框及其颜色
.border(Color.black, width: 1)
}
}
}
效果:
image.png
2.添加导航栏标题,内容为需要点击的数字
struct ContentView: View {
...
/// 设置需要点击的图片序号
var selecte = Int.random(in: 0...2)
var body: some View {
/// 使用导航栏
NavigationView {
/// 使用垂直堆叠视图
VStack {
...
}
/// 设置标题
.navigationBarTitle(Text("请点击:" + numbers[selecte].prefix(1)))
}
}
}
效果:
image.png
3.添加图片点击事件
struct ContentView: View {
...
var body: some View {
...
/// 往VStack上面添加图片
Image(systemName: self.numbers[num])
...
/// 添加点击事件处理
.onTapGesture {
self.imageTap(tag: num)
}
...
}
}
/// 点击了会调用该方法
func imageTap(tag: Int) {
print("点击了\(tag)")
}
}
4.添加得分
struct ContentView: View {
...
/// 设置得分
@State var score = 0
...
/// 点击了会调用该方法
func imageTap(tag: Int) {
print("点击了\(tag)")
if tag == selecte {
score += 1
} else {
score -= 1
}
print("得分\(score)")
}
}
5.弹出和隐藏Alert
struct ContentView: View {
...
/// Alert的显示与隐藏
@State var isAlertShow = false
/// Alert显示的内容
@State var alertTitle = ""
var body: some View {
...
/// 设置标题
.navigationBarTitle(Text("请点击:" + numbers[selecte].prefix(1)))
/// 设置alert
.alert(isPresented: $isAlertShow) { () -> Alert in
Alert(title: Text(alertTitle), message: Text("总分:\(score)"), dismissButton: .default(Text("继续"), action: {
}))
}
}
}
/// 点击了会调用该方法
func imageTap(tag: Int) {
print("点击了\(tag)")
if tag == selecte {
score += 1
alertTitle = "点对了"
} else {
score -= 1
alertTitle = "点错了"
}
isAlertShow = true
print("得分\(score)")
}
}
运行:
image.png
6.刷新问题
给numbers和selecte增加state属性装饰器
struct ContentView: View {
/// 设置0-8图片数组,打乱顺序
@State var numbers = ["0.circle", "1.circle", "2.circle", "3.circle", "4.circle", "5.circle", "6.circle", "7.circle", "8.circle"].shuffled()
/// 设置需要点击的图片序号
@State var selecte = Int.random(in: 0...2)
...
Alert(title: Text(alertTitle), message: Text("总分:\(score)"), dismissButton: .default(Text("继续"), action: {
self.newQuestion()
}))
}
}
}
...
/// 刷新选项
func newQuestion() {
numbers.shuffle()
selecte = Int.random(in: 0...2)
}
}
现在点击继续,即可刷新下一个选项。
完整代码
import SwiftUI
struct ContentView: View {
/// 设置0-8图片数组,打乱顺序
@State var numbers = ["0.circle", "1.circle", "2.circle", "3.circle", "4.circle", "5.circle", "6.circle", "7.circle", "8.circle"].shuffled()
/// 设置需要点击的图片序号
@State var selecte = Int.random(in: 0...2)
/// 设置得分
@State var score = 0
/// Alert的显示与隐藏
@State var isAlertShow = false
/// Alert显示的内容
@State var alertTitle = ""
var body: some View {
/// 使用导航栏
NavigationView {
/// 使用垂直堆叠视图
VStack {
/// 遍历0-2,识别id为自身
ForEach(0...2, id: \.self) { num in
/// 往VStack上面添加图片
Image(systemName: self.numbers[num])
/// 设置图片可变化尺寸
.resizable()
/// 设置图片大小
.frame(width: 100, height: 100)
/// 设置图片边框及其颜色
.border(Color.black, width: 1)
/// 添加点击事件处理
.onTapGesture {
self.imageTap(tag: num)
}
}
}
/// 设置标题
.navigationBarTitle(Text("请点击:" + numbers[selecte].prefix(1)))
/// 设置alert
.alert(isPresented: $isAlertShow) { () -> Alert in
Alert(title: Text(alertTitle), message: Text("总分:\(score)"), dismissButton: .default(Text("继续"), action: {
self.newQuestion()
}))
}
}
}
/// 点击了会调用该方法
func imageTap(tag: Int) {
print("点击了\(tag)")
if tag == selecte {
score += 1
alertTitle = "点对了"
} else {
score -= 1
alertTitle = "点错了"
}
isAlertShow = true
print("得分\(score)")
}
/// 刷新选项
func newQuestion() {
numbers.shuffle()
selecte = Int.random(in: 0...2)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
总结
使用SwiftUI,我们需要抛弃掉以前使用UIKit时候的很多思维,比如UIKite里面要弹出Alert,我们需要手动present,但是在SwiftUI,由于是MVVM架构,界面都应该由数据来控制,所以Alert的显示与隐藏绑定到一个属性,当属性值发生改变,则Alert自动显示与隐藏。