飞道的博客

[SwiftUI 开发] Widget 小组件

483人阅读  评论(0)

小组件简述

小组件可以在主屏幕上实现内容展示和功能跳转。
系统会向小组件获取时间线,根据当前时间对时间线上的数据进行展示。点击正在展示的视觉元素可以跳转到APP内,实现对应的功能。

小组件是一个独立于 App 环境(即 App Extension),小组件的生命周期/存储空间/运行进程都和 App 不同。

 ​​​​​​​

App Extension

App Extension 可以将自定义功能和内容扩展到应用程序之外,并在用户与其他应用程序或系统交互时向用户提供。例如,您的应用可以在主屏幕上显示为小部件。也就是说小组件是一种 App Extension,小组件的开发工作,基本都在 App Extension 的环境中。

App 和 App Extension有什么关系?

本质上是两个独立的程序,你的主程序既不可以访问 App Extension 的代码,也不可以访问其存储空间,这完完全全就是两个进程、两个程序。App Extension 依赖你的 App 本体作为载体,如果将 App 卸载,那么 App Extension 也不会存在于系统中了。而且 App Extension 的生命周期大多数都作用于特定的领域,根据用户触发的事件由系统控制来管理。

相关限制

苹果基于上面的设计定位,同时也为了节省系统资源保证续航,对 Widget 的做了一些限制:
不支持动画,仅支持静态页面展示。
更新频率由系统通过机器学习来动态分配。
不支持拖拽、滚动等复杂的交互,不支持 Switch 等控件。
用户点击 Widget 一定会跳转到 App。
支持三种不同大小的样式

Widget小、大、中页面数据布局


  
  1. public enum WidgetFamily : Int, RawRepresentable, CustomDebugStringConvertible, CustomStringConvertible {
  2. /// A small widget.
  3. case systemSmall
  4. /// A medium-sized widget.
  5. case systemMedium
  6. /// A large widget.
  7. case systemLarge
  8. }

创建 Widget Extension 和配置文件​​​​​​​ 

​​​​​​​Xcode 中新增一个 Widget Extension

(路径如下:File-New-Target-iOS选项卡-Widget Extension)

 

需要可配置小组件功能的,则不要忘记勾选 Include Configuration Intent


App Groups 数据通信

​​​​​​​App 和 App Extension是独立的两个Target,  是不能直接通讯的,所以需要共享信息时,需要使用 App Groups 来进行通讯。App Groups 有两种共享数据的方式,NSUserDefaultsNSFileManager

NSUserDefaults数据共享


  
  1. // 1. 写入共享数据
  2.   if let myDefaults = UserDefaults(suiteName: "group.test.appgroup") {
  3. myDefaults.set( "aaaaa", forKey: "key")
  4. }
  5. // 2. 读取共享数据
  6. if let myDefaults = UserDefaults(suiteName: "group.test.appgroup") {
  7. print( "\(myDefaults.object(forKey: "key"))")
  8. }

SwiftUI 构建组建

这里主要讲一下代理方法的作用,具体的视图布局和普通视图一样(widget只能用swiftUI来布局)


  
  1. //
  2. // Widget1.swift
  3. // Widget1
  4. //
  5. import WidgetKit
  6. import SwiftUI
  7. // 时间线刷新策略控制
  8. struct Provider: TimelineProvider {
  9. // 窗口首次展示的时候,展示默认数据
  10. func placeholder( in context: Context) -> SimpleEntry {
  11. SimpleEntry(date: Date())
  12. }
  13. // 添加组件时的预览数据,在桌面滑动选择的时候展示数据
  14. func getSnapshot( in context: Context, completion: @escaping ( SimpleEntry) -> ()) {
  15. let entry = SimpleEntry(date: Date())
  16. completion(entry)
  17. }
  18. // 时间线刷新策略控制逻辑
  19. func getTimeline( in context: Context, completion: @escaping ( Timeline< Entry>) -> ()) {
  20. var entries: [ SimpleEntry] = []
  21. // Generate a timeline consisting of five entries an hour apart, starting from the current date.
  22. let currentDate = Date()
  23. for hourOffset in 0 ..< 5 {
  24. // byAdding:刷新间隔,枚举值可以选,按秒 分 小时...
  25. let entryDate = Calendar.current.date(byAdding: .hour, value: hourOffset, to: currentDate) !
  26. let entry = SimpleEntry(date: entryDate)
  27. entries.append(entry)
  28. }
  29. // policy: TimelineReloadPolicy
  30. // atEnd 顺时针循环遍历
  31. // never 只循环一遍,循环完显示最后一个快照
  32. // after 指定刷新时间,比如上面有5个快照,每秒更换数据源。TimeLine用after(10s), 那第二张就不会被看到
  33. let timeline = Timeline(entries: entries, policy: .atEnd)
  34. completion(timeline)
  35. }
  36. }
  37. struct SimpleEntry: TimelineEntry {
  38. // 默认带了一个日期参数
  39. let date: Date
  40. }
  41. struct Widget1EntryView : View {
  42. // 组件数据
  43. var entry: Provider. Entry
  44. // 这个 body 中就是自己需要实现的组件布局
  45. var body: some View {
  46. Text(entry.date, style: .time)
  47. }
  48. }
  49. // 小组件入口
  50. @main
  51. struct Widget1: Widget {
  52. // 小组件的唯一ID
  53. let kind: String = "Widget1"
  54. var body: some WidgetConfiguration {
  55. // 创建时不勾选 “Include Configuration Intent”,这里使用 StaticConfiguration
  56. StaticConfiguration(kind: kind, provider: Provider()) { entry in
  57. Widget1EntryView(entry: entry) // 小组件UI
  58. }
  59. .supportedFamilies([.systemSmall, .systemLarge]) // 配置该组件支持的尺寸,如果不配置,默认是大中小都支持
  60. .configurationDisplayName( "组件标题") // 在添加组件预览界面显示
  61. .description( "组件描述") // 在添加组件预览界面显示
  62. .supportedFamilies([.systemSmall, .systemMedium]) //可以选择适配的小组件
  63. }
  64. }
  65. // 调试预览
  66. struct Widget1_Previews: PreviewProvider {
  67. static var previews: some View {
  68. Widget1EntryView(entry: SimpleEntry(date: Date()))
  69. .previewContext( WidgetPreviewContext(family: .systemSmall))
  70. }
  71. }

多个Widget


  
  1. import WidgetKit
  2. import SwiftUI
  3. @main
  4. struct testWidgetBundle: WidgetBundle {
  5. var body: some Widget {
  6. testWidget1()
  7. testWidget2()
  8. testWidget3()
  9. }
  10. }

跳转至APP

widgetURL: 点击区域是Widget的所有区域,适合元素、逻辑简单的小部件。

Link: 通过Link修饰,允许让界面上不同元素产生点击响应
 

1.  widgetURL


  
  1. //MARK: -小组件
  2. //快捷启动small
  3. struct ShortcutWidgetViewS : View {
  4. var date: Date
  5. var data: wShortcutData
  6. var body: some View {
  7. let info = data.infos[ 0]
  8. ZStack{
  9. Image(uiImage: data.bg).resizable()
  10. }.widgetURL( URL(string: "weixin://scanqrcode")) //这里是跳转微信扫一扫链接
  11. }
  12. }

2.  Link

(Link可以选点击区域,不适用systemS mall)


  
  1. struct SwiftUIShortcutCellL: View{
  2. var urlPath: String! //跳转的链接
  3. var body: some View{
  4. Link(destination: URL(string: urlPath) !) {
  5. ZStack(content: {
  6. //点击区域的UI
  7. Image(uiImage: data.bg)
  8. })
  9. }
  10. }
  11. }

APP接收openURL
在程序入口处,调用.onOpenURL方法,来接收传来的openURL


  
  1. struct swiftUI_testApp: App {
  2. var body: some Scene {
  3. WindowGroup {
  4. ContentView()
  5. .onOpenURL { url in
  6. print(url)
  7. }
  8. }
  9. }
  10. }

刷新次数限制

关于刷新策略,根据官方文档来看,Timeline的刷新策略是会延迟的,并不一定根据你设定的时间来。同时官方规定每个配置的窗口小部件每天都接收有限数量的刷新,影响widget刷新次数因素,主要有APP在前台和后台运行、APP的活跃度、widget的活跃度。

苹果因为提供了一个单独的方法,调用来重新加载所有窗口小部件
/// 控件的所有已配置小部件重新加载时间线
/// 包含应用程序。

WidgetCenter.shared.reloadAllTimelines()

可配置Widget

在 Xcode 中新增一个 SiriKit Intent Definition File

(路径如下:File-New File-iOS选项卡-SiriKit Intent Definition File) 

创建成功以后,就可以添加想配置的属性了

代码中获取配置属性


  
  1. struct testWidgetEntryView : View {
  2. @Environment(\.widgetFamily) var family: WidgetFamily
  3. var entry: Provider. Entry
  4. var body: some View {
  5. VStack {
  6. // 通过WidgetFamily的configuration属性,就可以拿到widget配置的属性
  7. Text(entry.configuration.title ?? "Title")
  8. }.widgetURL( URL(string: "SmallURL") )
  9. }
  10. }

 运行结果
​​​​​​​


转载:https://blog.csdn.net/u010130947/article/details/128550517
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场