引言

  本節作為小元件基礎介紹的最後一個章節，前面都沒有提到如何支援多個小元件，預設新建一個元件Target，就有大中小三個元件。如果你是為已經存在的App開發一個小元件功能，那麼可能你不會需要那麼多小元件。但是也有的App需要支援很多個小元件，也可能是無限個。

  要實現支援多個小元件，需要使用到WidgetBundle，自定義一個WidgetBundle並改變小元件的初始化入口。

預設小元件入口

@main
struct Widget1: Widget {
  // 小元件的唯一ID
  let kind: String = "Widget1"

  var body: some WidgetConfiguration {
    // 建立時不勾選 “Include Configuration Intent”，這裡使用 StaticConfiguration
    StaticConfiguration(kind: kind, provider: Provider()) { entry in
      Widget1EntryView(entry: entry) // 小元件UI
    }
    .supportedFamilies([.systemSmall, .systemMedium, .systemLarge]) // 配置該元件支援的尺寸，如果不配置，預設是大中小都支援
    .configurationDisplayName("元件標題")  // 在新增元件預覽介面顯示
    .description("元件描述")         // 在新增元件預覽介面顯示
  }
}
 

通過WidgetBundle實現多個元件

//@main 這個註解去掉
struct Widget1: Widget {
  // 小元件的唯一ID
  let kind: String = "Widget1"

  var body: some WidgetConfiguration {
    // 建立時不勾選 “Include Configuration Intent”，這裡使用 StaticConfiguration
    StaticConfiguration(kind: kind, provider: Provider()) { entry in
      Widget1EntryView(entry: entry) // 小元件UI
    }
        // // 配置該元件支援的尺寸，如果不配置，預設是大中小都支援
    .supportedFamilies([.systemSmall, .systemMedium, .systemLarge]) 
    .configurationDisplayName("元件標題")  // 在新增元件預覽介面顯示
    .description("元件描述")         // 在新增元件預覽介面顯示
  }
}

@main  // 把自定的WidgetBundle作為小元件的初始化入口
struct CustomWidgetBundle: WidgetBundle {
  @WidgetBundleBuilder
  var body: some Widget {
    Widget1()
    Widget1()
    Widget1()
    Widget1()
    Widget1()
  }
}
 

實現N個小元件

方法一：使用多個WidgetBundle（每個WidgetBundle的body最多放5個Child）

@main  // 把自定的WidgetBundle作為小元件的初始化入口
struct CustomWidgetBundle: WidgetBundle {
    // 每個WidgetBundle的body最多放5個Child
  @WidgetBundleBuilder
  var body: some Widget {
    Widget1()
    Widget1()
    Widget1()
    Widget1()
    CustomWidgetBundle1().body
  }
}

struct CustomWidgetBundle1: WidgetBundle {
  @WidgetBundleBuilder
  var body: some Widget {
    Widget1()
    Widget1()
    Widget1()
    Widget1()
    CustomWidgetBundle2().body
  }
}

struct CustomWidgetBundle2: WidgetBundle {
  @WidgetBundleBuilder
  var body: some Widget {
    Widget1()
    Widget1()
    Widget1()
    Widget1()
    Widget1()
  }
}
 

  Widget1支援3個元件，上面的程式碼總共13 * 3 = 39個元件，我也不知道有沒有上限。選擇元件的時候，這些元件都會出現在預覽列表

方法二：使用固定的Widget數量（大中小各一個），通過型別切換佈局達到目的

@main  // 把自定的WidgetBundle作為小元件的初始化入口
struct CustomWidgetBundle: WidgetBundle {
 
  @WidgetBundleBuilder
  var body: some Widget {
    WidgetSmall()
    WidgetMedium()
    WidgetLarge()
  }
}

  通過外部切換元件型別達到實現多個元件的目的，原理這裡不再贅述，可參考章節《 IOS Widget（4-2）：建立可配置小元件（動態修改配置資料）》。這裡你可能遇到一個問題：編輯一個小號元件切換型別時，裡面的資料需要全部是小號型別的元件，編輯中號大號時也需要對應各自的型別。希望學到這裡，你能獨自解決這個問題，如還不能解決，可留言。

結語

  小元件入門之旅結束了，希望通過本系列文章能起到拋磚引玉的效果，感謝讀者。