Swift / SwiftUI

Respondendo a mudanças geométricas no SwiftUI

O texto explica como aplicativos iOS adaptam suas interfaces às mudanças geométricas, especialmente quando são redimensionáveis. Utilizando a função onGeometryChange(), os desenvolvedores podem responder dinamicamente à disponibilidade de espaço em tela e ajustar o layout conforme necessário, sem atualizações desnecessárias de estado.

Compartilhar
Responding to geometry changes in SwiftUI social preview

Respondendo a mudanças geométricas no SwiftUI

À medida que os aplicativos iOS se tornam totalmente redimensionáveis, suas interfaces podem receber muitas mais combinações de largura e altura do que um conjunto fixo de tamanhos de dispositivo e orientações. Os aplicativos iPad podem ser redimensionados livremente no ambiente de janelas, e os aplicativos iPhone-only construídos com o iOS 27 SDK também podem ser redimensionados enquanto estão em execução no iPad ou no iPhone Mirroring no Mac. As decisões de layout, portanto, precisam refletir o espaço atualmente disponível para a interface em vez de suposições sobre o dispositivo que está exibindo.

O SwiftUI fornece várias ferramentas para construir esse tipo de adaptação. Size classes descrevem categorias amplas, ViewThatFits seleciona a primeira alternativa que se encaixa, containerRelativeFrame() dimensiona o conteúdo em relação a um contêiner e tipos de layout personalizados Layout podem medir e posicionar um grupo de visualizações juntos.

Quando uma interface precisa derivar seu próprio valor da geometria resolvida de uma visualização, podemos usar onGeometryChange(for:of:action:). O valor pode ser baseado no tamanho da visualização, nos recuos de área segura ou no quadro em um espaço de coordenadas, permitindo que a resposta siga uma regra geométrica específica para a interface.

Por exemplo, podemos usar o tamanho disponível para escolher como uma carta organiza seu conteúdo. Quando a janela é estreita e mais alta do que larga, a carta coloca a arte acima dos detalhes. Quando a janela é mais larga do que alta, o mesmo conteúdo se move para uma organização horizontal.

A relação entre largura e altura não é a única parte da regra. Uma janela mais alta do que larga ainda pode fornecer espaço suficiente horizontalmente para o conteúdo, então a carta pode manter sua organização horizontal.

Nós podemos alcançar essa comportamento adaptativo com onGeometryChange() derivando a organização apropriada a partir do tamanho disponível e armazenando o resultado em uma propriedade de estado:

struct ContentView: View {
let verticalLayoutWidthThreshold: CGFloat

@State private var usesVerticalLayout = true

var body: some View {
ScrollView {
AdaptiveCard(
usesVerticalLayout: usesVerticalLayout
)
}.padding()
.onGeometryChange(for: Bool.self) { geometry in
let
size = geometry.size

return size.height > size.width
&& size.width < verticalLayoutWidthThreshold
} action: { usesVerticalLayout in
self
.usesVerticalLayout = usesVerticalLayout
}
}
}

Neste exemplo, aplicamos onGeometryChange() ao ScrollView, cujo tamanho representa o espaço disponível para a carta. A primeira clausura, chamada de transform closure, recebe um GeometryProxy e usa seu tamanho para determinar se a carta deve usar sua organização vertical. Como a clausura retorna um Booleano, passamos Bool.self ao argumento for. A clausura de ação recebe o resultado e atribui-o a usesVerticalLayout, que AdaptiveCard usa para escolher sua organização.

Conforme as alterações geométricas ocorrem, o SwiftUI reavalia a transformação da clausura, mas chama a ação apenas quando o valor booleano retornado é diferente do resultado anterior. Uma janela pode passar por muitos tamanhos intermediários durante uma mudança de tamanho sem mudar a disposição adequada, então a ação não é chamada para cada medida.

Retornar apenas as informações necessárias para a resposta pode ajudar a prevenir atualizações de estado desnecessárias causadas por alterações frequentes na geometria. É também importante garantir que o estado atualizado pela ação permaneça independente da geometria usada para derivar esse valor. Caso contrário, mudar o estado pode alterar a disposição e produzir outra medida, levando a atualizações repetidas entre layout e estado.

Usado com cuidado, onGeometryChange() pode ser uma ferramenta útil para construir interfaces adaptáveis. Ele nos dá um meio de responder ao espaço disponível conforme as necessidades específicas de uma interface, mesmo quando essas necessidades não podem ser facilmente expressas por APIs mais especializadas.

Se você está procurando construir uma base sólida em SwiftUI, meu livro SwiftUI Fundamentos mergulha profundamente nos princípios e APIs fundamentais do framework para ajudá-lo a entender como ele funciona por trás das cortinas e a usá-lo efetivamente em seus projetos. E meu novo livro A Maneira SwiftUI ajuda você a adotar padrões recomendados, evitar armadilhas comuns e usar as ferramentas nativas do SwiftUI de forma apropriada para trabalhar com o framework em vez de contra ele.

Para mais recursos sobre Swift e SwiftUI, confira meus outros livros e pacotes de livros bundles.

Fonte original

Conteúdo traduzido e adaptado pela redação do Notícias Mobile. Confira também a matéria na fonte original.

Leia a matéria completa