Lição: 138: ReactiveSwift e SwiftUI
Nesta aula, vamos explorar como usar ReactiveSwift com SwiftUI para criar uma aplicação reativa. O ReactiveSwift é um framework poderoso que permite a programação reativa funcional em Swift. Combiná-lo com SwiftUI nos permite criar interfaces de usuário dinâmicas e responsivas.
Começando
Antes de começarmos a codificar, certifique-se de que você adicionou ReactiveSwift e ReactiveCocoa ao seu projeto. Você pode fazer isso incluindo o seguinte em seu Package.swift
, se estiver usando o Swift Package Manager:
dependencies: [
.package(url: "https://github.com/ReactiveCocoa/ReactiveSwift.git", from: "6.0.0"),
.package(url: "https://github.com/ReactiveCocoa/ReactiveCocoa.git", from: "6.0.0")
]
Conceitos Básicos
O ReactiveSwift permite que você crie sinais que emitem valores ao longo do tempo. Usaremos Signal
e SignalProducer
para lidar com eventos assíncronos e vinculá-los às nossas views SwiftUI.
Criando uma View Reativa Simples
Vamos criar um aplicativo SwiftUI simples para demonstrar o poder do ReactiveSwift. Nossa aplicação terá um campo de texto onde os usuários podem digitar seus nomes e um botão para cumprimentá-los.
Passo 1: Criar o View Model
Primeiro, precisamos de um View Model para gerenciar nossa lógica de negócios usando ReactiveSwift.
import ReactiveSwift
import SwiftUI
class GreetingViewModel: ObservableObject {
@Published var name: String = ""
@Published var greeting: String = "Olá, Mundo!"
private var (greetingSignal, greetingObserver) = Signal<String, Never>.pipe()
init() {
// Observar mudanças na propriedade name
self.$name
.combineLatest(greetingSignal)
.map { name, _ in
name.isEmpty ? "Olá, Mundo!" : "Olá, \(name)!"
}
.observeValues { [weak self] greeting in
self?.greeting = greeting
}
}
func greet() {
greetingObserver.send(value: name)
}
}
Passo 2: Criar a View SwiftUI
Agora podemos criar uma view SwiftUI que usa nosso GreetingViewModel
.
struct ContentView: View {
@StateObject private var viewModel = GreetingViewModel()
var body: some View {
VStack {
TextField("Digite seu nome", text: $viewModel.name)
.padding()
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()
Button(action: {
viewModel.greet()
}) {
Text("Cumprimentar")
.padding()
.background(Color.blue)
.foregroundColor(.white)
.cornerRadius(8)
}
Text(viewModel.greeting)
.padding()
}
.padding()
}
}
Passo 3: Configurar o App
Por último, precisamos configurar o ponto de entrada do nosso aplicativo SwiftUI.
@main
struct ReactiveSwiftSwiftUIApp: App {
var body: some Scene {
WindowGroup {
ContentView()
}
}
}
Explicação do Código
-
ViewModel:
- A classe
GreetingViewModel
conforma-se ao protocoloObservableObject
para que o SwiftUI possa observá-la em busca de alterações. - As propriedades
name
egreeting
são definidas como@Published
, o que significa que o SwiftUI atualizará automaticamente a UI quando elas mudarem. - Criamos um
Signal
e umSignalObserver
para ouvir alterações no nome e atualizar a saudação de acordo.
- A classe
-
View SwiftUI:
- Na
ContentView
, criamos um campo de texto para a entrada do usuário e um botão para acionar a saudação. - O
Button
utiliza a funçãogreet
do view model, que atualiza a mensagem de saudação.
- Na
Conclusão
Nesta aula, combinamos o poder do ReactiveSwift com SwiftUI para construir uma aplicação reativa simples. Definimos um view model que reage à entrada do usuário e atualiza a interface do usuário de forma suave. Isso é apenas o começo; o ReactiveSwift oferece muitos recursos poderosos que podem ajudar a gerenciar estados complexos e eventos assíncronos.
Sinta-se à vontade para explorar mais e aprimorar o exemplo com funcionalidades adicionais, como validação de entrada ou observáveis mais complexos!