如何让SwiftUI的列表变得更加灵活-免费源码丞旭猿

👇👇回复 进群 ，拉你进社区交流群👇👇

前言

List可能是SwiftUI附带的内置视图中最常用的一种，它使我们能够在任何Apple平台上呈现类似于表格视图的用户界面。今年，List获得了许多非常重要的升级，使其更加灵活和易于定制。让我们看看都有哪些新功能。

作为起点，假设我们正在处理以下ArticleList视图，该视图使用ArticleListViewModel来呈现文章列表：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List(viewModel.articles) { articleinNavigationLink(destination:ArticleView(article: article),label: {VStack(alignment: .leading) {Text(article.title).font(.headline)Text(article.description).foregroundColor(.secondary)}})}}}

上面的内容目前是使用SwiftUI中初版的概念和 API 编写的，下面让我们尝试使用新功能来为我们的列表实现自定义样式，并且使代码更加健壮。

使用新速记语法

让我们从一个很小的特性开始，这是一个非常受欢迎的变化，可以使用类似enum的速记语法来引用SwiftUI附带的任何内置ListStyle类型。比如，如果我们想将inset grouped样式应用于列表中，我们不需要拼出整个InsetGroupedListStyle名称，而是可以简单地将其称为.insetGrouped：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List(viewModel.articles) { articlein...}.listStyle(.insetGrouped)}}

这样的改变还是非常好的，可以让我们的开发更加方便，阅读时感觉更加自然。

元素绑定和自定义滑动操作

接下来，让我们看看如何将完全自定义的滑动操作添加到列表中。为了演示这种情况，我们在List中嵌套一个ForEach（因为在SwiftUI的中，列表变化一版都是由ForEach触发的，而不是由List触发的）。然后，让我们使用另一个新功能，集合元素绑定，让系统自动为我们的articles数组中的每个元素创建一个可变绑定：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List{ForEach($viewModel.articles) { $articlein...}}.listStyle(.insetGrouped)}}

注意：关于上述创建集合元素绑定的新方法，即使我们的应用程序在较旧的操作系统版本上运行，也是没有问题的。完全向后兼容！

由于每个article值在ForEach闭包中都是可变的，我们可以使用新的swipeActions修饰符来实现每个NavigationLink项目视图的自定义滑动操作。在这种情况下，用户可以轻松的在项目视图上滑动来决定喜不喜欢对应的文章：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List{ForEach($viewModel.articles) { $articleinNavigationLink(...).swipeActions {Button(action: {article.isFavorite.toggle()},label: {ifarticle.isFavorite {Label("Remove from favorites",systemImage:"star.slash")}else{Label("Add to favorites",systemImage:"star")}}).tint(article.isFavorite ? .red : .green)}}}.listStyle(.insetGrouped)}}

这里还可以使用新的tint修饰符根据喜欢还是不喜欢滑动动作来设置自定义颜色。

下拉刷新

就我个人而言，下拉刷新在我的SwiftUI功能请求列表中非常重要，所以我很高兴看到今年的版本增加了对这种非常常见的UI范式的内置支持。

不仅如此，下拉刷新是由async/await提供支持，不需要增加任何额外的代码就可以让系统知道什么时候重新加载结束。在列表中使用refreshable修饰符就可以完成，然后使用该修饰符的闭包await调用视图模型的异步reload方法：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List{...}.listStyle(.insetGrouped).refreshable {await viewModel.reload()}}}

要了解有关async/await的更多信息以及如何在SwiftUI中使用，请查看昨天的这篇文章^[1]，不要错过真正重要的在 Swift 中认识 async/await^[2]WWDC 会议。

由于系统会自动检测知道viewModel.reload()何时调用完成，因此可以防止发生重复的刷新操作，并且可以更具状态显示和隐藏相应 UI。

可定制的分隔符

自从引入SwiftUI以来，开发者们有一个非常普遍的要求，提供一个API，用于隐藏或以其他自定义实现列表中每个item之间的默认分隔符。

很高兴地告诉你，今年Apple已经响应了这个请求，我们可以使用新的listRowSeparator修饰符来完全隐藏不想呈现的分隔符：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List{ForEach($viewModel.articles) { $articleinNavigationLink(...).swipeActions {...}.listRowSeparator(.hidden)}}...}}

由于上述修饰符是在每个列表的item上调用的，而不是在列表本身上调用，这为我们提供了很大的灵活性，可以根据想要构建的UI类型动态隐藏或显示每个分隔符。

还有另外一个API用于控制部分分隔符的外观颜色，可以使用自定义颜色为分隔符设置颜色——代码如下：

structArticleList:View{@ObservedObjectvarviewModel:ArticleListViewModelvarbody: someView{List{ForEach($viewModel.articles) { $articleinNavigationLink(...).swipeActions {...}.listRowSeparatorTint(.blue)}}...}}

同样，由于上述修饰符是在每个列表的item上调用的，可以为不同的分隔符设置不同的颜色。

总结

SwiftUI正在变得更加灵活和强大，后面我将继续探索更多新推出的API，并在这里发布分享，欢迎持续关注，为了防止丢失，建议为本号设置星标。

转载声明

本文已经在公众号Swift社区发布，需要转载请联系小编申请开白。未经同意禁止私自转载。

译自How SwiftUI’s List is becoming much more flexible this year^[3]

参考资料

[1]

Calling async APIs from a synchronous context:https://wwdcbysundell.com/2021/calling-async-apis-from-synchronous-contexts/

– EOF –

推荐阅读点击标题可跳转

1、Swift5.5、DocC、Notifications，苹果WWDC21带来的最大技术变化

2、Swift 中常见循环引用的注意事项与总结

3、iOS 识别虚拟定位调研

点赞和在看就是最大的支持❤️

声明：本文部分素材转载自互联网，如有侵权立即删除 。