背景
当使用 XCode15.3 创建小组件时默认使用的都是最新语法和特性的示例模版,预览与运行一切正常。
当我们切换到低版本(如iOS14)后灾难出现了,代码一片红😢,即无法预览也无法运行😰。
前面【iOS小组件】第一个小组件 已经解决了,为了避免踩坑,这里描述一下遇到的错误与对应的兼容处理方案。
第一步:处理预览报错
预览示例中使用的 API 是 iOS17 开始支持的,当我们切换到低版本肯定会报错
🧰 处理方案就是改为低版本 API 写法。
定义一个 struct 继承自 PreviewProvider 并提供必要的 previewContext
css
//#Preview(as: .systemSmall) {
// MyWidget()
//} timeline: {
// SimpleEntry(date: .now, emoji: "😀")
// SimpleEntry(date: .now, emoji: "🤩")
//}
struct MyWidgetEntryView_Previews: PreviewProvider {
static var previews: some View {
MyWidgetEntryView(entry: SimpleEntry(date: Date(), emoji: "😁"))
.previewContext(WidgetPreviewContext(family: .systemSmall))
}
}
重新预览,此时预览已正常,接下来处理 background 的兼容问题
第二步:处理背景兼容
从报错信息上可以看到,报错原因是因为没有使用 containerBackground
containerBackground 是iOS 17 中新增的接口,用于统一设置View背景颜色。如果你的小组件使用了 background 设置背景颜色,可能需要适配新的 containerBackground API
适配方法就是将 background 替换为containerBackground 。
-
但要注意,containerBackground 仅在 iOS 17及以上版本 可用。
-
如果小组件需要支持低版本,可以通过扩展的方式进行兼容处理。
兼容处理可以通过给 View 添加扩展方法解决:
swift
extension View {
// 背景
@ViewBuilder
func widgetBackground(_ backgroundView: some View) -> some View {
// 如果是 iOS 17,则使用 containerBackground
if #available(iOS 17.0, *) {
containerBackground(for: .widget) {
backgroundView
}
} else {
background(backgroundView)
}
}
func widgetBackground2(_ backgroundView: some View) -> some View {
// 如果是 iOS 17,则使用 containerBackground
if #available(iOS 17.0, *) {
return containerBackground(for: .widget) {
backgroundView
}
} else {
return background(backgroundView)
}
}
}
上面提供了两种处理方式,第一种是通过 视图构造器 ,第二种是通过 扩展方法,使用哪种都行。
在设置背景颜色的时候就可以直接使用这个方法就行:
scss
struct MyWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
VStack {
Text("Time:")
Text(entry.date, style: .time)
Text("Emoji:")
Text(entry.emoji)
}
// 设置背景
.widgetBackground(Color.white)
}
}
struct MyWidget: Widget {
let kind: String = "MyWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
// if #available(iOS 17.0, *) {
// MyWidgetEntryView(entry: entry)
// .containerBackground(.fill.tertiary, for: .widget)
// } else {
// MyWidgetEntryView(entry: entry)
// .padding()
// }
// 新增加
MyWidgetEntryView(entry: entry)
}
.configurationDisplayName("My Widget")
.description("This is an example widget.")
}
}
完整代码
swift
extension View {
// 背景
@ViewBuilder
func widgetBackground(_ backgroundView: some View) -> some View {
// 如果是 iOS 17,则使用 containerBackground
if #available(iOS 17.0, *) {
containerBackground(for: .widget) {
backgroundView
}
} else {
background(backgroundView)
}
}
func widgetBackground2(_ backgroundView: some View) -> some View {
// 如果是 iOS 17,则使用 containerBackground
if #available(iOS 17.0, *) {
return containerBackground(for: .widget) {
backgroundView
}
} else {
return background(backgroundView)
}
}
}
struct MyWidgetEntryView : View {
var entry: Provider.Entry
var body: some View {
VStack {
Text("Time:")
Text(entry.date, style: .time)
Text("Emoji:")
Text(entry.emoji)
}
.widgetBackground(Color.white)
}
}
struct MyWidget: Widget {
let kind: String = "MyWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: Provider()) { entry in
// 新增加
MyWidgetEntryView(entry: entry)
}
.configurationDisplayName("My Widget")
.description("This is an example widget.")
.supportedFamilies([.systemSmall, .systemMedium, .systemLarge])
}
}
struct MyWidgetEntryView_Previews: PreviewProvider {
static var previews: some View {
MyWidgetEntryView(entry: SimpleEntry(date: Date(), emoji: "😁"))
.previewContext(WidgetPreviewContext(family: .systemSmall))
MyWidgetEntryView(entry: SimpleEntry(date: Date(), emoji: "😁"))
.previewContext(WidgetPreviewContext(family: .systemMedium))
}
}
友情链接
Swift 官方教程:
SwiftUI 官方教程:
developer.apple.com/tutorials/s...
本文同步自微信公众号 "程序员小溪" ,这里只是同步,想看及时消息请移步我的公众号,不定时更新我的学习经验。