读完这篇博客，你可以大致了解一些关于iOS14 Widgets的信息以及如何尝试编写一个简单的Widget组件。
关于Widget代码演示部分，可以直接跳到第三部分：iOS14 Widget代码实现。
1：与iOS13 Widget区别
不同点
最直观的区别是，如官方演示视频所示，组件可以直接布局在iPhone主屏幕上，如下所示。
image iOS13上的Widget是一个整体，从负1屏的一个显示区域内的布局来看，它们都有专门的页面进行管理。在14 上，每个Widget 都是一个独立的组件，它们可以通过简单的长按手势进行自我管理，进行编辑和删除。如果你想改变iOS13上某个Widget的大小，只能通过右上角的下标箭头来编辑和展开它。一般有两种尺寸：NCWidgetDisplayMode 的Expanded 和Compact 属性。 14 中改为三种尺寸：Widget 仅支持3 种尺寸：systemSmall (2x2)、systemMedium (4x2) 和systemLarge (4x4)（基于单个APP-icon 的尺寸）。下图是13-Widget小日历和14-Widget内置日历的对比。 iOS13-Widget
imageiOS14-Widget
iOS13上的image Widget不支持Widget堆叠，可以通过上下滑动切换。并且在14上支持。14还支持在任意主界面上编辑Widget页面。除了显示上的差异，代码实现上也有差异
默认情况下，iOS13 上的Widgets 根据开发语言的选择生成组件。例如，OC 项目生成OC Widget 组件，Swift 项目生成Swift Widget 组件。而到了14，Swift和SwiftUI默认都是基于该语言开发的。
14号使用了新的WidgetKit框架，而不是13号的Today Extension。UI部分只能使用SwiftUI进行开发，所以需要有一定的SwiftUI和Swift基础。
14的Widget需要依赖Xcode12.0版本。
相同点
同一个APP可以开发多个组件，也可以同时使用多个组件。
可以与主程序APP进行交互。
2：iOS14 Widget的特点
14 的小部件更加可定制。它们可以与主屏幕上的应用程序一起排列、堆叠以节省空间，并与Siri 的智能推荐集成。
苹果对于开发中如何设计一个漂亮的小部件（Widget）有更多建议，比如通过颜色、布局和图像传达你的品牌、舒适的信息密度等，具体请查看苹果开发文档
适应不同屏幕尺寸
屏幕尺寸- 纵向小部件- systemSmall 中小部件- systemMedium 大部件- systemLarge414x896 pt (XR/XsMax/11/11ProMax)169x169pt360x169pt360x379pt375x812 pt (X/Xs/11 Pro)155x155 pt329x155 pt329x345 pt414 36 点(6p/6sp/7p)159x159 pt348x159 pt348x357 pt375x667 pt (6/6s/7/8)148x148 pt321x148 pt321x324 pt320x568 pt (5/5s/SE)141x141 pt292x141 pt292x311 pt 支持Widget 配置和交互
3：iOS14 Widget的代码实现
3
1：项目创建
1：Widget 作为项目的组件，创建之前您需要先创建一个iOS项目。
创建新的Xcode Project 语言选择：Swift/OC2：项目创建成功后，点击：File-New-Target 添加Widget Extension Target，点击Next。
image3：输入Widget组件名称，取消勾选，然后单击完成。包含配置意图：是否支持用户配置。
image4：如图所示，可以看到默认生成的模板和默认预览组件尺寸systemSmall。但在真机上编译后，可以看到Widget的三种尺寸。您可以在预览方法中添加systemMedium和systemLarge预览。 Xcode12上最右边的可视化界面直接运行模拟器并在真机上编译。
imageAdd各种尺寸的组件预览//MARK: - 预览
结构AdopterWidget_Previews: PreviewProvider {
静态变量预览：一些视图{
///小的
AdopterWidgetEntryView（条目：条目）
.previewContext(WidgetPreviewContext(family:systemSmall))
///中间
AdopterWidgetEntryView（条目：条目）
.previewContext(WidgetPreviewContext(family:systemMedium))
///大的
AdopterWidgetEntryView（条目：条目）
.previewContext(WidgetPreviewContext(family:systemLarge))
}
}5：熟悉Hello World后开始编写新的demo。
image6：预览上面视图的工具
最左边的项目：Live Preview：Xcode 视图预览。左边第二个：Preview on Device：真实设备预览，会在你的真实设备上编译出一个APP：Xcode Previews不包含APP应用Widget组件。
3：与主应用交互
根据官方文档的描述，点击Widget窗口调用APP进行交互并指定跳转支持两种方式：
widgetURL：点击区域为Widget的所有区域，代码如下。 if family==.systemSmall { //小
VStack(alignment:center, 间距： 20, content: {
文本（条目.引用.作者）
.font(.system(size: 16))
文本(entry.quotes.content[0])
.font(.system(size: 15))
.foregroundColor(.black)
Text("(entry.quotes.date) at (entry.quotes.place) ")
.font(.system(size: 9))
.foregroundColor(.灰色)
})
.frame(maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/,alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/).padding(16)
.widgetURL(URL(string: "https://www.baidu.com/small"))
}Link：通过Link修改，可以让界面上的不同元素产生点击响应。 if family==.systemMedium { //中等
VStack(alignment:center, 间距： 8, content: {
文本（条目.引用.作者）
.font(.system(size: 18))
.frame(高度： 30，对齐方式：top)
链接(destination: URL(string: "https://www.baidu.com/medium/1")!) {
文本(entry.quotes.content[0])
.font(.system(size: 17))
.foregroundColor(.black)
.frame(maxWidth:infinity,alignment:leading)
}
链接(destination: URL(string: "https://www.baidu.com/medium/2")!) {
文本(entry.quotes.content[1])
.font(.system(size: 17))
.foregroundColor(.black)
.frame(maxWidth:infinity,alignment:leading)
}
Text("(entry.quotes.date) at (entry.quotes.place) ")
.font(.system(size: 12))
.foregroundColor(.灰色)
.frame(maxWidth:infinity,alignment:trailing)
.frame(高度： 20，对齐方式：bottom)
})
.frame(maxWidth:infinity, maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/,alignment:center).padding(16)
}笔记！systemSmall（小型组件）仅支持widgetURL，而systemMedium（中型组件）和systemLarge（大型组件）均支持。链接：更希望的是不同元素的点击响应。
在主项目的SceneDelegate 代理方法中接收回调- (void)scene:(UIScene *)scene openURLContexts:(NSSet*)URLContexts {
///根据不同的URL回调进行响应
NSLog(@"%@",URLContexts);
}
4：部分代码和方法注释
1：默认模板代码注释
提供占位符方法作为没有特定属性的通用可视化视图。 func placeholder(in context: Self.Context) -Self.Entry 提供表示当前时间和状态的视图，可以理解为false 或者供用户临时选择组件的显示信息。数据可以显示在“添加小部件”页面上。 func getSnapshot(in context: Self.Context,completion: @escaping (Self.Entry) -Void) 提供了一个视图更新数组，或者与上述方法相反的实际数量的信息，通过时间轴显示。可以设置更新时间。下面的refreshDate 定义告诉组件每5 分钟重新加载一次。 func getTimeline(in context: Self.Context,completion: @escaping (Timeline) -Void)
///这是更新时间5分钟
让refreshDate=Calendar.current.date（通过添加：分钟，value: 5，to: currentDate）！笔记！苹果原始文档中有一段话
显示动态日期
由于您的小部件扩展并不总是运行，因此您无法直接更新小部件的内容。相反，WidgetKit 代表您呈现小部件的视图并显示结果。但是，某些SwiftUI 视图允许您在小部件可见时显示持续更新的内容。
由于您的小部件扩展并不总是运行，因此您无法直接更新小部件的内容。相反，WidgetKit 代表您呈现小部件的视图并显示结果。但是，某些SwiftUI 视图允许您在小部件可见时显示持续更新的内容。
这使得无法预测Widget 何时更新。即使你让时间轴本身在上面设置的5 分钟后再次更新，也不能保证iOS 会同时更新视图。这会导致Widget页面的更新有一定的延迟。
Apple 提供了一个单独的方法来重新加载所有小部件///控制所有配置的小部件的重新加载时间线
///包含应用程序。
WidgetCenter.shared.reloadAllTimelines()
2：对于支持多个Widget和小、大、中页面数据布局的思考？
在检查Apple API 之前，我有两件事感到困惑？
如何定义多个Widget，小中大布局完全不同。是否可以通过单个扩展项目来实现？
数据定义和更新
通过上面默认方法的引入，已经解决了第二个问题。
iOS14中的Widget支持通过创建扩展项目来返回一个或多个Widget，这使得您的应用程序可以提供多种Widget选择。并且在项目中，视图可以通过WidgetFamily枚举来定制自己想要的组件和布局。
WidgetFamily 枚举public enum WidgetFamily : Int, RawRepresentable, CustomDebugStringConvertible, CustomStringConvertible {
///一个小部件。
案例系统小
///一个中等大小的小部件。
案例系统中
///一个大的小部件。
案例系统大
}可以通过修改原来的Widget入口文件方法，添加更多的配置来支持多个Widget：@main
结构SwiftWidgetsBundle: WidgetBundle {
@WidgetBundleBuilder
var body: 一些小部件{
小部件1()
小部件2()
小部件3()
小部件4()
.
}
}
5：样式/演示
在编写Widget的过程中，你可以直观地查看你的组件的预览，就像你开发SwiftUI时，你可以实时Resume一样。组件预览WidgetDemo 完整演示组件并点击响应演示
6：项目地址
欢迎下载WidgetDemo 查看更多演示项目中的源代码。
项目github地址：iOS14WidgetDemo
新的Widget组件还支持用户配置（包括配置意图）。演示中没有演示这一点。以后如果有需要的话我会更新的。
4：参考文献
Apple 小部件
小工具包
小部件已更新
制作可配置的小部件
如何在iOS 14 中使用Swift 创建小部件
5：总结
更新到iOS14后，无论是用户体验还是组件开发过程都更加流畅。除了改用SwiftUI的开发时间成本之外，完成项目组件的最新形态还是很有吸引力的，而且开发起来也很舒服。
新的小部件玩具感觉很强大，感觉还有很多东西需要更新和补充。
关于探索iOS14 Widget新功能：全新交互体验分享到此分享完毕，希望能帮助到您。
【探索iOS14 Widget新功能：全新交互体验分享】相关文章：
2.米颠拜石
3.王羲之临池学书
8.郑板桥轶事十则
用户评论
终于可以自定义widget了！感觉手机桌面一下子有了不少变化。
有11位网友表示赞同！
这个新的Weather widget看起来真不错啊，数据一目了然。
有14位网友表示赞同！
试了一下音乐播放的widget，真的很方便直接控制歌曲了。
有19位网友表示赞同！
希望开发者们能多多开发有趣的widget，让手机更实用.
有5位网友表示赞同！
之前一直想有个提醒我喝水的widget，现在终于实现啦!
有12位网友表示赞同！
不知道这个iOS14更新会对电池续航有啥影响呢？
有11位网友表示赞同！
听说Widget还能用快捷指令个性化设置，期待进一步体验。
有16位网友表示赞同！
感觉iOS14把手机主屏都变成了一块可定制的屏幕了。
有7位网友表示赞同！
这种widget设计很人性化，一 glance 就看得到自己需要的信息
有17位网友表示赞同！
这款iOS14 update 对我来说算是比较实用的更新吧。
有18位网友表示赞同！
想问问大家都用哪种widget最频繁？
有17位网友表示赞同！
这个Widget功能终于来了！之前一直羡慕安卓的手机
有19位网友表示赞同！
widget的设计蛮不错的，但还是希望苹果能提供更多内置样式选择
有11位网友表示赞同！
希望以后iOS系统能支持更多的widget类型，功能更强大
有16位网友表示赞同！
学习一下怎么设置自定义Widget，让我的手机桌面更个性化啦!
有15位网友表示赞同！
这个更新让我对iPhone又有了新的期待！
有7位网友表示赞同！
感觉iOS14把手机体验提升了一大截！
有13位网友表示赞同！
玩转widget需要一些时间和学习，总觉得好有成就感啊
有6位网友表示赞同！
iOS14 widget功能真是太棒了！强烈推荐大家体验。
有20位网友表示赞同！
期待未来苹果能继续完善这个功能!
有19位网友表示赞同！