手把手教你创建widget2

接上篇iOS Widget，这里介绍下WidgetBundle的用法和怎么做一个支付宝类似的 widget，上篇里把WidgetBundle写成了WidgetGroup，我的错。

WidgetBundle 的用法

再来回顾一下什么情况下使用 WidgetBundle，上篇里介绍了supportedFamilies，可以设置Widget 不同的尺寸，比如Small、Meidum、Large等，但是如果想要多个同尺寸的 Widget ，比如：想要两个Small尺寸的 Widget ，类似于下面东方财富 Widget 的效果，就需要用WidgetBundle，设置多个Widget。

WidgetBundle的使用不难，下面来看下，上篇最后的代码（可以去https://github.com/mokong/WidgetAllInOne下载，打开 Tutorial2），只显示了一个 Medium 尺寸的 Widget，这里修改为使用WidgetBundle显示两个Medium尺寸的 Widget。

新建SwiftUIView，命名为WidgetBundleDemo，步骤如下：

导入WidgetKit
修改main入口为WidgetBundleDemo
修改WidgetBundleDemo类型为WidgetBundle
修改body类型为Widget

代码如下：


import SwiftUI
import WidgetKit

@main
struct WidgetBundleDemo: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
        DemoWidget()
        DemoWidget()
    }
}

然后编译运行，failed，报错是xxx... error: 'main' attribute can only apply to one type in a module，意思是，一个module中只有有一个@main，标记程序入口，所以需要移除多余的@main，那哪里有呢，在DemoWidget.swift中，因为之前main入口是DemoWidget，而现在的main入口是上面新建的WidgetBundleDemo，所以需要移除DemoWidget中的@main，移除后再次运行查看效果，发现添加Widget的预览中出现两个一模一样的Medium尺寸的Widget。

Wait，上篇里说过，不同的Widget左右滑动的时候，上面的title和desc也是会跟着滑，为什么这里没有跟着滑？

确实是，嗯，应该是标题和内容一样的原因，一起来验证下，首先在DemoWidget中添加title和desc的属性，如下：


struct DemoWidget: Widget {
    let kind: String = "DemoWidget"

    var title: String = "My Widget"
    var desc: String = "This is an example widget."
    
    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            DemoWidgetEntryView(entry: entry)
        }
        .configurationDisplayName(title) // 控制Widget预览中Title的显示
        .description(desc) // 控制Widget预览中Desc的显示
        .supportedFamilies([WidgetFamily.systemMedium])
    }
}

然后修改引用DemoWidget的地方，即WidgetBundleDemo类中，传入不同的标题和描述，如下：


import SwiftUI
import WidgetKit

@main
struct WidgetBundleDemo: WidgetBundle {
    @WidgetBundleBuilder
    var body: some Widget {
        DemoWidget(title: "同步助手", desc: "这是QQ同步助手Widget")
        DemoWidget(title: "支付宝", desc: "这是支付宝Widget")
    }
}

再次运行，查看效果，就会发现title和desc也移动了，效果如下：

很简单是不是，WidgetBundle的使用就是上面的用法，但是这里需要说明一点，WidgetBundle中放的都是Widget，而每个Widget都有自己Entry和Provider，即：WidgetBundle中的每个Widget都需要实现类似DemoWidget的方法和内容。

然后来实现如下支付宝小组件的效果：