大纲 | SwiftUI 教程

发表于
本文字数： 3.5k 阅读时长 ≈ 3 分钟

欢迎关注微信公众号「Swift 花园」

源

第一章 基础

创建和绑定视图

1 创建项目和探索 Canvas

要点：

  1. 创建项目时 User Interface 选择 “SwiftUI”
  2. 基础扩展：演示 Xcode 界面布局，菜单
  3. SwiftUI 文件的两部分：描述视图内容和布局的主结构体，预览
  4. 显示隐藏 Canvas 面板快捷键
  5. 演示实时预览 （改变 body 里的代码） SwiftUI 开发体验的核心卖点之一
    进阶资源：声明式 UI 、Flutter 和 SwiftUI 的比较，拖尾闭包语法

2 自定义文本视图

要点：

  1. 演示从预览中的检视 UI 元素，顺便提一下 modifier ，演示 Font modifier
  2. 代码和视图的关系：source of truth (真理之源)
  3. 演示预览、检视器和代码的自动同步

3 通过堆叠组合视图

要点

  1. body 属性只返回一个视图
    进阶资源：关于 body 属性的文章
  2. 介绍三类 stacks ，HStack, VStack，ZStack
  3. 介绍 Xcode 的结构化编辑：嵌套、检视、提取等。通用的 ” 右键菜单 “ ，SwiftUI 专有的 Cmd + 点击
    进阶资源：Flutter
  4. 演示 embed in vstack
  5. 演示添加控件： + 按钮，快捷键
  6. 演示两层 Stack 嵌套，演示 Spacer 的使用。
    进阶资源：Spacer 的特性
  7. 演示 padding
    进阶资源：padding 的各种版本

4 创建自定义图像视图

要点

  1. 简介 image view ，常见图片相关概念：mask，边缘 (border)，投影 (drop shadow)
  2. 基础扩展： 添加资源到 asset catalog
  3. 演示创建新的 SwiftUI 文件，CircleImage
  4. 演示 Image () 构造器，演示 clipShaper modifier, Circle mask
    进阶：mask 遮蔽
  5. 演示 overlay， shadow

5 让 UIKit 和 SwiftUI 一起工作

  1. 如何在 SwiftUI 中使用 UIKit 里的视图？关键词：wrap, UIViewRepresentable 协议
    进阶资源：wrap，协议
  2. [学习曲线] 跳过，后续再来说明。
    MapKit 相关知识点

6 构成视图 (Compose Views) —— (需要练习)

要点：

  1. 选择容器 —— stacks，文字、图像、Spacer、自定义视图
  2. 调整视图 —— modifier，属性
  3. 打开源链接，演示样例 app 界面变化过程。

检查理解的测验。

构建 List 和导航

1 了解样本数据

要点：

  1. 理解 Model ，粗浅理解为数据，相对于视图
    进阶资源：MVC 设计模式，结构体和类的区别，数据格式，json
  2. 带一些新的关键字，协议
  3. 进阶扩展：为什么要用扩展 Landmark 的 image 属性
  4. json 数据格式

2 创建 “行” 视图

要点

  1. 创建新 SwiftUI 文件，起名 LandmarkRow.swift
  2. 进阶扩展：存储属性和计算属性
  3. 介绍 Image resizable modifier

3 自定义预览

要点

  1. previewLayout
    进阶资源：previewDevice

4 创建列表

要点

  1. List 的元素可以是动态的、静态的或者混合的
    进阶资源：SwiftUI 的 List
  2. 使用 List
    进阶资源：

5 创建动态列表

要点

  1. List 接收 identifiable 的数据
    进阶资源：Swift keypath 语法，SwiftUI 的 List、ForEach
    进阶资源：闭包、拖尾闭包语法
  2. Identifiable 协议：id 属性的约定

6 在 List 之间建立导航

要点

  1. NavigationView
    进阶资源：SwiftUI 给视图 “赋能” 的方式
  2. 标题、导航按钮
    进阶资源：标准化 UI
  3. NavigationLink

7 数据传递

要点

  1. 演示改动

8 生成动态预览

要点

  1. 演示实现方式
    进阶：对移动开发的意义

处理用户输入

1. 标记最爱的地标

要点

  1. 添加一个图标：系统图标、缩放、着色
    进阶：SF Symbols，着色

2 过滤列表视图

要点

  1. @State 属性

3 添加控件以触发 State

要点

  1. 绑定：$ 语法

4 用 Observable Object 存储

要点

  1. ObservableObject 协议
  2. @Published 属性

5 在视图中接收模型对象

要点：

  1. 环境变量: EnvironmentOjbect 属性声明，environmentObject 传入
  2. where 语句

6 为每个地标创建按钮

要点：演示

第二章 绘制和动画

第三章 App 设计和布局

构成复杂界面

1 Home 视图

要点

Home 界面
进阶：心智模式：干扰和专注，简单和复杂 （通知）

2 分类列表

要点

  1. 分类 => 建立层级 （“抽屉”、容器）=> 寻找
  2. 用字典将地标分组
  3. 重温 List、ForEach、keypath 的用法

3 增加地标分类的内容

要点

  1. 重温 Stack
  2. ScrollView (.horizontal), ForEach

4 构成 Home 视图

要点

  1. 改造 CategoryRow
  2. listRowInsets、EdgeInsets

5 添加导航

要点

  1. 重温 NavigationLink
  2. Image .renderingMode , Text .foregroundColor
  3. 重温 @State， 重点: sheet
    进阶：alert, 内建的环境变量 .presentationMode
  4. 导航栏按钮 navigationBarItems

和 UI 控件合作

1 显示用户资料

2 编辑模式

要点

  1. editMode
  2. 条件视图，wrappedValue

3 定义资料编辑器

要点

  1. Divider
  2. Toggle
  3. Picker
  4. DatePicker

4 延后编辑的生效

要点

  1. 编辑草稿
  2. 可取消的编辑
  3. onAppear, onDisappear

第四章 Framework 集成

与 UIKit 对接

1 创建视图来表示 UIPageViewController

要点

  1. UIViewControllerRepresentable, #makeUIViewController, #updateUIViewController
    进阶资源：回调
  2. 用 SwiftUI 的 view 来构建 UIPageViewController 中的 controller
  3. map

2 创建 ViewController 的数据源

要点

  1. 使用 Coordinator, UIPageViewControllerDataSource

3 用 SwiftUI 中的视图状态跟踪 Page

要点

  1. @State, @Binding 的传递
  2. UIPageViewControllerDelegate

4 添加一个自定义页面控制

要点

  1. UIViewRepresentable
  2. UIPageControl, UIControl
    进阶资源：“控件”
  3. target-action pattern , *delegate， #selector
  4. @objc 关键字
  5. 可选进阶：起名字，一个名字在多个层次中使用
    PageControl, UIPageControl
  6. 可选进阶：PageViewController 和 PageControl 之间如何联动

创建 watchOS App

1 添加 watchOS 目标

要点

  1. 激活 watch app 的 scheme
  2. Supports Running Without iOS App Installation
    进阶内容：watchOS 6.0, watch app 和 iOS app 的关系

2 在目标间共享文件

要点

  1. 文件 inspector, Target membership 段
  2. watchkit app 和 watchkit extension 的区别
    进阶内容：watch app 的结构

3 创建细节视图

要点

  1. 适配不同尺寸的屏幕
  2. where 语句
  3. scaleToFill, scaleToFit

4 添加 watchOS 的地图视图

要点

  1. WKInterfaceObjectRepresentable
    进阶：为什么不能像复用 CircleImage 那样直接复用 iOS 里写好的地图视图？SwiftUI 的定位（learn once, apply everywhere）
  2. 添加到 detail 界面

5 创建跨平台的列表视图

要点

  1. 泛型 ， 类型推断
  2. 对应修改 iOS scheme 的 Home 视图，LandmarkList 的初始化，重温拖尾闭包。
  3. LandmarkList 预览怎么解决？ #if, #else, #endif, typealias

6 (在 watch app 中）添加 Landmarks List

要点

  1. 切换 scheme
  2. 思考题：watch app 为什么没有 Home ?

7 创建自定义的通知接口

要点

  1. 如何正确地使用通知？
  2. 构建通知视图：swift 的 init 模式
  3. 通知控制：WKUserNotificationHostingController, #didReceive,
  4. UNNotification
  5. 通知配置：Notification Category, apns 文件模拟远程通知
  6. 切换到 Notification scheme

创建 macOS app

1 创建 macOS 目标

要点

  1. Deployment Target
    进阶资源： 软件兼容（向前兼容）， 版本号

2 共享数据和 Assets

要点

  1. Membership

3 Row 视图

4 组装视图

要点

  1. List (selection: Binding)

5 过滤器视图

要点

  1. 相同控件在不同平台上的外观
  2. preview 中样例的 .constant 用法
  3. 数组相加
  4. 通用规范：复杂条件，注意使用括号

6 组合列表和过滤器视图

7 复用 CircleImage

要点

  1. 属性默认值

8 macOS 上的地图视图

要点

  1. 善用 extension 分治代码

9 构建细节视图

10 Master Detail 视图

要点

  1. mac (iPad) 上的应用布局，NavigationView
Linkedin
Plus
Share
Class
Send
Send
Pin