Meio Ambiente

• macOS Monterey versão 12.4
• Xcode versão 14.0 (14A309)
• iOS 16.0

Se é a primeira vez que você está desenvolvendo Widgets para iOS, recomendo que leia sobre como criar uma extensão de widget . Neste artigo, focarei minha explicação em como desenvolver um widget de tela de bloqueio e não abordarei como o WidgetKit funciona, mas com certeza ajudará você a entender como desenvolver widgets mais complexos.

Documentação da Apple: Criando widgets de tela de bloqueio

WWDC2022: Complicações e widgets: Recarregado

O que são os widgets da tela de bloqueio?

Inspirado no mostrador do Apple Watch que você segura por muito tempo para entrar no editor, agora você pode pressionar e segurar a tela de bloqueio do seu iPhone para entrar na nova interface de edição, permitindo que você personalize sua tela de bloqueio e adicione widgets.

Vamos começar a implementar um widget na tela de bloqueio!

1 — Adicionar extensão de widget ao seu projeto

Se você é novo no iOS Widgets, primeiro você precisa adicionar um novo destino ao seu projeto.

File > New > Target

Na guia iOS, procure por Widget Extension.

Adicione o nome do seu produto (LockScreenWidget para este exemplo) e clique no Finishbotão. O Xcode pode solicitar que você ative o esquema, clique em Activate.

Um novo destino deve ter sido adicionado ao seu projeto.

2 — Vamos adicionar novas famílias de widgets

Em primeiro lugar, na configuração do Widget, vamos adicionar um modificador de família compatível .supportedFamilies()e como parâmetro as 3 novas famílias.supportedFamilies([.accessoryCircular, .accessoryInline, .accessoryRectangular])

Os widgets já tinham famílias diferentes e os widgets da tela de bloqueio são 3 novas famílias adicionadas à lista:

• WidgetFamília.acessórioCircular
• WidgetFamily.accessoryRetangular
• WidgetFamily.accessoryInline

NOTA : Se você quiser ver seu widget diretamente na visualização, o que você precisa fazer é alterar a família WidgetPreviewContext para aquela que você deseja mostrar. Para ter uma organização limpa recomendo que você adicione o nome do seu Widget para esta família no .previewDisplayName()modificador.

struct LockScreenWidget_Previews: PreviewProvider {
    static var previews: some View {
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryCircular))
	    .previewDisplayName("Accessory Circular")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryInline))
            .previewDisplayName("Accessory Inline")
		
        LockScreenWidgetEntryView(entry: SimpleEntry(date: Date()))
            .previewContext(WidgetPreviewContext(family: .accessoryRectangular))
	    .previewDisplayName("Accessory Rectangular")
    }
}

3 — Crie visualizações para essas 3 novas famílias

Dependendo do tamanho, você pode querer exibir um conteúdo diferente. Então, vamos pegar o widgetFamilydo ambiente.

struct LockScreenWidgetEntryView : View {
    @Environment(\\.widgetFamily) var widgetFamily // Here
    var entry: Provider.Entry
	
    var body: some View {
        Text(entry.date, style: .time)
    }
}

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
    case .accessoryRectangular:
        // A rectangular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
    case .accessoryCircular:
        // A circular widget.
        // <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
    default:
        Text("Size not implemented yet.")
}

Mas aqui está um exemplo de conteúdo com valores codificados:

switch family {
    case .accessoryInline:
        // A flat widget that contains a single row of text and an optional image.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryinline>
        HStack {
            Text("Sunrise")
            Image(systemName: "sunrise")
  	}
    case .accessoryRectangular:
	// A rectangular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessoryrectangular>
	Gauge(value: 21, in: 16...30) {
	    Text("")
	} currentValueLabel: {
	    Text("")
	} minimumValueLabel: {
	    Text("16")
	} maximumValueLabel: {
	    Text("30")
	}
	.gaugeStyle(.accessoryLinear)
    case .accessoryCircular:
	// A circular widget.
	// <https://developer.apple.com/documentation/widgetkit/widgetfamily/accessorycircular>
	Gauge(value: 80, in: 0...100) {
	    Image(systemName: "drop.fill")
	}
	.gaugeStyle(.accessoryCircular)
    default:
        Text("Size not implemented yet.")
}

Para adicionar os widgets recém-criados, pressione e segure a tela de bloqueio e clique no botão personalizar.

Três seções diferentes devem aparecer na tela.

• A seção superior permite que você adicione o .accessoryInline()widget, ele será anexado à data.

• A seção do meio mostra apenas a personalização do tempo.
• A seção inferior permite adicionar um .accessoryRectangular()widget .accessoryCircular().