携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情。
在本章中，你将学会使用SwiftUI搭建一个剪刀石头布App。
前言
为了更加熟悉和了解SwiftUI，本系列将从实战角度出发完成100个SwiftUI项目，方便大家更好地学习和掌握SwiftUI。
这同时也是对自己学习SwiftUI过程的知识整理。
如有错误，以你为准。
项目搭建
首先，创建一个新的SwiftUI项目，命名为RockPaperScissors。
逻辑分析
剪刀石头布的逻辑遵循一个循环规律：剪刀赢布、布赢石头、石头赢剪刀。
我们可以让我们与计算机作为对手，由用户设置出拳，然后和系统随机出拳，然后看看看谁赢。
PS：好无聊的游戏。
页面样式
了解完剪刀石头布的逻辑之后，我们来完成页面样式的设计。
App标题
App标题，我们使用Text文本作为标题样式，示例：
// 标题
func titleView() -> some View {
HStack {
Text("剪刀石头布")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.black)
Spacer()
}
}
标题部分就不多说了，使用Text和Spacer构建一个左上角的标题。
规则选择
剪刀石头布游戏有个很有意思的规则，是用户可以选择“玩几盘”，比如：一盘定胜负，三盘两胜，五盘三胜等。
那么我们也需要完成这个规则，首先需要游戏次数和规则名称，示例：
@State var gameTimes: Int = 1
@State var ruleName: String = "一局定胜负"
然后，供用户选择规则，我们构建这个样式，示例：
// 规则
func ruleView() -> some View {
Menu {
Button("一局定胜负") {
self.gameTimes = 1
self.ruleName = "一局定胜负"
}
Button("三局两胜") {
self.gameTimes = 3
self.ruleName = "三局两胜"
}
Button("五局三胜") {
self.gameTimes = 5
self.ruleName = "五局三胜"
}
} label: {
Label(ruleName, systemImage: "slider.horizontal.3")
.foregroundColor(.gray)
.frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 60)
.background(Color(.systemGray6))
.cornerRadius(8)
}
}
上述代码中，我们使用Menu菜单构建了一个规则选择功能，我们提供了三种规则，分别是：一局定胜负、三局两胜、五局三胜。
当我们选择不同的规则是，我们重新给游戏次数gameTimes和规则名称ruleName赋值，就完成了规则设置的样式。
系统出牌
由于App是人机对抗模式，则我们需要构建系统出牌和用户出牌，系统出牌部分，我们先声明一个变量展示默认值，示例：
@State var computerPushImage: String = "game"
然后构建系统出牌的样式，示例：
// 系统出牌
func computerPush() -> some View {
Image(computerPushImage)
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.clipShape(Circle())
}
上述代码中，我们声明了一个变量computerPushImage，存储系统出牌的规则，然后构建了系统出牌的样式。
当然系统默认出牌我们设置为一张默认的图片，后面再添加交互让它随机出牌。
未完待续
由于本章内容较多，我们将分为几章进行，下一章我们将继续完成样式部分内容。
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
