SwiftUI 100 天之旅：构建一个可定制的闪视卡片应用程序

探索 SwiftUI 的精彩：构建一个闪视卡片应用程序

踏上 SwiftUI 的 100 天之旅，让我们从构建一个优雅的闪视卡片应用程序开始。本应用程序将展示 SwiftUI 的核心概念，为我们深入探索其功能奠定基础。

数据模型：信息的基础

数据模型充当应用程序数据的存储库。对于我们的闪视卡片，我们将创建两个属性：prompt 存储提示信息，answer 存储答案。我们还定义了一个包含示例卡片的静态属性，以便于预览和开发。

struct Card: Identifiable {
    let id = UUID()
    let prompt: String
    let answer: String
}

let sampleCards = [
    Card(prompt: "What is the capital of Sweden?", answer: "Stockholm"),
    Card(prompt: "Who is the author of Hamlet?", answer: "William Shakespeare"),
    Card(prompt: "What is the name of the largest ocean?", answer: "Pacific Ocean")
]

视图：用户界面的画布

视图是构建应用程序用户界面的画布。对于我们的闪视卡片，我们将创建 CardView 视图来显示提示和答案。

struct CardView: View {
    @State private var isShowingAnswer = false
    
    let card: Card
    
    var body: some View {
        ZStack {
            RoundedRectangle(cornerRadius: 25)
                .fill(Color.white)
                .frame(width: 300, height: 200)
                .shadow(radius: 10)
            
            VStack {
                Text(card.prompt)
                    .font(.title)
                    .padding()
                
                Button(action: { isShowingAnswer.toggle() }) {
                    Text("Show Answer")
                        .foregroundColor(.blue)
                        .padding()
                        .background(Color.white.opacity(0.5))
                        .cornerRadius(10)
                }
                .padding()
                
                if isShowingAnswer {
                    Text(card.answer)
                        .font(.title2)
                        .padding()
                        .foregroundColor(.green)
                }
            }
        }
        .padding()
    }
}

CardView 利用 ZStack 和 VStack 来分层排列元素。用户点击按钮时，isShowingAnswer 状态变量会切换，从而显示或隐藏答案。

内容视图：应用程序的骨架

ContentView 是应用程序的主视图，协调其各个部分。它使用 NavigationView 和 List 来创建导航视图和包含所有卡片的列表。

struct ContentView: View {
    @State private var cards = sampleCards
    
    var body: some View {
        NavigationView {
            List {
                ForEach(cards) { card in
                    CardView(card: card)
                }
            }
            .navigationTitle("Flashzilla")
        }
    }
}

总结：踏上 SwiftUI 之旅

构建这个闪视卡片应用程序是我们 SwiftUI 之旅的开篇之作。我们探索了数据模型、视图和内容视图，为深入了解 SwiftUI 打下了坚实的基础。在这个 100 天的旅程中，我们将继续掌握 SwiftUI 的强大功能，创造交互式和令人惊叹的应用程序。

常见问题解答

• 什么是 SwiftUI？
  SwiftUI 是一个由 Apple 创建的声明性用户界面框架，用于构建现代化的 iOS、macOS、tvOS 和 watchOS 应用程序。

• SwiftUI 与 UIKit 有什么区别？
  UIKit 是苹果公司的低级用户界面框架，而 SwiftUI 是一个高级框架，可以更轻松、更有效地构建用户界面。

• 我需要学习 Swift 才能使用 SwiftUI 吗？
  是的，SwiftUI 是用 Swift 编写的，因此学习 Swift 是至关重要的。

• SwiftUI 是否适合初学者？
  对于有编程经验的人来说，SwiftUI 相对容易学习。但是，对于初学者来说，建议先了解 Swift 的基础知识。

• 我可以使用 SwiftUI 构建哪些类型的应用程序？
  您可以使用 SwiftUI 构建各种类型的应用程序，包括交互式游戏、多媒体播放器和社交媒体平台。