【WidgetKit】ウィジェットのサイズによってデザインを変えるには？

2023年11月12日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

WidgetKitのデザインをウィジェットのサイズに応じて変更したい場合、ウィジェットのファミリータイプで分岐させてデザインをカスタマイズできます。

ファミリータイプは、.systemSmall、.systemMedium、.systemLargeなどの異なるサイズを表します。

以下、ファミリータイプに基づいてデザインを変更する方法の例です。

import WidgetKit
import SwiftUI

@main
struct MyWidget: Widget {
    let kind: String = "MyWidget"

    var body: some WidgetConfiguration {
        StaticConfiguration(kind: kind, provider: Provider()) { entry in
            MyWidgetView(entry: entry)
        }
        .configurationDisplayName("My Widget")
        .supportedFamilies([.systemSmall, .systemMedium, .systemLarge]) // サポートするサイズ
    }
}

struct MyWidgetView: View {
    @Environment(\.widgetFamily) var widgetFamily // ファミリータイプを取得

    var entry: Provider.Entry

    var body: some View {
        switch widgetFamily {
        case .systemSmall:
            return AnyView(smallWidgetView(entry: entry))
        case .systemMedium:
            return AnyView(mediumWidgetView(entry: entry))
        case .systemLarge:
            return AnyView(largeWidgetView(entry: entry))
        default:
            return AnyView(Text("Unsupported widget size"))
        }
    }

    // Smallサイズの場合のデザイン
    func smallWidgetView(entry: Provider.Entry) -> some View {
        return Text("Small Widget Content")
    }

    // Mediumサイズの場合のデザイン
    func mediumWidgetView(entry: Provider.Entry) -> some View {
        return Text("Medium Widget Content")
    }

    // Largeサイズの場合のデザイン
    func largeWidgetView(entry: Provider.Entry) -> some View {
        return Text("Large Widget Content")
    }
}