SwiftUI: O que são ViewModifiers?

O SwiftUI está rapidamente se tornando a escolha popular para criar aplicativos iOS, e uma das coisas mais comuns que você usa são os ViewModifiers. Se você já trabalhou com SwiftUI antes de ler isso e não sabe o que são ViewModifiers, garanto que já os usou antes sem perceber.

ViewModifiers são métodos que você chama nas Views que você usa em seu aplicativo para customizar sua aparência e comportamento. Você os usa para alterar cores e tamanhos, para adicionar gestos, para adicionar opções de acessibilidade etc às suas Views, se você já usou .backgroundou .foregroundColorem seu projeto, esses são exemplos de ViewModifiers.

Como você usa ViewModifiers?

Vamos começar criando um projeto, não vou aborrecê-lo com todo o processo, então certifique-se de selecionar SwiftUI em vez de Storyboard ao criar seu projeto.

A visualização padrão criada para você já usa alguns modificadores, então vamos dar uma olhada nisso

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

• .padding: permite que você especifique o preenchimento para sua exibição, observe que, como não fornecemos nenhum valor, ele aplica o preenchimento padrão do sistema para todos os lados. Você pode especificar as arestas e valores como este .padding(.top, 12)ou .padding(.horizontal, 12)por exemplo
• .foregroundColor: Irá definir a cor de primeiro plano para a visualização, afetando as cores do texto, matizes, etc.

• .frame: Usado para alterar o tamanho de uma visualização
• .font: Usado para alterar a família da fonte, tamanho etc.Text

Antes de começar, vamos revisar as restrições que queremos usar no botão — Padding, Corner radius, Background Color.

Vamos começar adicionando um botão simples com algum texto:

Button(action: {
    // On click
}) {
    Text("Label")
}

Depois de adicionar nossos modificadores:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

      
                

                    
                    
                
            

O exemplo acima é muito simples, mas se o seu projeto tiver muitas Views com estilos semelhantes (valores de preenchimento comuns, cores de fundo temáticas, etc.), pode ficar muito chato ter que repetir os mesmos modificadores rapidamente. Felizmente, o SwiftUI permite que você crie seus próprios modificadores personalizados.

Vamos considerar o exemplo acima, se você perceber que o texto do botão não corresponde exatamente ao que estávamos tentando construir. Vamos criar um modificador personalizado para o texto do botão:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

      
                

                    
                    
                
            

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()