‫Bem vindo de volta.
‫Agora é finalmente a hora de usar a grade e você viu como usar o painel de tecnologia antes e o painel
‫de rack e aqueles de hoje bem empilhados e embrulhados.
‫E agora vamos verificar a grade, que nos permite posicionar as coisas em uma grade, e vamos
‫começar simplesmente usando uma grade de dois tempos.
‫E antes de tudo, o que precisamos para isso é uma definição de coluna e rolo para que possamos seguir em frente e dentro de
‫nossa grade.
‫Vá para o arquivo Zemel e, dentro da grade, crie uma definição de coluna de ponto de grade e aqui você pode definir
‫suas diferentes colunas.
‫Portanto, em primeiro lugar, você precisa das definições de coluna, no plural, e depois pode ir em frente e
‫criar suas definições de coluna individuais.
‫Por exemplo, você pode ir em frente e criar um aqui.
‫Vou mantê-lo simples em uma linha assim.
‫E o que eu quero definir aqui é simplesmente a largura e a largura que eu poderia, digamos,
‫colocar em 100 e agora vamos criar outra coluna, que também terá 100 de largura.
‫Agora, isso não é suficiente.
‫Também precisamos ter filas, exceto que queremos apenas um quarto.
‫Portanto, vamos começar com apenas uma linha.
‫E vou criar um botão primeiro.
‫E este botão vai dizer algo como, olá, e deve estar na grade, essa
‫coluna zero.
‫Agora crio um segundo botão, que deve ser a grade, aquela coluna um.
‫Agora, se olharmos para nosso design agora, podemos ver que temos nossos dois botões.
‫Olá.
‫Vamos executar nosso código apenas para ver como fica.
‫A propósito, existem apenas 100 pixels de largura, como você pode ver aqui.
‫Portanto, a largura é limitada a 100 pixels.
‫Portanto, se você adicionar um valor total aqui, isso simplesmente o usará como pixels na largura.
‫Como você pode ver aqui, essa é a largura de uma coluna.
‫E, claro, poderíamos dizer que podemos colocar mais algumas colunas aqui facilmente.
‫Bem, podemos fazer isso e faremos isso mais tarde.
‫Mas antes de fazermos isso, gostaria de mostrar algo muito importante.
‫Portanto, se eu arrastar meu Zemel até aqui agora, ele será realmente útil porque veremos a diferença em nossa interface do usuário
‫diretamente.
‫E eu quero mudar a largura de 100 para automático.
‫E como você pode ver o que o auto faz, ele automaticamente usa apenas a largura necessária para caber
‫em todo o conteúdo que existe dentro do elemento.
‫Portanto, em nosso caso, o botão tem um texto chamado Hi there, e é quanto espaço alto é necessário
‫ou requer.
‫E isso também mostra a largura do nosso botão.
‫E como você pode ver para a definição da primeira coluna, então
‫a definição da primeira coluna onde o nosso botão está, é assim que o ou é o botão que é alterado.
‫Como você pode ver agora, ele mudou para 59 vírgula cinco pixels.
‫Se eu adicionar mais texto, mais texto, você pode ver que está ampliando para cento e cinquenta e três vírgula
‫cinco pixels.
‫Portanto, você pode facilmente usar o modo automático se quiser que tudo se encaixe corretamente com base na quantidade de espaço
‫que realmente precisa.
‫Mas e se eu quiser que as colunas tenham exatamente a mesma largura?
‫Bem, é claro que eu poderia usar valores completos aqui ou valores fixos aqui, mas também posso usar estrela.
‫E o que Star fará é se todos eles, todos eles tiverem estrela, ele simplesmente dirá, OK, ocupe
‫todo o espaço.
‫E neste caso é apenas o espaço disponível que esta coluna específica possui, e é exatamente igual
‫às outras.
‫Portanto, há uma espera agora.
‫Portanto, este tem o peso de um e aquele também tem o peso de um.
‫Portanto, eles são igualmente ponderados, o que significa que são iguais apenas com se quisermos mudar isso, digamos que
‫eu queira fazer este segundo aqui, o segundo botão com o dobro da largura do primeiro que posso usar estrela
‫dupla.
‫Portanto, agora este terá o dobro da largura do primeiro.
‫Se eu, por exemplo, quiser ter três quintos do lado esquerdo e dois quintos do lado direito como largura,
‫posso simplesmente usar essa abordagem, como você pode ver aqui.
‫Então, três vezes a estrela e duas vezes para começar.
‫Então, o que isso realmente soma tudo e então leva apenas a conta múltipla do que é dito aqui.
‫Então, digamos que temos três e dois.
‫Então o que ele faz, ele diz, OK, agora são cinco no total.
‫As unidades que estão disponíveis e eu vou pegar três quintos dessas unidades e eu poderia ir em frente e fazer algo como
‫100, então você pode ver que este leva 100 e isso não leva apenas um e leva apenas dois.
‫Então é assim que você pode brincar com a largura e o mesmo vale para as alturas.
‫Portanto, agora vamos prosseguir e criar uma definição de rolo.
‫Essas definições de função são tão boas que podemos seguir em frente e criar nossas próprias definições.
‫Então, o primeiro e eu vou mantê-lo simples também, como em uma linha e esta precisa de uma altura.
‫Então, vou apenas dizer: OK, quero ter a altura da estrela.
‫E agora usamos a mesma coisa novamente para a segunda linha.
‫E como você pode ver agora, temos duas linhas.
‫Então, um aqui e o segundo na parte inferior.
‫E como você pode ver, a segunda linha ainda não tem nenhum conteúdo.
‫Portanto, agora vamos mudar isso, digamos, primeiro de tudo, colocando este botão aqui na parte inferior.
‫Direito.
‫E como podemos fazer isso?
‫Bem, simplesmente usamos grade, ponto, linha e dizemos que é real.
‫Agora, você pode se perguntar, por que é esse?
‫Por que não está muito bem?
‫Como você provavelmente já sabe, na programação começamos a contar do zero.
‫Portanto, a primeira linha é zero, a segunda linha é um.
‫Portanto, agora no alto está a segunda fileira, que é a fileira um.
‫Agora, vamos criar mais dois botões e talvez até mesmo alterar seus nomes para
‫algo que tenha mais a dizer sobre suas informações reais.
‫Vou colocá-lo na coluna zero na linha um e aquele, na verdade, vou colocá-lo de
‫volta no zero um.
‫E esse será adicionado um.
‫E na verdade essa será a coluna um e a linha zero assim.
‫Agora temos todos os botões e esse será um.
‫Um será um botão para o botão três e o botão quatro.
‫Excelente.
‫Portanto, agora, se começarmos com isso, você verá que, bem, também conta para o Whitesell.
‫Então, um, dois, três, quatro.
‫Tudo bem.
‫Agora, um pequeno desafio para você, pois viu como usar ótimas colunas e linhas.
‫Vá em frente e faça uma grade três vezes três aqui com oito botões.
‫Portanto, um, dois, oito devem ser botões e a nona posição.
‫Portanto, a posição inferior direita ou o elemento da grade deve ser um bloco de texto.
‫Então, por favor, poste um vídeo e tente fazer isso.
‫Tudo bem, espero que você tenha tentado, então o que vou fazer é adicionar outra coluna, adicionando uma definição
‫de coluna aqui, e ela terá a mesma largura e altura.
‫Vai ter a mesma altura.
‫E agora, como você pode ver, os botões, eles parecem um pouco estranhos, mas isso é só porque eu não diminuí o zoom ainda.
‫Então agora podemos ver corretamente.
‫Agora temos nossos botões com zero um e assim por diante.
‫Vou copiar esse botão aqui e posicionar uma coluna também.
‫Então Rosero e coluna dois.
‫Agora, você poderia, é claro, argumentar que faz mais sentido começar com a linha e, em seguida, inserir
‫a coluna enquanto pode fazer isso.
‫Mas, no meu caso, é o contrário.
‫No final, o que importa é que você use os dois corretamente.
‫Agora temos os três botões na parte superior.
‫Agora vamos criar a segunda linha ou finalizar a segunda linha.
‫E essa é a coluna também.
‫E vou copiar isso mais três vezes, na verdade.
‫Duas vezes é o suficiente.
‫E aquele será linha para posição zero e linha para posição um ou coluna um.
‫Agora, é claro, precisamos mudar os valores.
‫Então, um, dois, três, quatro, cinco, seis, sete e oito.
‫E como disse no canto inferior esquerdo, gostaria de ter um bloco de texto.
‫Portanto, o bloco de texto tem a mesma abordagem com grãos.
‫Você precisa ter uma coluna e uma linha.
‫Vou apenas dizer que será a coluna dois e a linha da grade.
‫Dois também.
‫Agora estamos embaixo, à esquerda ou à direita agora, podemos sair e fornecer algum texto e eu
‫apenas direi algo.
‫Eu mando uma mensagem agora, você pode dizer, oh, eu não gosto disso.
‫O texto está no canto superior esquerdo.
‫Embora você possa facilmente mudar isso por um ..
‫Inserir algo como alinhamento horizontal e usar centro aqui.
‫Portanto, agora está centralizado horizontalmente.
‫Vamos aumentar o zoom para que você possa ver.
‫Tudo bem.
‫O suficiente para centralizá-lo verticalmente também.
‫Eu simplesmente uso o alinhamento vertical e o centro aqui também.
‫Agora, como você pode ver, o botão está perfeitamente centralizado e podemos até mesmo prosseguir e alterar o tamanho
‫da fonte apenas porque podemos.
‫E vamos torná-lo um pouco maior, como 32.
‫E agora podemos ver que temos uma grade três vezes três com oito botões e um texto.
‫Agora, você pode seguir em frente e alinhar todos os diferentes tipos de elementos em sua janela aqui e sua janela principal em
‫sua grade.
‫Então essa é a beleza de usar grades.
‫E como você viu, você pode empilhar coisas.
‫Você pode criar um painel empilhado com várias grades.
‫Além disso, você tem um texto intermediário, algo assim.
‫Portanto, você não está limitado a usar um elemento aqui.
‫Como você pode ver, poderíamos prosseguir e, digamos, colocá-lo em um painel de pilha de painéis empilhados como esse.
‫Vou arrastar a grade.
‫Como você pode ver agora, está reclamando porque a janela principal do Zemel só conhece a primeira.
‫Portanto, ele só verá o painel empilhado se verificarmos agora nossa aparência.
‫Na verdade, vamos parar com isso para que possamos ver como diz marcação invertida.
‫Então, se pegarmos toda a grade dentro de nosso painel de pilha, como você pode ver, ela está lá e a ocupa.
‫Portanto, na parte inferior, há muito espaço.
‫Então, aqui podemos adicionar outro botão.
‫Só para você ver que isso é possível e esse aqui vai ficar com uma altura de cem.
‫E agora, como você pode ver, está tudo empilhado lá no topo.
‫E embora tenhamos essa altura que todos eles têm a mesma altura, esse texto precisava de tanto espaço que
‫está ignorando isso.
‫Portanto, o tamanho da fonte é muito grande.
‫Então, se voltarmos para 16, ainda é muito grande.
‫Se formos para, digamos, 12.
‫Agora parece que sim.
‫Portanto, sempre que usar definições reais para esta história, você deve ter cuidado.
‫Se um elemento precisar de mais espaço do que existe, ele irá transbordar.
‫Tudo bem.
‫Então são duas grades.
‫Vou voltar para a bela grade padrão que tínhamos lá.
‫E geralmente o que eu sempre recomendo depois de ver algo assim e depois de aprender algo assim, por
‫favor, vá em frente e brinque com isso.
‫Basta brincar com alguns tipos diferentes de elementos.
‫Você já viu alguns e veremos muitos outros controles mais tarde.
‫Então, os que usamos até agora são principalmente botões, certo.
‫E blocos de texto.
‫Mas usaremos controles bonitos e diferentes em vídeos futuros.
‫Então, vejo você lá.