上一篇【iOS14】仿网易云桌面小组件（三）给大家讲述了如何创建可编辑的小组件，这篇文章将从小组件的尺寸入手，增加中尺寸和大尺寸的小组件
通过本篇你就学到
1、根据WidgetFamily展示不同尺寸的小组件
2、根据WidgetBundle创建多个小组件
3、小组件的点击跳转及打开APP后的处理
中尺寸小组件
大尺寸小组件
1、WidgetFrmily展示不同尺寸小组件
以中尺寸为例，我们增加如下布局
struct GKWYMediumView: View {
let list: [GKWYData]
var body: some View {
GeometryReader { geo in
let itemWH = geo.size.height - 20
let data = list[0]
ZStack() {
HStack(alignment: .center, spacing: 10) {
GKWYItemView(data: data)
.frame(width: itemWH, height: itemWH)
VStack(spacing: 10) {
GKWYMenuView(data: list[1])
GKWYMenuView(data: list[2])
}
}
}
.padding(12)
.background(GKWYColorView(image: data.bgImage))
.cornerRadius(15)
}
}
}
然后修改GKWYWidgetEntryView如下，
struct GKWYWidgetEntryView : View {
@Environment(\.widgetFamily) var family: WidgetFamily
var entry: GKWYWidgetEntry
@ViewBuilder
var body: some View {
switch family {
case .systemSmall:
GKWYSmallView(data: entry.list[0])
case .systemMedium:
GKWYMediumView(list: entry.list)
case .systemLarge:
GKWYLargeView(list: entry.list)
default:
GKWYSmallView(data: entry.list[0])
}
}
}
运行小组件，我们将会看到如下界面
中尺寸组件
同样也具有编辑功能
中尺寸编辑
2、根据WidgetBundle创建多个小组件
我们在GKWYWidget中增加GKWYBundle，如下
@main
struct GKWYBundle: WidgetBundle {
var body: some Widget {
GKWYWidget()
GKWYWidget()
}
}
运行项目，就可以看到我们可以添加6个小组件
添加小组件
3、小组件的点击跳转及打开APP后的处理
小组件点击后只能打开APP，我们可以通过WidgetURL和Link来进行参数传递，且小尺寸组件只支持WidgetURL，中、大尺寸组件支持WidgetURL和Link
小尺寸中，我们通过widgetURL来实现参数传递
case .systemSmall:
GKWYSmallView(data: data).widgetURL(URL(string: (typePrefix + data.type)))
中、大尺寸中我们通过Link来实现参数传递
Link(destination: URL(string: (typePrefix + data.type))!) {
......
}
其中上面的typePrefix我定义的是GKWYWidget://com.wy.，所以我们需要在项目中添加scheme：GKWYWidget，然后再AppDelegate中实现下面的方法
- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
NSString *scheme = [url.scheme lowercaseString];
if ([scheme isEqualToString:@"gkwywidget"]) {
// 处理跳转后的逻辑
NSString *host = url.host;
if ([host isEqualToString:@"com.wy.music"]) { // 歌单推荐
}else {
// ...
}
return YES;
}
return YES;
}
支持网易云桌面小组件的开发已经全部完成了。
最后
通过上面四篇文章的学习，我们已经完全掌握了小组件开发的基本要素，如果你还有问题，欢迎随时提问。
