页面样式
在上一章中，我们完成了标题、规则选择、系统出牌的样式部分，我们继续完成下面的样式。
用户出牌
用户出牌有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() } 复制代码
恭喜你，样式部分，我们就此已经完成了！
未完待续
下一章，我们将继续完成逻辑部分的内容。
快来动手试试吧。
