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

上一篇【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 *)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;
}

支持网易云桌面小组件的开发已经全部完成了。

最后

通过上面四篇文章的学习，我们已经完全掌握了小组件开发的基本要素，如果你还有问题，欢迎随时提问。

参考资料

网易云音乐 iOS 14 小组件实战手册