Alternar SwiftUI: um guia completo

Um SwiftUI Toggle é um elemento de UI comum que permite aos usuários alternar entre estados. Muitas vezes ativa ou desativa um valor de ligação e é comumente usado para configurações ou escolhas binárias.

Neste guia, explicarei tudo o que você precisa saber sobre um Toggle no SwiftUI: desde o básico até personalização, acessibilidade e padrões de uso no mundo real.

O básico de uma alternância SwiftUI

Um SwiftUI Toggle é inicializado com um rótulo e uma ligação a um valor booleano. Quando o usuário aciona a chave, o valor vinculado é atualizado automaticamente. Um exemplo de código é o seguinte:

struct ContentView: View {
    @State private var isEnabled = false
        
    var body: some View {
        Toggle("Enable Feature", isOn: $isEnabled)
    }
}

O rótulo “Ativar recurso” é exibido próximo ao switch. O isOn atualizações de propriedades $isEnabled sempre que o valor muda. Isso funciona de duas maneiras:

• Se você atualizar isEnabled do código, o switch será atualizado
• Se você virar o interruptor, isEnabled irá atualizar

Em termos de UI, o exemplo acima é o seguinte:

Usando um rótulo personalizado

Por padrão, Toggle oferece suporte a texto, mas você pode usar qualquer visualização como rótulo. Por exemplo, isto é o que eu uso no RocketSim:

Toggle(isOn: $isEnabled) {
    HStack {
        Image(systemName: "airplane")
        Text("Simulator Airplane Mode")
    }
}

Isso permite criar uma experiência mais rica e dinâmica que responde às mudanças de estado.

Usando Alterna sem rótulos

Em alguns casos, você não deseja mostrar nenhum rótulo. Neste caso, você pode usar o labelsHidden() Edição SwiftUI:

Toggle("", isOn: $isEnabled)
    .labelsHidden()

Considerações de acessibilidade

As alternâncias vêm automaticamente com características de acessibilidade, mas se você ocultar rótulos, certifique-se de fornecer contexto:

Toggle("", isOn: $isEnabled)
    .labelsHidden()
    .accessibilityLabel("Enable Feature")

Isso garante que recursos como o VoiceOver ainda entendam o que a alternância faz. No entanto, você pode fazer o mesmo usando apenas o rótulo de alternância:

Toggle("Enable Feature", isOn: $isEnabled)
    .labelsHidden()

Pois irá definir o rótulo de acessibilidade de acordo usando o texto de entrada “Ativar recurso”.

Usando estilos de alternância personalizados no SwiftUI

SwiftUI vem com estilos integrados para alternância. O padrão SwitchToggleStyle é o que você viu na imagem acima. Você pode configurá-lo de duas maneiras:

Toggle("Enable Feature", isOn: $isEnabled)
    .toggleStyle(SwitchToggleStyle())

    /// Or:
    .toggleStyle(.switch)

Este último é mais moderno e utiliza pesquisa estática de membros em contextos genéricos. Existem vários estilos para escolher:

• botão: um estilo de alternância exibido como um botão com seu rótulo como título.
• trocar: um estilo de alternância que exibe um rótulo inicial e uma opção final.
• caixa de seleção: um estilo de alternância que exibe uma caixa de seleção seguida de seu rótulo (disponível apenas no macOS).
• automático: Usos caixa de seleção no macOS, trocar em todas as outras plataformas.

Embora você possa usar uma caixa de seleção no macOS, está se tornando mais comum usar um estilo de troca lá também.

Alternadores de agrupamento em formulários

As alternâncias são frequentemente usadas dentro de um SwiftUI Formespecialmente para telas de configurações:

Form {
    Section("Notifications") {
        Toggle("Enable Push Notifications", isOn: $isEnabled)
        Toggle("Play Sound", isOn: $playSound)
    }
}

UM Form oferece um estilo automático que se sente em casa, por exemplo, nas configurações do iOS ou do macOS. Por exemplo, é assim que as configurações do macOS Tahoe para RocketSim utilizam um formulário e alterna:

Avançado: vinculação ao estado derivado

Você nem sempre precisa se vincular diretamente a um @State propriedade. As alternâncias também podem ser vinculadas a ligações computadas usando o Binding inicializador da seguinte forma:

Toggle("Simulator Airplane Mode", isOn: Binding(
    get: {
        UserDefaults.standard.bool(forKey: "simulator_airplane_mode")
    },
    set: { newValue in
        UserDefaults.standard.set(newValue, forKey: "simulator_airplane_mode")
    }
))

Embora, neste caso, seja obviamente melhor usar @AppStorage. Porém, demonstra bem a ideia!

Conclusão

Um SwiftUI Toggle permite aos usuários alternar entre estados. É um elemento de UI comum em todas as plataformas e uma ótima maneira de fornecer configurações no aplicativo. Usando estilos padrão e rótulos personalizados, você poderá usá-los de uma maneira que se adapte ao estilo do seu aplicativo.

Se você quiser melhorar ainda mais seu conhecimento sobre SwiftUI, confira a página da categoria SwiftUI. Sinta-se à vontade para entrar em contato comigo ou me twittar no Twitter se você tiver alguma dica ou feedback adicional.

Obrigado!