A capacidade de criar modificadores de exibição personalizados é um recurso poderoso no SwiftUI. Neste artigo, abordaremos exemplos de como esse recurso pode ser usado para tornar a construção da interface do usuário muito mais fácil. Se você não estiver familiarizado com ViewModifiers no   e como criar customizados, você pode ler sobre eles aqui SwiftUI  O objetivo deste artigo é cobrir algumas das diferentes maneiras de criar modificadores e estilos personalizados no SwiftUI e como eles podem ser usados para tornar a construção da interface do usuário mais declarativa e, ao mesmo tempo, obter uma saída final limpa e consistente.  A IU final que queremos construir é esta:    Vamos considerar todos os componentes individuais na tela:  Imagem: Um componente de imagem padrão com algum raio de canto  Textos: Temos um título e um corpo de texto  Botão: Um botão de largura total  Código SwiftUI simples  Se você construir esta tela sem nenhum modificador, o código ficaria mais ou menos assim:   struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .resizable() .aspectRatio(contentMode: .fill) .frame(minWidth: 0, maxWidth: .infinity) .frame(height: 220) .cornerRadius(12) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) Spacer() Button(action: { }) { Text("Label") .font(.system(size: 14, weight: .medium)) } .frame(minWidth: 0, maxWidth: .infinity) .padding(.horizontal, 10) .padding(.vertical, 12) .background(Color.blue) .foregroundColor(Color.white) .cornerRadius(12) } .padding(.all, 16) } }  Há alguns problemas com essa abordagem:  O estilo de alguns dos elementos (o título e os textos de detalhes, por exemplo) teria que ser duplicado  Alterações em alguns dos estilos comuns (preenchimento de elemento, raio de canto, etc.) teriam que ser feitas em vários lugares  Agora, você poderia resolver esse problema da maneira UIKit criando exibições personalizadas, mas não sou fã dessa abordagem porque envolvia afastar-se das exibições integradas e tornar a integração de novos membros da equipe mais friccional. Uma maneira mais fácil seria definir alguns modificadores de exibição universais que podem ser aplicados em vez dos próprios estilos.   Vamos detalhar o estilo comum de que precisamos:  Contêiner de tela: a tela em si possui preenchimento universal, isso é opcional, mas prefiro que todas as telas tenham um estilo universal  Raio de canto  Textos do título e do corpo  Largura total: os itens precisam preencher a largura de seu pai (o botão e a imagem no exemplo acima)  Estilo do botão  Escala de imagem  Modificadores de exibição personalizados  Vamos começar com o raio do canto:   struct CommonCornerRadius: ViewModifier { func body(content: Content) -> some View { content .cornerRadius(12) } }  Este é bastante simples, permite-nos aplicar um raio de canto universal para os elementos. Isso facilita a alteração de estilos de aplicativos globalmente sem a necessidade de criar exibições personalizadas ou fazer várias alterações na base de código.   struct FullWidthModifier: ViewModifier { func body(content: Content) -> some View { content .frame(minWidth: 0, maxWidth: .infinity) } }  Isso facilita a implementação de exibições de largura total, sem adicionar   manualmente! .frame   struct TitleTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("titleTextColor")) .font(.system(size: 20, weight: .bold)) } } struct BodyTextModifier: ViewModifier { func body(content: Content) -> some View { content .foregroundColor(Color("bodyTextColor")) .font(.system(size: 14, weight: .medium)) } }  Isso permitirá um estilo de texto comum, normalmente você criaria componentes de texto personalizados ou funções utilitárias e adicionaria componentes de interface do usuário por meio do código.   extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }  Tudo bem, você me entendeu... isso não é um modificador de exibição personalizado, mas uma extensão simples. Isso ocorre porque os ViewModifiers se aplicam às Views genéricas e algumas funções, como   , aplicam-se apenas a imagens. O uso de uma combinação de extensões e modificadores personalizados ajuda a contornar isso. resizable   struct FullWidthButtonStyle: ButtonStyle { func makeBody(configuration: Configuration) -> some View { configuration.label .fullWidth() .foregroundColor(Color.white) .font(.system(size: 14, weight: .medium)) .padding(.horizontal, 10) .padding(.vertical, 12) .background(configuration.isPressed ? Color.blue.opacity(0.2) : Color.blue) } } struct FullWidthButton: ViewModifier { func body(content: Content) -> some View { content .buttonStyle(FullWidthButtonStyle()) } }  Por fim, isso é para o botão, observe que, embora pudéssemos simplesmente criar um ViewModifier para obter o mesmo efeito, a aparência do botão não seria alterada quando tocada. Isso ocorre porque definir   em um botão o força a usar esse plano de fundo nos estados tocado e não tocado.   nos permite alterar a opacidade do botão com base no fato de ser pressionado ou não. .background ButtonStyle  Agora, por conveniência, gosto de fazer extensões que usam esses modificadores:   extension View { func commonCornerRadius() -> some View { modifier(CommonCornerRadius()) } func fullWidth() -> some View { modifier(FullWidthModifier()) } func title() -> some View { modifier(TitleTextModifier()) } func body() -> some View { modifier(BodyTextModifier()) } func fullWidthButton() -> some View { modifier(FullWidthButton()) } } extension Image { func aspectFill() -> some View { self .resizable() .aspectRatio(contentMode: .fill) } }  Agora vamos converter o código para usá-los em vez de estilizar diretamente:   struct ContentView: View { var body: some View { VStack (alignment: .leading) { Image("feature") .aspectFill() .fullWidth() .frame(height: 220) .commonCornerRadius() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI are the best!") .title() .padding(.bottom, 12) Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views") .body() Spacer() Button(action: { }) { Text("Awesome") } .fullWidthButton() .commonCornerRadius() } .padding(.all, 16) } }  Muito mais limpo! Agora, à primeira vista, isso parece mais código e esforço do que simplesmente definir manualmente os estilos, mas a longo prazo, isso economizará muito esforço. Pessoalmente, essa abordagem também incentiva o estilo do seu aplicativo a ser mais consistente, contando mais com modificadores comuns do que com uma base de estilo de exibição por exibição.  E é sobre isso! Esperançosamente, isso ajuda você a criar seus aplicativos com mais rapidez e facilidade. Outro benefício é que esses modificadores podem ser inseridos em qualquer um dos seus aplicativos e ajustados para corresponder às diretrizes de estilo. Eu também tenho trabalhado em uma biblioteca para levar isso ainda mais longe, você pode conferir   (PS: No momento em que escrevo isso, a biblioteca está em um estágio super inicial, o repositório está vazio :p, mas fique atento) aqui  Também publicado  aqui.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

Este áudio é produzido no idioma original da história!

Um guia essencial para SwiftUI: UI reutilizável com modificadores personalizados

About Author

COMENTARIOS

Rótulos

ESTE ARTIGO FOI APRESENTADO EM

Related Stories

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Uma breve introdução à teoria do cérebro de Boltzmann

Modelo Bitcoin UTXO, alimentando um ecossistema único

Guia do arquiteto para construir arquitetura de referência para um Datalake de IA/ML

Liberando o poder da IA. Uma revisão sistemática de técnicas de ponta: resumo e introdução

Uma breve introdução à teoria do cérebro de Boltzmann

Modelo Bitcoin UTXO, alimentando um ecossistema único

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps