SwiftUI100天：使用SwiftUI搭建一个剪刀石头布App（上）

在本章中，你将学会使用​​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​​，存储系统出牌的规则，然后构建了系统出牌的样式。

当然系统默认出牌我们设置为一张默认的图片，后面再添加交互让它随机出牌。

未完待续

由于本章内容较多，我们将分为几章进行，下一章我们将继续完成样式部分内容。

快来动手试试吧。

如果本专栏对你有帮助，不妨点赞、评论、关注～