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

在本章中，我们继续完成使用​​SwiftUI​​​搭建一个​​剪刀石头布App​​。

页面样式

在上一章中，我们完成了标题、规则选择、系统出牌的样式部分，我们继续完成下面的样式。

用户出牌

用户出牌有2层逻辑，一是用户可以选择出什么牌，然后是用户确定出什么牌。

对于用户可以选择出什么牌，我们可以先声明一个数组，示例：

@State var gameModels = ["rock", "paper", "scissors"]

然后用户可选牌和用户出牌，我们可以声明一个变量判断是否出牌和出了什么牌，示例：

@State var selectedImage: String = ""
@State var isSelected: Bool = false

最后构建用户可选牌的样式和用户实际出牌的样式，示例：

// 用户可选牌
func personSelected() -> some View {
    HStack {
        ForEach(gameModels.indices, id: \.self) { item in
            Image(gameModels[item])
                .resizable()
                .aspectRatio(contentMode: .fit)
                .frame(width: 80)
                .clipShape(Circle())
                .onTapGesture {
                    selectedImage = gameModels[item]
                    self.isSelected = true
                }
        }.frame(minWidth: 0, maxWidth: .infinity)
    }
}

// 用户出牌
func personPush() -> some View {
    Image(selectedImage)
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 120)
        .clipShape(Circle())
        .onTapGesture {
            self.isSelected

上述代码中，我们声明了一个可选牌的数组​​gameModels​​​，然后使用​​ForEach​​循环构建了可选牌的样式。

当我们点击可选牌的时候，我们就切换到用户出牌的视图，并且将点击的可选牌​​传递​​给用户出牌。

另一方面，用户选择后可能存在后悔行为，我们在用户出牌的视图中再点击用户出牌视图，则我们回到用户出牌的视图。

这样，我们就完成了用户选择出牌的页面样式。

立即猜拳

最后，我们来完成立即猜拳的操作，当用户选择好出拳的牌，那么需要有个操作和系统进行猜拳，示例：

// 立即猜拳
func playGame() -> some View {
    Text("立即猜拳")
        .font(.system(size: 17))
        .frame(minWidth: 0, maxWidth: .infinity, minHeight: 10, maxHeight: 32)
        .padding()
        .foregroundColor(.white)
        .background(Color(red: 51 / 255, green: 51 / 255, blue: 51 / 255))
        .cornerRadius(8)
}

整体样式布局

整体样式布局，我们在​​body​​中将已经构建好的元素排布组合，示例：

var body: some View {
    VStack(spacing: 20) {
        titleView()
        ruleView()
        computerPush()
        Spacer()
        Spacer()
        if isSelected {
            personPush()
        } else {
            personSelected()
        }
        Spacer()
        playGame()
    }.padding()
}

恭喜你，样式部分，我们就此已经完成了！

未完待续

下一章，我们将继续完成逻辑部分的内容。

快来动手试试吧。

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