Tailwind CSSTailwind CSS
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
Home
  • Tailwind CSS 书籍目录
  • Vue 3 开发实战指南
  • React 和 Next.js 学习
  • TypeScript
  • React开发框架书籍大纲
  • Shadcn学习大纲
  • Swift 编程语言:从入门到进阶
  • SwiftUI 学习指南
  • 函数式编程大纲
  • Swift 异步编程语言
  • Swift 协议化编程
  • SwiftUI MVVM 开发模式
  • SwiftUI 图表开发书籍
  • SwiftData
  • ArkTS编程语言:从入门到精通
  • 仓颉编程语言:从入门到精通
  • 鸿蒙手机客户端开发实战
  • WPF书籍
  • C#开发书籍
learn
  • Java编程语言
  • Kotlin 编程入门与实战
  • /python/outline.html
  • AI Agent
  • MCP (Model Context Protocol) 应用指南
  • 深度学习
  • 深度学习
  • 强化学习: 理论与实践
  • 扩散模型书籍
  • Agentic AI for Everyone
langchain
  • 小型应用开发实例

小型应用开发实例

在学习和实践 Swift 编程时,开发小型应用是一个非常好的入门方式。通过实际的项目经验,不仅能加深对 Swift 语言特性的理解,还能帮助你掌握 iOS 开发的基本流程和工具。在本章中,我们将通过开发一个简单的 待办事项(To-Do List)应用,展示 Swift 编程的一些基本概念和常用开发技巧。

项目概述

待办事项应用是一个简单的列表应用,用户可以添加、删除和标记完成任务。该应用将包含以下功能:

  • 添加新任务。
  • 删除已完成的任务。
  • 标记任务为完成状态。
  • 使用表格视图显示任务列表。

1. 创建新项目

  1. 打开 Xcode,点击 File > New > Project 创建一个新的项目。
  2. 选择 iOS 平台下的 App 模板,并点击 Next。
  3. 为项目命名为 TodoApp,选择 Swift 作为编程语言,并确保选择 Storyboard 作为用户界面。
  4. 完成设置后,点击 Next,选择一个保存路径,并点击 Create。

2. 设计界面

2.1 主界面

我们使用 UITableView 来显示待办事项列表。通过使用 Storyboard 来构建界面,首先拖拽一个 UITableView 到主视图控制器中。

  1. 打开 Main.storyboard,拖动一个 UITableView 控件到视图控制器上,并设置其约束,使其充满整个屏幕。
  2. 添加一个 UIButton 控件,放置在视图的顶部或底部,用于添加新任务。
  3. 创建一个 UITableViewCell,为任务项设计界面,可以添加一个 UILabel 来显示任务名称,使用 UIButton 来标记任务完成。

2.2 设置 Table View Cell

  1. 选择 UITableViewCell,在属性面板中设置其 Identifier 为 todoCell。
  2. 将 UITableViewCell 中的 UILabel 和 UIButton 分别命名为 taskLabel 和 completeButton。

2.3 连接 IBOutlet 和 IBAction

  1. 打开 ViewController.swift 文件,并使用 Control + drag 的方式将界面元素(如 UITableView 和 UIButton)连接到代码中。

  2. 创建适当的 IBOutlet 和 IBAction,例如:

    @IBOutlet weak var tableView: UITableView!
    @IBOutlet weak var addButton: UIButton!
    
    @IBAction func addTask(_ sender: UIButton) {
        // 添加任务
    }
    
  3. 编写代码逻辑 3.1 数据模型 我们需要一个简单的数据模型来表示任务。创建一个 Task 结构体,包含任务的名称和完成状态:

struct Task {
    var name: String
    var isCompleted: Bool
}

3.2 创建任务列表 在 ViewController 类中,我们创建一个任务数组来存储任务项:

var tasks: [Task] = []

3.3 实现添加任务功能 在 addTask 方法中,我们创建一个新的任务,并将其添加到任务列表中,然后更新 UITableView:

@IBAction func addTask(_ sender: UIButton) {
    let newTask = Task(name: "New Task", isCompleted: false)
    tasks.append(newTask)
    tableView.reloadData()
}

3.4 实现表格视图数据源方法 在 ViewController.swift 中,遵循 UITableViewDataSource 协议,实现数据源方法,填充表格视图:

extension ViewController: UITableViewDataSource {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return tasks.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "todoCell", for: indexPath)
        let task = tasks[indexPath.row]
        cell.textLabel?.text = task.name
        cell.accessoryType = task.isCompleted ? .checkmark : .none
        return cell
    }
}

3.5 实现标记任务完成 通过 UITableViewDelegate 协议的 didSelectRowAt 方法,当用户点击某个任务时,切换该任务的完成状态并更新 UI:

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        var task = tasks[indexPath.row]
        task.isCompleted.toggle()
        tasks[indexPath.row] = task
        tableView.reloadRows(at: [indexPath], with: .automatic)
    }
}

3.6 删除任务功能 在任务完成后,可以通过滑动删除任务。实现 UITableViewDelegate 协议的 commitEditingStyle 方法,允许删除任务:

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            tasks.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .automatic)
        }
    }
}

3.7 显示任务列表 在 viewDidLoad 中,确保任务数据源已初始化并刷新表格视图:

override func viewDidLoad() {
    super.viewDidLoad()
    tableView.delegate = self
    tableView.dataSource = self
    tasks = [
        Task(name: "Buy Groceries", isCompleted: false),
        Task(name: "Walk the Dog", isCompleted: false)
    ]
    tableView.reloadData()
}
  1. 完善应用功能 4.1 任务持久化 为了让任务数据在应用重新启动后仍然保持,可以使用 UserDefaults 或 CoreData 来持久化任务数据。这里我们用 UserDefaults 简单实现任务存储:
func saveTasks() {
    let taskNames = tasks.map { $0.name }
    UserDefaults.standard.set(taskNames, forKey: "tasks")
}

func loadTasks() {
    if let savedTasks = UserDefaults.standard.array(forKey: "tasks") as? [String] {
        tasks = savedTasks.map { Task(name: $0, isCompleted: false) }
    }
}

在合适的地方调用 saveTasks() 和 loadTasks() 方法来保存和加载任务数据。

  1. 运行应用 完成以上步骤后,运行应用程序,查看任务列表是否能够正常显示、添加、标记完成和删除。确保所有功能都能顺利工作。

6. 总结

通过开发这个简单的待办事项应用,你已经掌握了如何使用 Swift 创建 iOS 应用、使用 UITableView 显示列表、处理用户交互、更新数据、实现基本的持久化等技巧。在这个过程中,你不仅学习了 Swift 语法,还深入了解了 iOS 开发中常用的 UI 控件和技术。通过实践,你将能够快速掌握 iOS 开发的基本概念,并为更复杂的项目打下基础。

Last Updated:: 12/2/24, 1:06 PM