Bem-vindo de volta.
Nesta seção, aprenderemos sobre layouts no Jetpack Compose.
Cada layout tem um caso de uso específico, e você aprenderá a
escolher o mais adequado para a interface do usuário que deseja criar.
Por fim, você agrupará funções compostas em diferentes tipos de
layouts para criar uma interface de usuário mais complexa.
Como sempre, é melhor começar com o básico.
Ao trabalhar com XML, você consegue isso usando o layout, uma classe que estende o Viewgroup.
O Viewgroup pode conter zero ou mais exibições e é responsável por medir
todos os seus filhos e posicioná-los na tela de acordo com diferentes regras.
No Jetpack Compose, o substituto do Viewgroup é chamado de layout.
Os layouts são usados para organizar os elementos da interface do usuário ou composições na tela.
Eles definem a estrutura e o posicionamento dos componentes da interface do usuário em um determinado espaço.
Por exemplo, a coluna coloca os itens verticalmente na
tela, a linha coloca os itens horizontalmente na tela.
A caixa coloca elementos em cima de outros.
Os layouts desempenham um papel fundamental na criação de interfaces de usuário
visualmente atraentes, responsivas e adaptáveis a diferentes tamanhos e orientações de tela.
Começarei com os layouts lineares.
Um layout linear posiciona seus filhos em um fluxo linear.
Esse fluxo é chamado de orientação e pode ser horizontal ou vertical.
No Jetpack Compose, há duas funções compostas diferentes que
colocam o layout linear, uma para cada orientação.
Você começará com a versão horizontal, que é uma linha.
Aqui, começarei com a função add composable my row e,
dentro dessa linha, começarei com a função a row composable.
E, dentro dessa linha, começarei criando dois textos.
Em seguida, vamos chamar minha função de linha dentro do conteúdo do conjunto.
Execute o aplicativo.
Você pode ver dois campos de texto centralizados verticalmente e
organizados de forma a serem colocados em uma única linha.
Agora vamos nos aprofundar no controle de linha e clicar com o botão esquerdo do mouse para abrir a linha.
Aqui temos o modificador de disposição horizontal, alinhamento vertical e conteúdo.
Há dois novos parâmetros com os quais você pode trabalhar: a disposição horizontal e o alinhamento vertical.
Você usa arranjos para posicionar as crianças umas em relação às outras.
Os arranjos horizontais possíveis são espaço entre espaços uniformemente, espaço ao
redor do centro, início e fim e o alinhamento vertical.
Portanto, ao usar o alinhamento, você posiciona os filhos de uma maneira específica dentro do pai.
Especificamente, o alinhamento vertical alinha as crianças verticalmente de
três maneiras diferentes: superior, central, vertical e inferior.
No próximo vídeo, vamos nos aprofundar nas disposições horizontais e nos alinhamentos verticais.
Vamos voltar para a linha.
E aqui posso usar a disposição horizontal, a disposição do espaço do ponto
uniformemente e o alinhamento vertical horizontal, o alinhamento do ponto centralizado verticalmente.
Vamos correr e ver a diferença.
Na verdade, para notar a diferença, vou criar outro texto
compostável aqui chamado de from Play Store Run novamente.
E para garantir que o tamanho máximo da linha seja preenchido em
toda a tela, usaremos outro parâmetro aqui, que é um modificador.
Portanto, o preenchimento do ponto do modificador modificador.
Tamanho máximo.
Corra novamente.
E aqui vamos nós.
Texto no meio da tela e eles são separados uniformemente.
Portanto, usamos o ponto de alinhamento center verticalmente para centralizar os filhos verticalmente, e o ponto de organização space
uniformemente para que cada filho tenha uma quantidade igual de espaço entre eles e no modificador dot fill.
Tamanho máximo para fazer com que o layout preencha toda a tela.
Portanto, essa etapa final é importante porque, caso contrário, uma linha ocuparia apenas o espaço necessário
para desenhar seus filhos, já que nenhum de seus filhos tem peso definido sem preencher o
tamanho da tela, o arranjo e o alinhamento não importariam, e todos os itens seriam
colocados no nível superior e no canto superior esquerdo da tela, um após o outro.