SwiftUI中ContentUnavailableView的利用（iOS 17、tvOS 17推出的新组件）
iOS 17为SwiftUI带来了一个新的组件ContentUnavailableView，它答应我们向用户出现一个空状态，而不需要创建自定义错误大概无内容视图。ContentUnavailableView易于利用，可自定义，并且具有效于空搜索状态的预定义视图。
发起在无法显示视图内容的情况下利用它，可以用于网络错误、没有项目的列表、没有返回结果的搜索和其他空状态。
利用ContentUnavailableView主要有两类：
[*]利用内置的Unavailable View。
[*]利用自定义的Unavailable View。
内置Unavailable View
ContentUnavailableView只支持一种内置场景：空搜索结果。我们可以利用ContentUnavailableView毫不费力地出现一个空的搜索结果视图。包罗放大镜图像，“无结果”标签以及获取有效搜索结果的有效说明。
https://img-blog.csdnimg.cn/direct/b77ebc2612e04d089e748295c54594f0.png
比如上面的代码，直接调用ContentUnavailableView.search就显示除了右侧的视图，非常简单。
比如我们想显示搜索某某没有结果，就可以像下面这么用。
https://img-blog.csdnimg.cn/direct/c1ad5f5b86b140a48b5251fa909865d6.png
我们可以把上面的abc换成我们要搜做的内容。
另外还有一个好处是，ContentUnavailableView会主动翻译成应用步伐支持的语言。注意，它只会翻译成应用步伐支持的语言。不外笔者没有亲测过。
自定义ContentUnavailableView
ContentUnavailableView不仅用于搜索无结果的显示，也可以用于一些比如无网络，无数据等等的显示。
在初始化的时候我们可以自定义title, image, description等信息。比如下面的这些方法：
https://img-blog.csdnimg.cn/direct/665e4f06009b4a2980590180de08dc63.png
下面是一个无网络的提示：
ContentUnavailableView(
"No Internet Connection",
systemImage: "wifi.slash",
description: Text("Please connect to the internet and try again")
)
https://img-blog.csdnimg.cn/direct/e4c44ef8646946ebb092ff03d63cf451.png
除了提供title, image, description等参数，也可以是带闭包的参数。比如下面的初始化方法：
init(
@ViewBuilder label: () -> Label,
@ViewBuilder description: () -> Description = { EmptyView() },
@ViewBuilder actions: () -> Actions = { EmptyView() }
)
我们可以在label和description闭包内完全自定义我们想要的东西，包罗样式等。
ContentUnavailableView {
Text("No Mail")
.font(.largeTitle)
.foregroundColor(.black)
Text("No Mail")
.font(.largeTitle)
.foregroundColor(.red)
Image(systemName: "tray.fill")
} description: {
Text("New mails you receive will appear here.")
}
https://img-blog.csdnimg.cn/direct/7f46d17b10af40cb8fb404ac166f0d5f.png
在初始化的第一个label闭包内，我们添加了两个Text和一个Image，包罗设置了外观样式，这些都是支持的，而且这些添加的组件默认都是竖向分列的。
在label闭包和description闭包内恣意添加了一些组件，仅供测试了：
https://img-blog.csdnimg.cn/direct/af9e62ad7494441c8b5ba357d2bc706d.png
这个初始化方法中还有一个actions参数，答应用户交互一下。
ContentUnavailableView {
Label("Empty Bookmarks", systemImage: "bookmark")
} description: {
Text("Explore a great movie and bookmark the one you love to enjoy later.")
} actions: {
Button("Browse Movies") {
// Go to the movie list.
}
.buttonStyle(.borderedProminent)
}
https://img-blog.csdnimg.cn/direct/6b7647580ef6493d8d0ed6a792014f95.png
actions闭包支持添加多个Button的。
写在最后
虽然可以利用VStack和Text实现雷同的结果，但ContentUnavailableView为处理重复性任务节省了大量时间。此外，它还确保了跨不同平台的一致和吸引人的外观，究竟我们的App有可能是同时支持iOS，tvOS以及AppleWatch的。
最后，希望可以或许资助到有需要的朋友，假如您以为有资助，还望点个赞，添加个关注，笔者也会不停地积极，写出更多更好用的文章。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]