译自 www.hackingwithswift.com/books/ios-s…

更多内容，欢迎关注公众号 「Swift花园」

喜欢文章？不如来个 🔺💛➕三连？关注专栏，关注我 🚀🚀🚀

设计卡片视图

在这个项目中，我们希望给用户呈现包含提示信息的闪视卡片，比如 “瑞典的首都是什么城市？”。当用户点击卡片时，揭示答案， 显示 “斯德哥尔摩”。

对多数项目来说，我们会先从数据模型开始。简单起见，我们只提供提示字符串和答案字符串，并且创建示例卡片的静态属性，以方便预览和开发原型。

创建一个 Card.swift，代码如下：

struct Card {
    let prompt: String
    let answer: String

    static var example: Card {
        Card(prompt: "Who played the 13th Doctor in Doctor Who?", answer: "Jodie Whittaker")
    }
}
复制代码

至于 SwiftUI 视图，这里我们会用到一种稍微复杂一点的方式：我们要把两个文本标签放在一个白色卡片背景上，并且确保标签和边缘有留白。对于标签，需要用到一个 VStack，然后放进一个带有白色 RoundedRectangle 的 ZStack。

不知道你是否接触过闪视卡，通常来说典型的形状是一个矮胖的矩形：因为一般我们会写两行以上的文本。

大多数应用需要考虑设备方向，不过我们可以让这个应用只在水平模式下工作，这个方向可以让我们有更多空间绘制卡片，同时也更适合稍后会引入的手势操作。

创建一个新的 SwiftUI 视图，取名 “CardView”，代码如下：

struct CardView: View {
    let card: Card

    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 25, style: .continuous)
                .fill(Color.white)

            VStack {
                Text(card.prompt)
                    .font(.largeTitle)
                    .foregroundColor(.black)

                Text(card.answer)
                    .font(.title)
                    .foregroundColor(.gray)
            }
            .padding(20)
            .multilineTextAlignment(.center)
        }
        .frame(width: 450, height: 250)
    }
}
复制代码

提示： 450 的宽度设置并非偶然：因为最小的 iPhone 设备在水平模式下有 480 个点，所以这样设值能确保卡片在所有设备上完整可见。

与此同时，修正 CardView_Previews 的编译错误：

struct CardView_Previews: PreviewProvider {
    static var previews: some View {
        CardView(card: Card.example)
    }
}
复制代码

查看预览，你不会看出这是一张卡片 —— 它有白色的背景，但相对于视图的默认背景并不突出。当我们需要堆叠多张卡片的时候，这会是一个问题，因为白色的背景会混在一起。

简单的解决方案是，给 RoundedRectangle 添加阴影，以获得轻微的深度效果。这样一来卡片就能从白色背景中脱颖而出。随着堆叠卡片的数量增加，阴影的效果会更加明显。

在 fill(Color.white) 之后添加 modifier：

.shadow(radius: 10)
复制代码

现在，提示和答案是同时展示的，这显然不能帮助用户进行学习。所以，默认情况下需要隐藏答案，但卡片被点击时才显示。

给 CardView 添加一个新的 @State 属性：

@State private var isShowingAnswer = false
复制代码

然后用它控制答案的展示：

if isShowingAnswer {
    Text(card.answer)
        .font(.title)
        .foregroundColor(.gray)
}
复制代码

最后一步是添加 onTapGesture() modifier 到 ZStack：

.onTapGesture {
    self.isShowingAnswer.toggle()
}
复制代码

卡片视图的代码到此就完成了，现在回到 ContentView.swift，替换 body 属性：

var body: some View {
    CardView(card: Card.example)
}
复制代码

运行代码，查看效果。

我的公众号 这里有Swift及计算机编程的相关文章，以及优秀国外文章翻译，欢迎关注～