携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第3天，点击查看活动详情。
在本章中，我们继续完成使用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 = false
}
}
上述代码中，我们声明了一个可选牌的数组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()
}
恭喜你，样式部分，我们就此已经完成了！
未完待续
下一章，我们将继续完成逻辑部分的内容。
快来动手试试吧。
如果本专栏对你有帮助，不妨点赞、评论、关注～
