Visão Geral

Introdução

No Beagle, você terá de usar uma dependência chamada Yoga Layout para posicionar os componentes na tela da sua aplicação.

Para fazer isso, o Yoga faz os cálculos necessários para posicionar os elementos e, depois disso, faz a sua renderização.

Sobre o Yoga Layout

O Yoga é um framework Android e iOS desenvolvido pelo Facebook para posicionar views usando o conceito do Flexbox.

O Flexbox organiza os elementos dentro de containers de forma dinâmica para que, independente das dimensões da sua aplicação, você possa manter um layout flexível.

Alguns conceitos chave para entender o Flexbox são:

• Main Axis: eixo horizontal
• Cross Axis: eixo vertical
• Main Size: tamanho da dimensão dos eixos.

No caso do Main Size, é possível ter 3 tipos diferentes de dimensões:

1. Cross Size: Tamanho da dimensão cross axis.
2. Main Start and Main End: Começo e o fim do main axis.
3. Cross Start and Cross End: Começo e o fim do cross axis.

‌Estes eixos dependem do valor atribuído à propriedade flex-direction para definir a orientação dos elementos em tela.

Se esta propriedade receber o valor:

• row ou row-reverse: o main axis do container será o horizontal e o cross axis será vertical.

• column ou column-reverse: o main axis do container será vertical e o cross axis será horizontal.

Propriedades disponíveis

A partir do Yoga Layout, você pode utilizar as seguintes propriedades para inserir, alterar ou eliminar componentes em tela:

UnitValue

As propriedades Basis, Size, Margin, Padding e Position descritas acima recebem um UnitValue que espera um valorDoublee um UnitType, que é um enumcom as seguintes opções:

Para as propriedades listadas abaixo, na Web, o default é UnitType.AUTO.

O UnitType.AUTO pode ser usado nas frentes iOS, Android e Web de acordo com a tabela abaixo:

Propriedade	iOS	Android	Web
Basis	✔	✔	✔
Size			✔
Margin			✔
Padding			✔
Position			✔

Feedback

Was this page helpful?

Glad to hear it! Please tell us how we can improve.

Sorry to hear that. Please tell us how we can improve.