字
字节笔记本
2026年2月23日
SwiftUIViews：SwiftUI 完整视图用例学习指南
本文介绍 SwiftUIViews，一个专为 SwiftUI 学习者打造的开源项目，提供了所有 SwiftUI 基本视图的完整用例和中文解释，帮助开发者快速掌握 SwiftUI 开发。
项目简介
SwiftUIViews 是由 swiftui-from-zero 组织维护的开源学习项目，旨在解决 SwiftUI 学习者在阅读英文文档时遇到的困难。该项目基于 SwiftUI 官方文档实例，对所有 SwiftUI 控件视图的用例进行了系统总结，并配有详细的中文注释。
截至目前，该项目在 GitHub 上已获得 306 stars，拥有 51 forks，主要使用 Swift 语言编写。
核心特性
- 25 个控件组件：涵盖 Button、Text、TextField、List、NavigationView 等所有常用控件
- 10 个布局视图：包括 HStack、VStack、ZStack、Grid 等布局系统
- 3 个颜色视图：提供颜色、渐变、形状等视觉效果组件
- 中文注释：所有代码都配有详细的中文注释，降低学习门槛
- 实时预览：配合 SwiftUI 预览功能，可边写代码边查看效果
- 即用即查：每个控件都有独立的示例文件，方便快速查阅
项目结构
text
SwiftUIViews/
├── Controls/ # 控件视图（25个）
│ ├── Button.swift
│ ├── Text.swift
│ ├── TextField.swift
│ ├── List.swift
│ ├── NavigationView.swift
│ └── ...
├── Layout/ # 布局视图（10个）
├── Paints/ # 颜色视图（3个）
├── Other/ # 其他视图
└── img/ # 示例 GIF 动图使用示例
Button 按钮
swift
import SwiftUI
struct BasicButton: View {
var body: some View {
VStack {
// Button 需要一个 action 和一个 label
// action 的类型是 () -> Void，即点击回调函数
// label 是表示 Button 样式的视图
Button(action: signIn) {
Text("登录")
}
// 对于视图仅为文字的情况，可简化写法
Button("登录", action: signIn)
}
}
func signIn() {
print("已登录")
}
}List 列表与按钮组合
swift
struct ListButton: View {
@State var items: [Item] = [
Item(title: "A"),
Item(title: "B")
]
var body: some View {
List {
ForEach(items) { item in
Text(item.title)
}
// 容器中的按钮样式会随容器样式变化
// 放在 List 中的按钮会呈现为列表单元样式
Button("添加", action: addItem)
}
}
struct Item: Identifiable {
let id = UUID()
let title: String
}
func addItem() {
items.append(Item(title: "C"))
}
}上下文菜单按钮
swift
struct ContextMenuButton: View {
@State var username: String = ""
@State var tmp: String = ""
var body: some View {
Form {
TextField("用户名", text: $username)
}
.contextMenu {
// 长按输入框会弹出剪切、复制、粘贴选项
Button("剪切", action: cut)
Button("复制", action: copy)
Button("粘贴", action: paste)
}
}
func cut() { tmp = username; username = "" }
func copy() { tmp = username }
func paste() { username += tmp }
}快速开始
环境要求
- macOS 11.0+ / iOS 14.0+
- Xcode 12.0+
- Swift 5.3+
使用方法
- 克隆仓库
bash
git clone https://github.com/swiftui-from-zero/SwiftUIViews.git- 打开项目
bash
cd SwiftUIViews
open SwiftUIViews.xcodeproj- 运行示例
在 Xcode 中选择目标设备或模拟器，点击运行按钮即可查看所有控件的实时预览效果。
学习建议
- 按类别学习：建议先掌握 Controls 中的基础控件，再学习 Layout 布局系统
- 结合预览：利用 SwiftUI 的实时预览功能，修改代码后立即查看效果
- 查阅源码：每个控件都有独立的 Swift 文件，方便快速定位和学习
- 动手实践：在理解示例代码的基础上，尝试修改和扩展功能
适用人群
- SwiftUI 初学者：通过中文注释快速理解控件用法
- iOS 开发者：作为开发过程中的速查手册
- 从 UIKit 迁移的开发者：了解 SwiftUI 与 UIKit 的对应关系
项目链接
- GitHub 仓库：https://github.com/swiftui-from-zero/SwiftUIViews
- 掘金博文：https://juejin.cn/post/6926711998461935623
总结
SwiftUIViews 是一个优秀的 SwiftUI 学习资源，通过完整的中文示例和实时预览功能，大大降低了 SwiftUI 的学习门槛。无论你是刚开始学习 SwiftUI，还是需要在开发中快速查阅控件用法，这个项目都能为你提供很大帮助。
分享: