Fogos de artifício, habr. Antes de prosseguirmos para o artigo, quero compartilhar com vocês de forma absolutamente gratuita a gravação de duas aulas muito úteis que nossos professores deram em antecipação ao início dos cursos básico e avançado de desenvolvimento iOS:
Agora vamos prosseguir para o artigo.
Esta semana, quero falar com vocês sobre Grids, um dos novos recursos mais esperados do SwiftUI. Todo mundo estava esperando ansiosamente por uma alternativa
UICollectionViewno SwiftUI e, finalmente, ele foi lançado este ano. SwiftUI nos fornece LazyVGrid e vistas LazyHGrid que podemos usar para criar layouts com grades de itens.
O básico
LazyVGrid e LazyHGrid são dois novos tipos de visualização que o SwiftUI nos fornece para criar um Layout super personalizado baseado em uma grade de itens. A única diferença entre eles é o eixo de preenchimento. O LazyVGrid preenche o espaço disponível verticalmente. LazyHGrid coloca seus filhos horizontalmente. O eixo é a única diferença entre essas duas visualizações. Portanto, tudo o que você aprende sobre LazyVGrid se aplica a LazyHGrid e vice-versa. Vamos dar uma olhada no primeiro exemplo.
struct ContentView: View {
private var columns: [GridItem] = [
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16),
GridItem(.fixed(100), spacing: 16)
]
var body: some View {
ScrollView {
LazyVGrid(
columns: columns,
alignment: .center,
spacing: 16,
pinnedViews: [.sectionHeaders, .sectionFooters]
) {
Section(header: Text("Section 1").font(.title)) {
ForEach(0...10, id: \.self) { index in
Color.random
}
}
Section(header: Text("Section 2").font(.title)) {
ForEach(11...20, id: \.self) { index in
Color.random
}
}
}
}
}
}
No exemplo acima, estamos criando uma grade de três colunas em que cada coluna tem um tamanho fixo de 100pt. Vou usar este exemplo para descrever todas as opções de configuração disponíveis para nós.
- O parâmetro
columnsé uma matriz que define as colunas no layout da grade. Para descrever uma coluna, o SwiftUI nos fornece o tipo GridItem . Falaremos sobre isso um pouco mais tarde. - Este parâmetro
alignmentnos permite alinhar o conteúdo de uma grade por meio de transferênciaHorizontalAlignmentpara LazyVGrid eVerticalAlignmentpara LazyHGrid . Funciona da mesma forma questack alignment. - O parâmetro
spacingespecifica a distância entre cada linha dentro do LazyVGrid ou o espaço entre cada coluna dentro do LazyHGrid . - O parâmetro
pinnedViewspermite que você especifique opções para fixar cabeçalhos e rodapés de seção. Ele está vazio por padrão, o que significa que cabeçalhos e rodapés se comportam como conteúdo e desaparecem na rolagem. Você pode ativar a fixação do cabeçalho e do rodapé; nesse caso, eles se sobreporão ao conteúdo e se tornarão permanentemente visíveis.
GridItem
Cada coluna da grade deve ser definida com uma estrutura
GridItem. O tipo GridItemnos permite especificar o tamanho, alinhamento e espaçamento de cada coluna. Vamos dar uma olhada em um pequeno exemplo.
private var columns: [GridItem] = [
GridItem(.fixed(50), spacing: 16, alignment: .leading),
GridItem(.fixed(75)),
GridItem(.fixed(100))
]
Como você pode ver, cada coluna pode ter opções de tamanho, espaçamento e alinhamento diferentes. O mais interessante aqui é o tamanho. Existem três maneiras de determinar o tamanho de uma coluna em uma grade. Ele pode ser fixo, flexível ou adaptável.
A coluna Fixa é a mais óbvia. A grade posiciona a coluna de acordo com o tamanho que você especificar. No exemplo anterior, criamos um layout de três colunas em que as colunas são fixadas em 50pt, 75pt e 100pt, respectivamente.
opção flexívelpermite definir uma coluna que se expande ou contrai com base no espaço disponível. Também podemos fornecer tamanhos de coluna flexíveis mínimo e máximo. Por padrão, ele usa um valor mínimo de 10 pt e não é limitado ao máximo.
private var columns: [GridItem] = [
GridItem(.flexible(minimum: 250)),
GridItem(.flexible())
]
Aqui criamos um layout que divide o espaço disponível entre duas colunas flexíveis. A primeira coluna ocupa 250pt de seu tamanho mínimo, enquanto a segunda possui todo o restante do espaço disponível.
A opção mais interessante é adaptativa . A opção responsiva nos permite colocar vários elementos no espaço de uma única coluna flexível. Vamos tentar descobrir com um exemplo.
private var columns: [GridItem] = [
GridItem(.adaptive(minimum: 50, maximum: 100)),
GridItem(.adaptive(minimum: 150))
]
Como você pode ver, temos duas colunas responsivas. A primeira coluna contém vários elementos com tamanho mínimo de 50pt e tamanho máximo de 100pt. As colunas responsivas são úteis quando o número de itens em uma coluna precisa ser baseado no espaço disponível.
O verdadeiro poder das grades é quando você começa a misturar os tipos de coluna. Você pode criar um layout de duas colunas, onde a primeira é fixa e a segunda é responsiva. Vamos ver como ficará.
private var columns: [GridItem] = [
GridItem(.fixed(100)),
GridItem(.adaptive(minimum: 50))
]
Conclusão
A grade permite que você crie layouts muito complexos e interessantes, misturando diferentes tipos
GridItem. Deve-se notar que todas as mudanças nas malhas podem ser animadas. Espero que tenha gostado deste artigo. Fique à vontade para me seguir no Twitter e tirar suas dúvidas relacionadas a este tópico. Obrigado pela atenção, até mais!
Você pode descobrir mais sobre nossos cursos usando os links abaixo: