目的

今天搭建一个数字选择游戏，根据提示选择对应数字，选择对则加分，否则减分。

开始

直接上代码，具体代码含义请看注释，这种方式应该比看文字方便快捷。

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自动显示与隐藏。