终极 SwiftUI 学习指南：从 0 到 1 掌握 iOS UI 开发的完整 Demo 集合 🚀

SwiftUIDemo 是一个基于 Swift 3、Xcode 8 和 iOS 10 的 UI 示例项目集合，专为 iOS 开发者打造。它包含 37 个独立 Demo，覆盖从基础控件（如 UILabel、UIButton）到高级组件（如 UITableView、UICollectionView）的全部核心 UI 元素，每个示例都配有完整源代码和效果截图，是学习 iOS 界面开发的最佳实践资源。

📋 为什么选择 SwiftUIDemo？3 大核心优势

✅ 覆盖 37+ 常用 UI 组件，一次学习全掌握

从简单的按钮文本到复杂的表格视图，项目系统化整理了 iOS 开发必备的 UI 元素：

• 基础控件：UILabel、UIButton、UITextField、UISlider 等
• 布局组件：UIStackView（水平/垂直）、UIScrollView、UICollectionView
• 交互控件：UISwitch、UIStepper、UIDatePicker、UIPickerView
• 手势处理：点击、捏合、旋转、滑动等 8 种手势识别器
• 导航组件：UINavigationBar、UITabBar、UIAlertController

每个组件都配有独立 Demo 工程，如 Demo2-UIButton/ 展示按钮的 5 种状态样式，Demo22-UITableView/ 演示列表数据绑定与点击交互。

✅ 100% 可运行代码，边学边练效率翻倍

所有示例基于 Xcode 8 和 iOS 10 开发，完整兼容最新 Swift 语法：

• 每个 Demo 包含 ViewController.swift 核心逻辑和 Info.plist 配置
• 可视化界面与代码分离，如 Demo17-UIVisualEffectView/ 演示毛玻璃效果的 3 种实现方式
• 配套 Assets.xcassets 资源文件，直接查看图片、颜色等资源引用方式

✅ 实战导向设计，解决 90% 开发痛点

示例场景高度贴合实际开发需求：

• UITextField 实现键盘收起与焦点切换（Demo4-UITextField/）
• UISearchBar 实时搜索并过滤表格数据（Demo25-UISearchBar/）
• UIPageControl 结合手势实现轮播图（Demo35-UIPageControl/）
• 分组索引表格（Demo36-IndexedTableView/）与通讯录效果一致

🚀 快速上手：3 步启动 Demo 项目

1️⃣ 克隆仓库到本地

git clone https://gitcode.com/gh_mirrors/sw/SwiftUIDemo

2️⃣ 选择目标 Demo 工程

项目采用模块化结构，每个 UI 组件对应独立 Xcode 工程：

SwiftUIDemo/
├── Demo1-UILabel/           # 标签控件示例
├── Demo2-UIButton/          # 按钮控件示例
├── ...                      # 其他 Demo 目录
└── Screenshots/             # 效果截图目录

双击任意 .xcodeproj 文件（如 Demo2-UIButton.xcodeproj）即可打开项目。

3️⃣ 运行查看效果

• 选择模拟器（推荐 iPhone 8 或 iPad Pro）
• 点击 Xcode 运行按钮（▶️），30 秒内即可看到交互效果

UIButton Demo 展示普通/高亮/禁用状态的样式变化（SwiftUIDemo 项目截图）

📱 精选 5 个高频使用 Demo 详解

🔥 UIButton：打造交互友好的按钮控件

Demo2-UIButton/ 演示按钮的完整实现，包含：

• 设置标题、背景图和圆角样式
• 绑定点击事件（addTarget 方法）
• 状态切换动画（普通/选中/禁用）

核心代码位于 ViewController.swift：

@IBAction func buttonTapped(_ sender: UIButton) {
    sender.isSelected = !sender.isSelected
    label.text = sender.isSelected ? "按钮已选中" : "按钮未选中"
}

🔄 UITableView：实现动态列表展示

Demo22-UITableView/ 展示表格的基础用法：

• 多分区数据展示
• 单元格复用机制
• 点击跳转详情页（DetailsViewController.swift）

分组表格展示商品列表，支持点击查看详情（SwiftUIDemo 项目截图）

📊 UICollectionView：网格布局的艺术

Demo23-UICollectionView/ 演示瀑布流布局：

• 自定义单元格（PhotoCollectionViewCell.swift）
• 动态调整item大小
• 图片圆角与阴影效果

🎯 UIGestureRecognizer：8 种手势全解析

项目提供完整手势学习路径：

• 点击手势（Demo28-UITapGesture/）：实现屏幕点击计数
• 捏合手势（Demo29-UIPinchGesture/）：缩放图片大小
• 滑动手势（Demo31-UISwipeGesture/）：实现页面切换

通过捏合手势缩放图片，实时反馈缩放比例（SwiftUIDemo 项目截图）

🧭 UINavigationBar + UITabBar：构建应用架构

Demo20-UINavigationBar/ 和 Demo21-UITabBar/ 展示应用框架搭建：

• 导航栏标题设置与返回按钮
• 标签栏图标与页面切换
• 多控制器间数据传递（prepareForSegue 方法）

📚 系统学习路径：从新手到高手

入门阶段：掌握基础控件（1-10 Demo）

1. UILabel：文本样式与排版（Demo1-UILabel/）
2. UIButton：交互按钮设计（Demo2-UIButton/）
3. UITextField：用户输入处理（Demo4-UITextField/）
4. UISwitch & UISlider：开关与滑块控件（Demo6-UISlider/、Demo7-UISwitch/）

进阶阶段：布局与列表（11-25 Demo）

1. UIStackView：自动布局神器（Demo26-UIStackViewHorizontal/、Demo27-UIStackViewVertical/）
2. UITableView：数据列表展示（Demo22-UITableView/）
3. UICollectionView：网格布局实现（Demo23-UICollectionView/）
4. UISearchBar：搜索功能集成（Demo25-UISearchBar/）

高级阶段：交互与架构（26-37 Demo）

1. 手势识别：8 种手势综合应用（Demo28-34）
2. 导航架构：标签栏与导航栏组合（Demo20-UINavigationBar/、Demo21-UITabBar/）
3. 高级表格：索引与分组表格（Demo36-IndexedTableView/、Demo37-GroupedTableView/）

💡 开发者必备：3 个实用技巧

1. 快速定位 Demo 工程

通过文件夹名称直接筛选目标组件，如查找表格相关功能：

Demo22-UITableView/      # 基础表格
Demo36-IndexedTableView/ # 索引表格
Demo37-GroupedTableView/ # 分组表格

2. 对比学习不同实现方式

以列表为例，对比三种实现的核心差异：

• UITableView：线性数据展示，适合文本为主的列表
• UICollectionView：灵活网格布局，适合图片墙等场景
• UIStackView：简单线性排列，适合少量元素的局部布局

3. 如何贡献新 Demo？

项目遵循 MIT 开源协议（LICENSE），欢迎提交 PR：

1. 新增 Demo 目录（如 Demo38-UIMenu/）
2. 实现核心功能并添加截图到 Screenshots/
3. 更新 README.md 索引和说明

📝 总结：iOS UI 开发的最佳实践资源

SwiftUIDemo 以 "学习-实践-掌握" 为核心，通过 37 个精选 Demo 覆盖 iOS 开发 90% 的 UI 场景。无论你是刚入门的新手，还是需要查阅参考的资深开发者，这个项目都能帮你快速解决实际开发问题。立即克隆项目，跟随示例代码动手实践，3 周内即可熟练掌握 iOS UI 开发技能！

所有示例代码和截图均来自 SwiftUIDemo 项目，基于 MIT 协议开源，可免费用于个人和商业项目。更多详情参见项目 LICENSE 文件。