前言
为了更加熟悉和了解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，存储系统出牌的规则，然后构建了系统出牌的样式。
当然系统默认出牌我们设置为一张默认的图片，后面再添加交互让它随机出牌。
未完待续
由于本章内容较多，我们将分为几章进行，下一章我们将继续完成样式部分内容。
