【iOS14】仿网易云桌面小组件（一）

随着iOS14的发布，WidgetKit也应运而生，替换了以前的Today Extension，各大APP也都开始适配iOS14，为APP增加桌面小组件，最近发现网易云也增加了桌面小组件的功能，觉得还不错，就模仿着写一下。

看完本篇文章后你将学会以下几点：
1、创建WidgetExtension，运行系统默认小组件
2、使用SwiftUI搭建小组件界面，并实时预览效果
3、实现如下效果的小组件

网易云【小】

1、创建WidgetExtension

在Xcode项目中点击File->New->Target，搜索Widget，选中Widget Extension

widget创建

点击Next，输入名称，这里用GKWYWidget

widget创建

这里的Include Configuration Intent是为小组件增加可编辑功能，如果勾选上长按小组件就会出现编辑小组件的选项，这里暂时不勾选。然后点击Finish，小组件就创建完成了。
运行项目，就可以看到系统默认为我们创建的小组件

默认小组件

2、使用SwiftUI搭建小组件界面

右键GKWYWidget，创建SwiftUI View文件，命名为GKWYWidgetView，这时候点击右边的预览会出现缺少previewContext，这里我们用小组件的方式预览，导入WidgetKit，import WidgetKit，然后加入WidgetPreviewContext，如下

struct GKWYWidgetView_Previews: PreviewProvider {
    static var previews: some View {
        GKWYWidgetView()
            .previewContext(WidgetPreviewContext(family: .systemSmall))
    }
}

这时候点击预览就会出现下面的效果：

hello world preview

下面开始搭建界面，修改GKWYWidgetView为以下代码：

struct GKWYWidgetView: View {
    var body: some View {
        // 通过GeometryReader获取view的尺寸
        GeometryReader { geo in
            ZStack(alignment: .bottomLeading) {
                // 添加背景图
                Image("background")
                    .resizable()
                // 添加阴影
                LinearGradient(gradient: Gradient(colors: [Color.black.opacity(0.15), Color.black.opacity(0.35)]), startPoint: .top, endPoint: .bottom)
                // 添加logo
                Image("cm2_clock_logo")
                    .resizable()
                    .scaledToFill()
                    .frame(width: 20, height: 20)
                    .position(x: geo.size.width - (20/2) - 10, y: (20/2) + 10)
                    .ignoresSafeArea(.all)
                // 添加左下角的图标及文字
                VStack(alignment: .leading, spacing: 5) {
                    HStack() {
                        Image("cm4_disc_type_list")
                            .resizable()
                            .frame(width: 20, height: 20)
                        Text("私人雷达")
                            .font(.system(size: 16))
                            .foregroundColor(.white)
                    }
                    
                    Text("探索另类音乐宝藏")
                        .font(.system(size: 14))
                        .foregroundColor(.white)
                }.padding()
            }
        }
    }
}

然后点击右边的预览，效果图如下：

小组件预览

到这里，通过SwiftUI创建小组件界面就已经完成了。

3、实现小组件

上面代码已经写好，要实现小组件就很简单了，只需要把GKWYWidget里面的GKWYWidgetEntryView修改为下面的即可

struct GKWYWidgetEntryView : View {
    var entry: Provider.Entry

    var body: some View {
        GKWYWidgetView()
    }
}

然后运行项目，小组件就可以显示出来了，如下：

小组件

下面简单介绍下系统widget里面的类

Provider

Provider：为小组件展示提供一切必要信息的结构体，实现TimelineProvider协议，需要实现三个方法，
placeholder：提供一个默认的视图，当网络数据请求失败或者其他一些异常的时候，用于展示
getSnapshot：为了在小部件库中显示小部件，WidgetKit要求提供者提供预览快照，在组件的添加页面可以看到效果
getTimeline：在这个方法内可以进行网络请求，拿到的数据保存在对应的entry中，调用completion之后会到刷新小组件

SimpleEntry

实现TimelineEntry协议，就是用来保存所需要的数据

GKWYWidgetEntryView

这个结构体就是我们需要用来展示的视图View，这里可以进行各种界面搭建

GKWYWidget

@main：代表着Widget的主入口，系统从这里加载
kind：是Widget的唯一标识
StaticConfiguration：初始化配置代码
configurationDisplayName：添加编辑界面展示的标题
description：添加编辑界面展示的描述内容
supportedFamilies这里可以限制要提供三个样式中的哪几个

GKWYWidget_Previews

小组件的预览结构体，实现PreviewProvider协议，在这里可以实现快速预览小组件的效果
WidgetPreviewContext：可实时预览小组件的结构体，支持三种样式的小组件效果

最后

到这里，网易云小组件的简单搭建就完成了，后面将会为你介绍通过网络请求来获取数据，显示不同内容。
---敬请期待

参考资料
iOS14 Widget小组件开发实践1——了解Widget
网易云音乐 iOS 14 小组件实战手册