# 使用 SwiftUI 构建界面

URL: https://caijiao.org/swift/14-todo-app/02-ui
Source: docs/swift/14-todo-app/02-ui.md
Description: 本章节介绍如何使用 SwiftUI 构建待办事项 App 的用户界面，涵盖常用视图组件和布局，实现直观简洁的交互设计。

SwiftUI 提供了声明式语法，简化了界面构建过程。通过组合视图组件，可以快速搭建待办事项 App 的界面。

## 主要界面模块

- **任务列表视图**  
  使用 `List` 展示所有待办事项，支持滑动删除和点击编辑。

```swift
List(todos) { todo in
    Text(todo.title)
}
````

* **添加任务视图**
  通过 `TextField` 输入任务内容，`Button` 提交任务。

```swift
VStack {
    TextField("输入任务", text: $newTodoTitle)
        .textFieldStyle(RoundedBorderTextFieldStyle())
    Button("添加") {
        addNewTodo()
    }
}
.padding()
```

* **任务详情视图**
  显示任务详细信息和编辑功能。

## 布局与样式

* 使用 `VStack` 和 `HStack` 布局，确保界面整洁。
* 结合 `Spacer()` 实现弹性布局，适配不同屏幕尺寸。
* 通过视图修饰符设置字体、颜色和间距，提升视觉效果。

## 交互设计

* 支持任务的添加、删除和标记完成。
* 利用状态绑定实时更新界面。

## 小结

SwiftUI 使得构建动态、响应式界面变得简单，适合快速开发待办事项类应用。