【iOS小组件】iOS17与低版本兼容适配

背景

当使用 XCode15.3 创建小组件时默认使用的都是最新语法和特性的示例模版,预览与运行一切正常。

当我们切换到低版本(如iOS14)后灾难出现了,代码一片红😢,即无法预览也无法运行😰。

前面【iOS小组件】第一个小组件 已经解决了,为了避免踩坑,这里描述一下遇到的错误与对应的兼容处理方案。

第一步:处理预览报错

预览示例中使用的 APIiOS17 开始支持的,当我们切换到低版本肯定会报错

🧰 处理方案就是改为低版本 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

containerBackgroundiOS 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 官方教程:

developer.apple.com/swift

SwiftUI 官方教程:

developer.apple.com/tutorials/s...

本文同步自微信公众号 "程序员小溪" ,这里只是同步,想看及时消息请移步我的公众号,不定时更新我的学习经验。

相关推荐
良技漫谈2 天前
Rust移动开发:Rust在iOS端集成使用介绍
后端·程序人生·ios·rust·objective-c·swift
KeithTsui2 天前
ZFC in LEAN 之 前集的等价关系(Equivalence on Pre-set)详解
开发语言·其他·算法·binder·swift
袁代码3 天前
Swift 开发教程系列 - 第4章:函数与闭包
ios·swift·ios开发
今天也想MK代码3 天前
在Swift开发中简化应用程序发布与权限管理的解决方案——SparkleEasy
前端·javascript·chrome·macos·electron·swiftui
安泽13144 天前
高德地图美食
开发语言·swift·美食
袁代码4 天前
Swift 开发教程系列 - 第2章:Swift 基础语法
swift·ios开发·基础教程
袁代码4 天前
Swift 开发教程系列 - 第1章:Swift 简介与开发环境配置
swift·ios开发·基础教程
孚亭4 天前
一些swift问题
swift
莫问alicia5 天前
echarts 实现3D饼状图 加 label标签显示
前端·3d·echarts·swift
uiop_uiop_uiop7 天前
iOS Swift5算法恢复——HMAC
ios·iphone·swift