Lição: 109: Criando Widgets com SwiftUI
Nesta aula, vamos explorar como criar widgets simples usando o SwiftUI. Os widgets são uma ótima maneira de apresentar informações rapidamente, sem a necessidade de abrir um aplicativo. Abordaremos o básico da criação de um widget e sua integração com um aplicativo SwiftUI existente.
O que é um Widget?
Um widget é uma pequena visualização que exibe informações do seu aplicativo na tela inicial ou na visualização Hoje. Widgets podem mostrar dados como informações meteorológicas, contagens regressivas ou lembretes. Com o SwiftUI, criar um widget é simples e permite um grande nível de personalização.
Começando
Para criar um widget em seu aplicativo SwiftUI, você precisa adicionar um novo alvo para o widget. Siga estes passos:
- Abra seu projeto no Xcode.
- Vá em
Arquivo
->Novo
->Alvo
. - Selecione
Extensão de Widget
. - Dê um nome ao seu widget (por exemplo, "MeuPrimeiroWidget") e clique em
Concluído
.
O Xcode gerará uma nova pasta contendo o código padrão para seu widget.
Criando um Widget Básico
Aqui está como criar um widget simples que exibe uma mensagem de saudação. Vamos utilizar o framework WidgetKit
juntamente com o SwiftUI.
Passo 1: Defina a Estrutura do Widget
Navegue até a pasta do widget gerada e abra o arquivo MeuPrimeiroWidget.swift
. Você começará com o seguinte código:
import WidgetKit
import SwiftUI
struct MeuPrimeiroWidget: Widget {
let kind: String = "MeuPrimeiroWidget"
var body: some WidgetConfiguration {
StaticConfiguration(kind: kind, provider: SimpleEntryProvider()) { entry in
MeuPrimeiroWidgetEntryView(entry: entry)
}
.configurationDisplayName("Meu Primeiro Widget")
.description("Este é um widget simples que mostra uma saudação.")
}
}
Passo 2: Crie o Provedor de Linha do Tempo
O provedor de linha do tempo é responsável por fornecer dados ao widget. Você pode criar uma entrada simples usando uma struct:
struct SimpleEntry: TimelineEntry {
let date: Date
let configuration: ConfigurationIntent
let greeting: String
}
struct SimpleEntryProvider: TimelineProvider {
func placeholder(in context: Context) -> SimpleEntry {
SimpleEntry(date: Date(), configuration: ConfigurationIntent(), greeting: "Olá, Widget!")
}
func getSnapshot(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (SimpleEntry) -> ()) {
let entry = SimpleEntry(date: Date(), configuration: configuration, greeting: "Olá, Widget!")
completion(entry)
}
func getTimeline(for configuration: ConfigurationIntent, in context: Context, completion: @escaping (Timeline<SimpleEntry>) -> ()) {
let entries: [SimpleEntry] = [
SimpleEntry(date: Date(), configuration: configuration, greeting: "Olá, Widget!"),
SimpleEntry(date: Calendar.current.date(byAdding: .minute, value: 5, to: Date())!, configuration: configuration, greeting: "Olá novamente!"),
]
let timeline = Timeline(entries: entries, policy: .atEnd)
completion(timeline)
}
}
Passo 3: Crie a Visualização do Widget
Agora, vamos projetar a visualização do seu widget usando SwiftUI:
struct MeuPrimeiroWidgetEntryView: View {
var entry: SimpleEntry
var body: some View {
Text(entry.greeting)
.font(.headline)
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
}
Passo 4: Atualize o Widget
Para garantir que seu widget seja atualizado periodicamente, verifique se sua função getTimeline
no SimpleEntryProvider
gera entradas com datas futuras.
Passo 5: Execute Seu Widget
Para testar seu widget recém-criado, você pode executar o aplicativo e adicionar o widget na tela inicial do seu dispositivo ou simulador. Pressione e segure a tela inicial, toque no botão "+", e busque pelo seu widget pelo nome.
Conclusão
Nesta aula, você aprendeu o básico sobre como criar um widget com SwiftUI usando o framework WidgetKit. Você pode personalizar ainda mais seu widget incorporando dados dinâmicos e adicionando interações. Widgets podem aumentar significativamente a visibilidade e funcionalidade do seu aplicativo, proporcionando aos usuários acesso rápido a informações essenciais.
Com esta base, sinta-se à vontade para explorar recursos mais complexos, como opções de configuração do usuário e integração de dados ao vivo. Boa codificação!