iOS 小组件开发第七篇：锁屏小组件

这里每天分享一个 iOS 的新知识，快来关注我吧

前言

前面已经讲了几期小组件相关的内容，在看这篇之前可以先去回顾一下：

iOS 小组件开发第一篇：基础介绍
 iOS 小组件开发第二篇：时间线
 iOS 小组件开发第三篇：实战
 iOS 小组件开发第四篇：小组件的尺寸
 iOS 小组件开发第五篇：开发可配置的小组件
 iOS 小组件开发第六篇：点击事件和交互

在去年的 WWDC 上，iOS 支持将小组件放到锁定屏幕上。主屏幕小部件使用户更容易看到及时的数据，现在 iOS 更进一步，锁定屏幕支持小组件可以让用户更快捷的打开某个应用。

因此，让我们看看如何在我们的程序中添加锁屏小组件。

锁屏小组件

在 iOS 16 中，WidgetFamily 新增了 3 种新的类型来支持锁屏小组件：

accessoryCircular：圆形小组件，可以在 watchOS 中的复杂功能出现，也可以用在 iPhone 和 iPad 的锁定屏幕上，手机上 iOS 16 以上支持，但在 iPad 上需要 iPad OS 17 以上才支持。
accessoryRectangular：矩形小组件，可以显示进度视图、仪表之类的
accessoryInline：內联小组件，只能显示文本，对于较长的内容很有用

代码部分

首先需要在 supportedFamilies 中支持上边提到的三种类型：

less 复制代码

struct LockScreenWidget: Widget {
    let kind: String = "LockScreenWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            LockScreenWidgetEntryView(entry: entry)
                .containerBackground(.fill.tertiary, for: .widget)
        }
        .configurationDisplayName("锁屏小组件")
        .description("这是一个锁屏小组件 demo")
        .supportedFamilies([.accessoryCircular, .accessoryRectangular, .accessoryInline])
    }
}

然后在 LockScreenWidgetEntryView 中根据不同的组件类型渲染不同的 UI：

css 复制代码

struct LockScreenWidgetEntryView : View {
    var entry: Provider.Entry
    
    // 获取 widgetFamily
    @Environment(\.widgetFamily) private var family

    var body: some View {
        switch family {
        case .accessoryCircular:
            // 随便放一张图片
            Image(systemName: "brain.head.profile")
            
        case .accessoryInline:
            HStack {
                Image(systemName: "brain.head.profile")
                    .padding(.trailing, 5)
                Text("iOS 新知 锁屏小组件")
            }
        
        case .accessoryRectangular:
            VStack {
                Image(systemName: "brain.head.profile")
                    .padding(.bottom, 5)
                Text("iOS 新知")
                Text("锁屏小组件")
            }
            
        default:
            Rectangle()
        }
    }
}

运行之后就可以在锁定屏幕上添加小组件了，看下最后效果：

这里每天分享一个 iOS 的新知识，快来关注我吧

本文同步自微信公众号 "iOS新知"，每天准时分享一个新知识，这里只是同步，想要及时学到就来关注我吧！