SwiftUI API 的设计：渐进式呈现

探索渐进式呈现 (SwiftUI 的核心原则之一)，并了解它会如何影响我们的 API 设计。我们将介绍如何使用渐进式呈现，讨论它对于快速迭代和探索的支持，并帮助您在代码中充分利用它的优势。

资源

- 高清视频
- 标清视频

下载

Sam Lazarus: 大家好我叫 Sam 是 SwiftUI 团队的一名工程师在设计 SwiftUI 时我们一直致力于依照明确定义的原则和渐进式呈现做决策今天我们将着重强调其中一点渐进式呈现在 SwiftUI 团队中我们花了很多时间思考并构建新的 API 但你可能没有意识到当你在构建一个可复用构件或抽象时你也是一名 API 设计师在这次谈话中我们想揭开我们设计过程的帷幔分享我们对渐进式呈现的了解这样下一次你在构建可复用构件或抽象时就可以使用一样新的工具

让我们先来聊一聊渐进式呈现到底是什么吧其实这并不是 API 设计所独有的事实上你可以在最常见的 macOS UI 保存对话框中看到它的使用当你第一次看见保存对话框时它已经为你增添了一个默认位置此外对话框里还有一个下拉列表其中包含一些常见的位置以便选择最后如果你需要浏览文件系统以找到正确的路径可以展开对话框以显示更复杂但功能更强大的 UI 这包含了不同层次的复杂性可以在需要时显示这与我们希望通过 API 提供的体验是相同的这些代码相当于提供了良好的UI体验使你的 API 使用感变好

作为开发者我们习惯于从编写代码的角度来查看代码：也就是代码声明的位置但为了让代码更好使用我们必须从一个不同的角度来看也就是代码实际使用的地方我们称其为调用端

而渐进式呈现就是通过 API 的设计使调用端的复杂性随着用例的复杂性而增长

一个理想的 API 应当既简洁易操作又足够适应强大的用例

这对开发者很有利首先这最大程度上缩减了首次构建和运行所需的时间使你能够更快使用 API 这也降低了代码的学习曲线防止 API 因与所有用例无关的概念陷入停滞

最后它创造了一个紧密的反馈循环通过渐进式呈现的 API 你可以一点一点地添加内容查看每一步创建的东西

所有这些因素使 App 开发成为了一个快速优化循环而不是单一的大规模前期投入

因此渐进式呈现是一盏有用的指路明灯但我们该如何设计特定的 API 使它们采用这一原则呢在 SwiftUI 团队我们首先考虑了常见用例为了逐步展开功能我们需要确定什么是简单用例

我们还致力于提供智能默认值以便常见用例能只列出所需的内容接下来我们的目标是优化调用端确保调用端的每个字符都有目的最后我们要设计 API 确保它们能整合各个部分而不是枚举可能性让我们来看看 SwiftUI 上的一些例子从我们如何考虑常见用例开始在这方面 SwiftUI 做得特别好的一处是标签

例如当创建按钮时我们要求你为按钮提供一个标签大多数情况下这个标签只是文本用来描述按钮的作用而 SwiftUI 为你提供了一个简洁的拼写方法但如果你想进一步自定义按钮 SwiftUI 也提供另一个重载函数即将任意视图作为标签

这使你能通过这个简单的控件构建复杂的功能但是由于这个 API 仔细考虑了它的常见用例 99% 的情况下你只需要简单版本

这个标签模式在 SwiftUI 中随处可见我说随处可见是认真的我们在整个框架中都考虑了常见用例接下来我们看看提供智能默认值为了简化常见用例我们要为所有没有明确指定的东西提供智能默认值这里最好的例子就是 SwiftUI 中最常用的 API 之一 Text Text 是智能默认值一个很好的例子你可能已经编写了数百次这样的代码在编写时你没有考虑所有不必指定的内容

有了这段代码 SwiftUI 将通过在应用包中查找带有环境语言的本地化字符串来本地化文本它会自动适应当前的配色方案直接支持深色模式它会根据当前的辅助功能动态类型大小自动缩放文本我们之前也提到过这些行为但文本在幕后做了更多的事情

例如两个文本并排放入栈中文本之间的距离将按当前上下文自动调整为正确行间距所有这些行为都可以人为指定但 SwiftUI 的智能默认设置意味着当它们与你的用例无关时它们不会出现在调用端

Text 是这样一个例子它的最简案例是极其简化的但智能默认值适用于所有类型的调用端以工具栏为例这是一个工具栏上面有一堆按钮如果不明确指定它们的位置工具栏按钮会根据平台惯例放置在 macOS 上它们会出现在工具栏的前缘但在 iOS 上它们会出现在导航栏的后缘最后在 watchOS 上只出现第一个项目固定在导航栏下面这种方法在大多数情况下都很有效但如果你确实需要更多的控件我们也提供了额外的 API 明确指定项目的放置位置同样如果需要你可以进行自定义但是智能默认值可以处理大多数情况

参照常见用例并提供智能默认值可以创造一些非常棒的体验但如果这些 API 使用感较差或不完善它可能会破坏整体效果这就引出了我们的最后一条策略优化调用端说到这一点我们看看另一个 API 即 Table

多列表格是功能非常丰富的控件需要配置的东西很多功能也很多但是大多数表格要简单得多也不需要所有这些功能我们希望表格能够处理这种更复杂的行为而它最详细的格式已经做到了这点它支持排序包含丰富单元格内容的多列分段行等等

但我们也希望在更常见的情况下提供出色的体验感所以我们看看这个简单表格的完整代码并看看我们如何优化它的调用端首先我们拆分一下这个例子表格首先指定如何为每一行生成数据

在这里我将枚举当前正在读的每一本书并为每一本书创建一个表行接下来它会指定如何用每一行的数据填充列在这里我创建了一个标题列和一个作者列

它还会用绑定来排序次序以允许用户单击表列 header 时更改排序

最后我添加了一些代码以在排序次序发生变化时重新对表数据排序这有很多的信息我们看看该如何优化这个调用端以真正实现渐进式呈现

最常见的一个用例与行有关大多数时候行字段就像这个例子中一样一个集合上有一个 ForEach 为每项提供一个表行

开发人员不需要自己循环所有这些内容 SwiftUI 提供了一个方便的功能在底层处理这些内容通过将集合直接传递到表格可以在幕后完成 ForEach 行为极大地简化了我们的调用端但这还可以进一步简化其它常见用例有什么呢大多数时候当我想在表格中显示的一个值是字符串时我会直接使用文本在列中显示它这种情况下我们也会优化调用端

只要值路径指向一个字符串我们就允许省略与 TableColumn 关联的视图

这是另一个重要的简化但仍有更多需要优化的部分调用端中有一些信息并不是所有表格都需要关注的那就是排序次序表格最简单的用例和排序完全无关因此我们也提供了一个本身不涉及排序的表格版本这就引出了我们的最后一次迭代简洁多了这个 call site 的每个字符都有一个明确的目的为了做到这点我们每一步都问了自己两个关键问题 “我们应该为哪些最常见的用例提供便利” 以及“什么信息总是必要的” 这些指导性的问题可以很好地帮助你优化 call sites 但要谨慎应用如果不仔细考虑它们对 API 的影响可能会把你引入歧途这就引出了我们的最终策略组合而非枚举进一步说明这一点我们来谈谈 SwiftUI 布局系统一个部分的设计：Stack 特别是 HStack 首先我们想想 HStack 的关键信息是什么它需要知道栈中应该有什么内容以及这些内容应该如何在栈中排列我们已经有视图生成器来指定 HStack 的内容所以我们要专注于排列回到我们强调的指导性问题在 HStack 中排列元素时最常见的用例是什么我有时想显示一个像这样的栈它会从前端开始一个接一个地显示盒子

另一种常见的情况是希望元素居中最后我可能想把元素向尾部对齐

VStack 已经有了一个与此类似的 API 即对齐所以创建一个类似的 enum 来排列栈中的元素似乎很吸引人这支持我们提到的所有使用情况通过指定 HStack 的排列我可以选择前对齐尾对齐或居中排列这取决于我想要什么但如果我现在想均匀地间隔元素或者只在元素之间或最后一个元素之前设置间隔呢这开始变得格外混乱但更重要的是这是不可持续的我必须为我们想要的每个行为添加一个 enum 案例而我们可能无法把所有有用的案例考虑周全当你发现自己在列举常见情况而不是为它们提供方便时试着把你的 API 分解成可以构建解决方案的可组合块组合而非枚举

在栈的例子中 SwiftUI 提供了 Spacer 让你将它与栈的元素组合以构建我们列举的所有间距方案诸如此类这也是今天这一 API 的起源

为渐进式呈现设计最佳体验不仅仅在于最小化调用端还在于仔细思考该如何缩放调用端以处理所有用例在这种情况下是通过组合

当你编写代码时同样仔细考虑自己创建的组件可能会非常有帮助回顾一下首先是考虑常见用例通过应用渐进式呈现你编写的代码会在最常见的用例中节省你的时间智能默认值将意味着你不必考虑这些常见用例的细节努力优化你构建的调用端会允许你快速迭代最后利用组合可以让你构建足够灵活的 API 以适应它们的所有用例

因为你是一名 API 设计师你可以将这些经验应用到你每天编写的代码中无论它是为别人设计的还是只是自己使用的谢谢观看

1:59 - Declaration Site Example

struct BookView: View {
    let pageNumber: Int
    let book: Book

    init(book: Book, pageNumber: Int) {
        self.book = book
        self.pageNumber = pageNumber
    }

    var body: some View { ... }
}

2:13 - Call Site Example

VStack {
    BookView(book: favoriteBook, page: 1)
    BookView(book: savedBook, page: 234)
}

4:18 - Button Label

Button("Next Page") {
    currentPage += 1
}

4:36 - Button label expanded

Button {
    currentPage += 1
} label: {
    Text("Next Page")
}

4:43 - Button label advanced case

Button {
    currentPage += 1
} label: {
    HStack {
        Text("Next Page")
        NextPagePreview()
    }
}

4:56 - Button label common case

Button("Next Page") {
    currentPage += 1
}

5:30 - Text example
```
Text("Hello WWDC22!")
```

6:12 - Stacks of Text

VStack {
    Text("Hello WWDC22!")
    Text("Call to Code.")
}

6:46 - Toolbar

.toolbar {
    Button {
        addItem()
    } label: {
        Label("Add", systemImage: "plus")
    }

    Button {
        sort()
    } label: {
        Label("Sort", systemImage: "arrow.up.arrow.down")
    }

    Button {
        openShareSheet()
    }: label: {
        Label("Share", systemImage: "square.and.arrow.up")
    }
}

7:20 - Toolbar with explicit placement

.toolbar {
    ToolbarItemGroup(placement: .navigationBarLeading) {
        Button {
            addItem()
        } label: {
            Label("Add", systemImage: "plus")
        }

        Button {
            sort()
        } label: {
            Label("Sort", systemImage: "arrow.up.arrow.down")
        }

        Button {
            openShareSheet()
        }: label: {
            Label("Share", systemImage: "square.and.arrow.up")
        }
    }
}

8:09 - Advanced use case table

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(sortOrder: $sortOrder) {
        TableColumn("Title", value: \Book.title) { book in
            Text(book.title).bold()
        }
        TableColumn("Author", value: \Book.author) { book in
            Text(book.author).italic()
        }
    } rows: {
        Section("Favorites") {
            ForEach(favorites) { book in
                TableRow(book)
            }
        }
        Section("Currently Reading") {
            ForEach(currentlyReading) { book in
                TableRow(book)
            }
        }
    }
    .onChange(of: sortOrder) { newValue in
        favorites.sort(using: newValue)
        currentlyReading.sort(using: newValue)
    }
}

8:41 - Simpler table use case

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(sortOrder: $sortOrder) {
        TableColumn("Title", value: \Book.title) { book in
            Text(book.title)
        }
        TableColumn("Author", value: \Book.author) { book in
            Text(book.author)
        }
    } rows: {
        ForEach(currentlyReading) { book in
            TableRow(book)
        }
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

9:58 - Table collection convenience

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(currentlyReading, sortOrder: $sortOrder) {
        TableColumn("Title", value: \.title) { book in
            Text(book.title)
        }
        TableColumn("Author", value: \.author) { book in
            Text(book.author)
        }
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

10:23 - Table string key path convenience

@State var sortOrder = [KeyPathComparator(\Book.title)]

var body: some View {
    Table(currentlyReading, sortOrder: $sortOrder) {
        TableColumn("Title", value: \.title)
        TableColumn("Author", value: \.author)
    }
    .onChange(of: sortOrder) { newValue in
        currentlyReading.sort(using: newValue)
    }
}

10:51 - Table without sorting

var body: some View {
    Table(currentlyReading) {
        TableColumn("Title", value: \.title)
        TableColumn("Author", value: \.author)
    }
}

13:37 - Stack example: leading

struct StackExample: View {
    var body: some View {
        HStack { // leading
            Box().tint(.red)
            Box().tint(.green)
            Box().tint(.blue)
        }
    }
}

13:40 - Stack example: centered

struct StackExample: View {
    var body: some View {
        HStack { // centered
            Spacer()
            Box().tint(.red)
            Box().tint(.green)
            Box().tint(.blue)
            Spacer()
        }
    }
}

13:42 - Stack example: evenly spaced

struct StackExample: View {
    var body: some View {
        HStack { // evenly spaced
            Spacer()
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
            Spacer()
        }
    }
}

13:43 - Stack example: space only between elements

struct StackExample: View {
    var body: some View {
        HStack { // space only between elements
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
        }
    }
}

13:46 - Stack example: space only before last element

struct StackExample: View {
    var body: some View {
        HStack { // space only before last element
            Box().tint(.red)
            Box().tint(.green)
            Spacer()
            Box().tint(.blue)
        }
    }
}

13:47 - Stack example: space only after first element

struct StackExample: View {
    var body: some View {
        HStack { // space only after first element
            Box().tint(.red)
            Spacer()
            Box().tint(.green)
            Box().tint(.blue)
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。