实战编程·刻在男人DNA里的浪漫，空气投篮（二）（2）

游戏回合视图

接下来，当用户点击游戏列表的游戏项时，需要进入到游戏详情页。

而对于“投篮项目”来说，一般有3～5个回合，在正式游戏开始之前，会展示一个类似“Round1，Ready Go”的游戏回合页面，然后才是正式游戏详情页。

为此，我们需要创建一个新的SwiftUI页面来承载它，在Xcode左侧视图工具栏中新建一个SwiftUI文件，命名为GameDetailView，如下图所示：

在“游戏回合”视图中，我们可以看到几个页面元素：游戏回合数（Round1）、游戏规则（5米）、游戏规则说明（距离篮筐）、游戏结果（投中：0）。

由于上述的参数会随着游戏更新内容，因此需要声明其变量进行存储，如下代码所示：

@State var roundNum:Int = 1
@State var distanceNum:Int = 5
@State var gameGoal:Int = 0

上述代码中，我们声明了3个变量：roundNum游戏回合数、distanceNum篮筐距离、gameGoal单回合游戏得分。这里由于在后续要使用到数值计算，因此声明的变量都是Int类型。

紧接着，我们来分析构建页面，如下代码所示：

// 游戏回合
func preStartView() -> some View {
  VStack {
      Spacer()
      VStack(alignment: .center, spacing: 40) {
        Text("Round" + String(roundNum))
        .font(.system(size: 48, design: .rounded))
        .bold()
        .foregroundColor(.white)
        VStack(alignment: .center, spacing: 20) {
          Text(String(distanceNum) + "米")
          .font(.system(size: 24))
          .foregroundColor(.white)
          .bold()
          Text("距离篮筐")
          .font(.system(size: 17))
          .foregroundColor(.white)
        }
      }
      Spacer()
      Spacer()
      Text("投中:  " + String(gameGoal))
      .font(.system(size: 17))
      .foregroundColor(.white)
    }
}

上述代码中，我们创建了一个新的视图preStartView。

分析下页面元素，Text回合数文字为主要文字，使用48号圆形字体样式，并设置bold加粗，foregroundColor文字填充颜色为白色，其余文字基本修饰符类型。

这里科普一个知识点。

由于声明的变量是Int类型，而Text文字需要键入String类型的文本，因此需要将Int类型转换为String类型。SwiftUI对于类型转换可以直接使用类型包裹进行转换，示例：String(roundNum)，如此便可以直接将roundNum游戏回合数转换为String类型的参数。

另外，我们可以使用“+”对字符串进行拼接，组成一个新的字符串，示例：

"I"+"Love"+"You" 结果为 "ILoveYou"

回归正题，文字部分也是使用VStack垂直布局视图进行包裹元素，这里的编程思想是“由中间向两边散开”，即相距离较近的元素可以先组合成一个容器，再和外边的容器进行组合，便于设置视图元素之间的间距。

完成好单个preStartView视图后，我们在Body中展示它，如下代码所示：

ZStack {
  Color(.black).edgesIgnoringSafeArea(.all)
  preStartView()
}