携手创造，一起生长！这是我参加「日新方案 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，存储系统出牌的规则，然后构建了系统出牌的样式。
当然系统默认出牌我们设置为一张默认的图片，后边再增加交互让它随机出牌。
未完待续
由于本章内容较多，我们将分为几章进行，下一章我们将继续结束样式部分内容。
快来着手试试吧。
如果本专栏对你有协助，无妨点赞、谈论、注重～
