O Xamarin.Forms FlexLayout
Use FlexLayout para empilhar ou encapsular uma coleção de modos de exibição filho.
O Xamarin.FormsFlexLayout
é novo na Xamarin.Forms versão 3.0. Ele é baseado no CSS Flexible Box Layout Module, comumente conhecido como layout flex ou flex-box, assim chamado porque inclui muitas opções flexíveis para organizar as crianças dentro do layout.
FlexLayout
é semelhante ao Xamarin.FormsStackLayout
em que ele pode organizar seus filhos horizontalmente e verticalmente em uma pilha. No entanto, o FlexLayout
também é capaz de envolver seus filhos se houver muitos para caber em uma única linha ou coluna, e também tem muitas opções de orientação, alinhamento e adaptação a vários tamanhos de tela.
FlexLayout
deriva de Layout<View>
e herda uma Children
propriedade do tipo IList<View>
.
FlexLayout
define seis propriedades vinculáveis públicas e cinco propriedades vinculáveis anexadas que afetam o tamanho, a orientação e o alinhamento de seus elementos filho. (Se você não estiver familiarizado com as propriedades vinculáveis anexadas, consulte o artigo Propriedades anexadas.) Essas propriedades são descritas em detalhes nas seções abaixo em As propriedades vinculáveis em detalhes e As propriedades vinculáveis anexadas em detalhes. No entanto, este artigo começa com uma seção sobre alguns cenários de uso comum que FlexLayout
descreve muitas dessas propriedades mais informalmente. No final do artigo, você verá como combinar FlexLayout
com folhas de estilo CSS.
Cenários de uso comuns
O programa de exemplo contém várias páginas que demonstram alguns usos comuns de FlexLayout
e permite que você experimente com suas propriedades.
Usando o FlexLayout para uma pilha simples
A página Pilha simples mostra como FlexLayout
pode substituir um StackLayout
mas com marcação mais simples. Tudo neste exemplo é definido na página XAML. O FlexLayout
contém quatro filhos:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.SimpleStackPage"
Title="Simple Stack">
<FlexLayout Direction="Column"
AlignItems="Center"
JustifyContent="SpaceEvenly">
<Label Text="FlexLayout in Action"
FontSize="Large" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Button Text="Do-Nothing Button" />
<Label Text="Another Label" />
</FlexLayout>
</ContentPage>
Aqui está essa página em execução no iOS, Android e na Plataforma Universal do Windows:
Três propriedades de FlexLayout
são mostradas no arquivo SimpleStackPage.xaml :
A
Direction
propriedade é definida como um valor daFlexDirection
enumeração. O padrão éRow
. Definir a propriedade comoColumn
faz com que os filhos doFlexLayout
sejam organizados em uma única coluna de itens.Quando os itens em um
FlexLayout
são organizados em uma coluna, diz-se que oFlexLayout
tem um eixo principal vertical e um eixo transversal horizontal.A
AlignItems
propriedade é do tipoFlexAlignItems
e especifica como os itens são alinhados no eixo cruzado. ACenter
opção faz com que cada item seja centralizado horizontalmente.Se você estivesse usando um
StackLayout
em vez de umFlexLayout
para essa tarefa, centralizaria todos os itens atribuindo aHorizontalOptions
propriedade de cada item aoCenter
. AHorizontalOptions
propriedade não funciona para filhos de umFlexLayout
, mas a únicaAlignItems
propriedade realiza o mesmo objetivo. Se precisar, você pode usar a propriedade vinculável anexadaAlignSelf
para substituir aAlignItems
propriedade de itens individuais:<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />
Com essa mudança, este
Label
é posicionado na borda esquerda doFlexLayout
quando a ordem de leitura é da esquerda para a direita.A
JustifyContent
propriedade é do tipoFlexJustify
e especifica como os itens são organizados no eixo principal. ASpaceEvenly
opção aloca todo o espaço vertical restante igualmente entre todos os itens, e acima do primeiro item, e abaixo do último item.Se você estivesse usando um
StackLayout
, precisaria atribuir aVerticalOptions
propriedade de cada item paraCenterAndExpand
obter um efeito semelhante. Mas a opção alocariaCenterAndExpand
duas vezes mais espaço entre cada item do que antes do primeiro item e depois do último item. Você pode imitar aCenterAndExpand
opção deVerticalOptions
definindo aJustifyContent
propriedade deFlexLayout
paraSpaceAround
.
Essas FlexLayout
propriedades são discutidas em mais detalhes na seção As propriedades vinculáveis em detalhes abaixo.
Usando o FlexLayout para encapsular itens
A página Quebra Automática de Fotos do exemplo demonstra como FlexLayout
pode envolver seus filhos em linhas ou colunas adicionais. O arquivo XAML instancia o FlexLayout
e atribui duas propriedades dele:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.PhotoWrappingPage"
Title="Photo Wrapping">
<Grid>
<ScrollView>
<FlexLayout x:Name="flexLayout"
Wrap="Wrap"
JustifyContent="SpaceAround" />
</ScrollView>
<ActivityIndicator x:Name="activityIndicator"
IsRunning="True"
VerticalOptions="Center" />
</Grid>
</ContentPage>
A Direction
propriedade disso FlexLayout
não é definida, então ela tem a configuração padrão de Row
, o que significa que os filhos estão organizados em linhas e o eixo principal é horizontal.
A Wrap
propriedade é de um tipo FlexWrap
de enumeração . Se houver muitos itens para caber em uma linha, essa configuração de propriedade fará com que os itens sejam quebrados na próxima linha.
Observe que o FlexLayout
é filho de um ScrollView
. Se houver muitas linhas para caber na página, o ScrollView
tem uma propriedade padrão Orientation
de Vertical
e permite a rolagem vertical.
A JustifyContent
propriedade aloca espaço restante no eixo principal (o eixo horizontal) para que cada item seja cercado pela mesma quantidade de espaço em branco.
O arquivo code-behind acessa uma coleção de fotos de exemplo e as adiciona à Children
coleção do FlexLayout
:
public partial class PhotoWrappingPage : ContentPage
{
// Class for deserializing JSON list of sample bitmaps
[DataContract]
class ImageList
{
[DataMember(Name = "photos")]
public List<string> Photos = null;
}
public PhotoWrappingPage ()
{
InitializeComponent ();
LoadBitmapCollection();
}
async void LoadBitmapCollection()
{
using (WebClient webClient = new WebClient())
{
try
{
// Download the list of stock photos
Uri uri = new Uri("https://raw.githubusercontent.com/xamarin/docs-archive/master/Images/stock/small/stock.json");
byte[] data = await webClient.DownloadDataTaskAsync(uri);
// Convert to a Stream object
using (Stream stream = new MemoryStream(data))
{
// Deserialize the JSON into an ImageList object
var jsonSerializer = new DataContractJsonSerializer(typeof(ImageList));
ImageList imageList = (ImageList)jsonSerializer.ReadObject(stream);
// Create an Image object for each bitmap
foreach (string filepath in imageList.Photos)
{
Image image = new Image
{
Source = ImageSource.FromUri(new Uri(filepath))
};
flexLayout.Children.Add(image);
}
}
}
catch
{
flexLayout.Children.Add(new Label
{
Text = "Cannot access list of bitmap files"
});
}
}
activityIndicator.IsRunning = false;
activityIndicator.IsVisible = false;
}
}
Aqui está o programa em execução, rolando progressivamente de cima para baixo:
Layout de página com FlexLayout
Existe um layout padrão no web design chamado de Santo Graal porque é um formato de layout que é muito desejável, mas muitas vezes difícil de realizar com perfeição. O layout consiste em um cabeçalho na parte superior da página e um rodapé na parte inferior, ambos se estendendo até a largura total da página. Ocupando o centro da página está o conteúdo principal, mas muitas vezes com um menu colunar à esquerda do conteúdo e informações complementares (às vezes chamadas de área lateral ) à direita. A seção 5.4.1 da especificação CSS Flexible Box Layout descreve como o layout do Santo Graal pode ser realizado com uma caixa flexível.
A página Layout do Santo Graal do exemplo mostra uma implementação simples desse layout usando um FlexLayout
aninhado em outro. Como esta página foi projetada para um telefone no modo retrato, as áreas à esquerda e à direita da área de conteúdo têm apenas 50 pixels de largura:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="FlexLayoutDemos.HolyGrailLayoutPage"
Title="Holy Grail Layout">
<FlexLayout Direction="Column">
<!-- Header -->
<Label Text="HEADER"
FontSize="Large"
BackgroundColor="Aqua"
HorizontalTextAlignment="Center" />
<!-- Body -->
<FlexLayout FlexLayout.Grow="1">
<!-- Content -->
<Label Text="CONTENT"
FontSize="Large"
BackgroundColor="Gray"
HorizontalTextAlignment="Center"
VerticalTextAlignment="Center"
FlexLayout.Grow="1" />
<!-- Navigation items-->
<BoxView FlexLayout.Basis="50"
FlexLayout.Order="-1"
Color="Blue" />
<!-- Aside items -->
<BoxView FlexLayout.Basis="50"
Color="Green" />
</FlexLayout>
<!-- Footer -->
<Label Text="FOOTER"
FontSize="Large"
BackgroundColor="Pink"
HorizontalTextAlignment="Center" />
</FlexLayout>
</ContentPage>
Aqui está em execução:
As áreas de navegação e laterais são renderizadas com um BoxView
à esquerda e à direita.
O primeiro FlexLayout
no arquivo XAML tem um eixo principal vertical e contém três filhos organizados em uma coluna. Estes são o cabeçalho, o corpo da página e o rodapé. O aninhado FlexLayout
tem um eixo principal horizontal com três filhos dispostos em uma linha.
Três propriedades vinculáveis anexadas são demonstradas neste programa:
A
Order
propriedade vinculável anexada é definida no primeiroBoxView
. Essa propriedade é um inteiro com um valor padrão de 0. Você pode usar essa propriedade para alterar a ordem do layout. Geralmente, os desenvolvedores preferem que o conteúdo da página apareça na marcação antes dos itens de navegação e itens laterais. Definir aOrder
propriedade no primeiroBoxView
para um valor menor do que seus outros irmãos faz com que ele apareça como o primeiro item na linha. Da mesma forma, você pode garantir que um item apareça por último definindo aOrder
propriedade como um valor maior do que seus irmãos.A
Basis
propriedade vinculável anexada é definida nos doisBoxView
itens para dar-lhes uma largura de 50 pixels. Essa propriedade é do tipoFlexBasis
, uma estrutura que define uma propriedade estática do tipoFlexBasis
chamadoAuto
, que é o padrão. Você pode usarBasis
para especificar um tamanho de pixel ou uma porcentagem que indica quanto espaço o item ocupa no eixo principal. É chamado de base porque especifica um tamanho de item que é a base de todo o layout subsequente.A
Grow
propriedade é definida no aninhadoLayout
e noLabel
filho que representa o conteúdo. Essa propriedade é do tipofloat
e tem um valor padrão de 0. Quando definido como um valor positivo, todo o espaço restante ao longo do eixo principal é alocado para esse item e para irmãos com valores positivos deGrow
. O espaço é alocado proporcionalmente aos valores, um pouco como a especificação de estrela em umGrid
arquivo .A primeira
Grow
propriedade anexada é definida no aninhadoFlexLayout
, indicando que esteFlexLayout
deve ocupar todo o espaço vertical não utilizado dentro do exteriorFlexLayout
. A segundaGrow
propriedade anexada é definida na representação doLabel
conteúdo, indicando que esse conteúdo deve ocupar todo o espaço horizontal não utilizado dentro do .FlexLayout
Há também uma propriedade vinculável anexada semelhante
Shrink
que você pode usar quando o tamanho das crianças excede o tamanho doFlexLayout
mas o envelopamento não é desejado.
Itens de catálogo com FlexLayout
A página Itens de catálogo no exemplo é semelhante ao Exemplo 1 na Seção 1.1 da especificação CSS Flex Layout Box, exceto que exibe uma série horizontalmente rolável de imagens e descrições de três macacos:
Cada um dos três macacos é um FlexLayout
contido em um Frame
que é dado uma altura e largura explícitas, e que também é um filho de um FlexLayout
maior . Neste arquivo XAML, a FlexLayout
maioria das propriedades dos filhos são especificadas em estilos, todos exceto um dos quais é um estilo implícito:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CatalogItemsPage"
Title="Catalog Items">
<ContentPage.Resources>
<Style TargetType="Frame">
<Setter Property="BackgroundColor" Value="LightYellow" />
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="Margin" Value="10" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Label">
<Setter Property="Margin" Value="0, 4" />
</Style>
<Style x:Key="headerLabel" TargetType="Label">
<Setter Property="Margin" Value="0, 8" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="Blue" />
</Style>
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="FontSize" Value="Large" />
<Setter Property="TextColor" Value="White" />
<Setter Property="BackgroundColor" Value="Green" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Seated Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Banana Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}"
WidthRequest="240"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
<Frame WidthRequest="300"
HeightRequest="480">
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey"
Style="{StaticResource headerLabel}" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}"
WidthRequest="180"
HeightRequest="180" />
<Label FlexLayout.Grow="1" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
O estilo implícito para o Image
inclui configurações de duas propriedades vinculáveis anexadas de Flexlayout
:
<Style TargetType="Image">
<Setter Property="FlexLayout.Order" Value="-1" />
<Setter Property="FlexLayout.AlignSelf" Value="Center" />
</Style>
A Order
configuração de –1 faz com que o Image
elemento seja exibido primeiro em cada um dos modos de exibição aninhados FlexLayout
, independentemente de sua posição dentro da coleção filhos. A AlignSelf
propriedade de faz com que o seja centrado Center
Image
dentro do FlexLayout
. Isso substitui a configuração da AlignItems
propriedade, que tem um valor padrão de Stretch
, o que significa que os Label
filhos e Button
são esticados até a largura total do FlexLayout
.
Dentro de cada um dos três FlexLayout
modos de exibição, um espaço em branco Label
precede o Button
, mas tem uma Grow
configuração de 1. Isso significa que todo o espaço vertical extra é alocado para esse espaço em branco Label
, o que efetivamente empurra para Button
o fundo.
As propriedades vinculáveis em detalhes
Agora que você viu algumas aplicações comuns do FlexLayout
, as propriedades do podem ser exploradas FlexLayout
com mais detalhes.
FlexLayout
define seis propriedades vinculáveis que você define no próprio, em código ou XAML, para controlar a orientação e o FlexLayout
alinhamento. (Uma dessas propriedades, Position
, não é abordada neste artigo.)
Você pode experimentar as cinco propriedades vinculáveis restantes usando a página Experimento do exemplo. Esta página permite adicionar ou remover filhos de um FlexLayout
e definir combinações das cinco propriedades vinculáveis. Todos os filhos do FlexLayout
são Label
vistas de várias cores e tamanhos, com a Text
propriedade definida como um número correspondente à sua posição na Children
coleção.
Quando o programa é iniciado, cinco Picker
modos de exibição exibem os valores padrão dessas cinco FlexLayout
propriedades. A FlexLayout
parte inferior da tela contém três crianças:
Cada um dos Label
modos de exibição tem um plano de fundo cinza que mostra o espaço alocado para isso Label
dentro do FlexLayout
. O fundo do FlexLayout
próprio é Alice Blue. Ele ocupa toda a área inferior da página, exceto por uma pequena margem à esquerda e à direita.
A propriedade Direction
A Direction
propriedade é do tipo FlexDirection
, uma enumeração com quatro membros:
Column
ColumnReverse
(ou "coluna-reverso" em XAML)Row
, o padrãoRowReverse
(ou "linha invertida" em XAML)
Em XAML, você pode especificar o valor dessa propriedade usando os nomes de membro de enumeração em minúsculas, maiúsculas ou minúsculas, ou pode usar duas cadeias de caracteres adicionais mostradas entre parênteses que são iguais aos indicadores CSS. (As cadeias de caracteres "column-reverse" e "row-reverse" são definidas na FlexDirectionTypeConverter
classe usada pelo analisador XAML.)
Aqui está a página Experiência mostrando (da esquerda para a direita), a direção, Column
direção Row
e ColumnReverse
direção:
Observe que, para as Reverse
opções, os itens começam à direita ou na parte inferior.
A propriedade Wrap
A Wrap
propriedade é do tipo FlexWrap
, uma enumeração com três membros:
NoWrap
, o padrãoWrap
Reverse
(ou "wrap-reverse" em XAML)
Da esquerda para a direita, estas telas mostram o NoWrap
, Wrap
e Reverse
opções para 12 crianças:
Quando a Wrap
propriedade é definida como NoWrap
e o eixo principal é restrito (como neste programa), e o eixo principal não é largo ou alto o suficiente para caber todas as crianças, as FlexLayout
tentativas de tornar os itens menores, como a captura de tela do iOS demonstra. Você pode controlar o encolhimento dos itens com a Shrink
propriedade vinculável anexada.
A propriedade JustifyContent
A JustifyContent
propriedade é do tipo FlexJustify
, uma enumeração com seis membros:
Start
(ou "flex-start" em XAML), o padrãoCenter
End
(ou "flex-end" em XAML)SpaceBetween
(ou "espaço entre" em XAML)SpaceAround
(ou "space-around" em XAML)SpaceEvenly
Essa propriedade especifica como os itens são espaçados no eixo principal, que é o eixo horizontal neste exemplo:
Em todas as três capturas de tela, a Wrap
propriedade é definida como Wrap
. O Start
padrão é mostrado na captura de tela anterior do Android. A captura de tela do iOS aqui mostra a Center
opção: todos os itens são movidos para o centro. As outras três opções que começam com a palavra Space
alocam o espaço extra não ocupado pelos itens. SpaceBetween
aloca o espaço igualmente entre os itens; SpaceAround
coloca espaço igual ao redor de cada item, enquanto SpaceEvenly
coloca espaço igual entre cada item, e antes do primeiro item e depois do último item na linha.
A propriedade AlignItems
A AlignItems
propriedade é do tipo FlexAlignItems
, uma enumeração com quatro membros:
Stretch
, o padrãoCenter
Start
(ou "flex-start" em XAML)End
(ou "flex-end" em XAML)
Esta é uma das duas propriedades (a outra é AlignContent
) que indica como as crianças estão alinhadas no eixo cruzado. Dentro de cada linha, as crianças são esticadas (como mostrado na captura de tela anterior) ou alinhadas no início, centro ou fim de cada item, conforme mostrado nas três capturas de tela a seguir:
Na captura de tela do iOS, os topos de todas as crianças estão alinhados. Nas capturas de tela do Android, os itens são centralizados verticalmente com base na criança mais alta. Na captura de tela UWP, as partes inferiores de todos os itens estão alinhadas.
Para qualquer item individual, a AlignItems
configuração pode ser substituída AlignSelf
pela propriedade vinculável anexada.
A propriedade AlignContent
A AlignContent
propriedade é do tipo FlexAlignContent
, uma enumeração com sete membros:
Stretch
, o padrãoCenter
Start
(ou "flex-start" em XAML)End
(ou "flex-end" em XAML)SpaceBetween
(ou "espaço entre" em XAML)SpaceAround
(ou "space-around" em XAML)SpaceEvenly
Como AlignItems
, a AlignContent
propriedade também alinha filhos no eixo cruzado, mas afeta linhas ou colunas inteiras:
Na captura de tela do iOS, ambas as linhas estão na parte superior; na captura de tela do Android, eles estão no centro; e na captura de tela da UWP eles estão na parte inferior. As linhas também podem ser espaçadas de várias maneiras:
O AlignContent
não tem efeito quando há apenas uma linha ou coluna.
As propriedades vinculáveis anexadas em detalhes
FlexLayout
define cinco propriedades vinculáveis anexadas. Essas propriedades são definidas em filhos do FlexLayout
e pertencem apenas a essa criança em particular.
A propriedade AlignSelf
A AlignSelf
propriedade vinculável anexada é do tipo FlexAlignSelf
, uma enumeração com cinco membros:
Auto
, o padrãoStretch
Center
Start
(ou "flex-start" em XAML)End
(ou "flex-end" em XAML)
Para qualquer filho individual do , essa configuração de FlexLayout
propriedade substitui a AlignItems
propriedade definida no FlexLayout
próprio. A configuração padrão de Auto
meios para usar a AlignItems
configuração.
Para um Label
elemento chamado label
(ou exemplo), você pode definir a AlignSelf
propriedade em código como este:
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);
Observe que não há nenhuma referência ao FlexLayout
pai do Label
. Em XAML, você define a propriedade da seguinte maneira:
<Label ... FlexLayout.AlignSelf="Center" ... />
A propriedade Order
A propriedade Order
é do tipo int
. O valor padrão é 0.
A Order
propriedade permite que você altere a ordem em que os filhos do FlexLayout
são organizados. Normalmente, os filhos de um FlexLayout
são organizados é a mesma ordem que eles aparecem na Children
coleção. Você pode substituir essa ordem definindo a propriedade vinculável anexada Order
como um valor inteiro diferente de zero em um ou mais filhos. O FlexLayout
então organiza seus filhos com base na configuração da Order
propriedade em cada filho, mas os filhos com a mesma Order
configuração são organizados na ordem em que aparecem na Children
coleção.
A propriedade Basis
A Basis
propriedade vinculável anexada indica a quantidade de espaço alocada a um filho do FlexLayout
no eixo principal. O tamanho especificado pela Basis
propriedade é o tamanho ao longo do eixo principal do pai FlexLayout
. Portanto, Basis
indica a largura de uma criança quando as crianças são organizadas em linhas, ou a altura quando as crianças são organizadas em colunas.
A Basis
propriedade é do tipo FlexBasis
, uma estrutura. O tamanho pode ser especificado em unidades independentes do dispositivo ou como uma porcentagem do tamanho do FlexLayout
. O valor padrão da Basis
propriedade é a propriedade FlexBasis.Auto
static , o que significa que a largura ou altura solicitada do filho é usada.
No código, você pode definir a Basis
propriedade de um Label
nomeado label
para 40 unidades independentes de dispositivo como esta:
FlexLayout.SetBasis(label, new FlexBasis(40, false));
O segundo argumento para o FlexBasis
construtor é nomeado isRelative
e indica se o tamanho é relativo (true
) ou absoluto (false
). O argumento tem um valor padrão de false
, portanto, você também pode usar o seguinte código:
FlexLayout.SetBasis(label, new FlexBasis(40));
Uma conversão implícita de float
para FlexBasis
é definida, para que você possa simplificá-la ainda mais:
FlexLayout.SetBasis(label, 40);
Você pode definir o tamanho para 25% do FlexLayout
pai da seguinte maneira:
FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));
Esse valor fracionário deve estar no intervalo de 0 a 1.
Em XAML, você pode usar um número para um tamanho em unidades independentes de dispositivo:
<Label ... FlexLayout.Basis="40" ... />
Ou você pode especificar uma porcentagem no intervalo de 0% a 100%:
<Label ... FlexLayout.Basis="25%" ... />
A página Experimento de base do exemplo permite que você experimente a Basis
propriedade. A página exibe uma coluna quebrada de cinco Label
elementos com cores alternadas de plano de fundo e primeiro plano. Dois Slider
elementos permitem especificar Basis
valores para o segundo e quarto Label
:
A captura de tela do iOS à esquerda mostra os dois Label
elementos recebendo alturas em unidades independentes do dispositivo. A tela do Android mostra que eles recebem alturas que são uma fração da altura total do FlexLayout
. Se o Basis
estiver definido em 100%, a criança terá a altura do FlexLayout
, e será quebrada na próxima coluna e ocupará toda a altura dessa coluna, como demonstra a captura de tela da UWP: Parece que as cinco crianças estão organizadas em uma linha, mas na verdade estão organizadas em cinco colunas.
A Propriedade Grow
A Grow
propriedade vinculável anexada é do tipo int
. O valor padrão é 0 e o valor deve ser maior ou igual a 0.
A Grow
propriedade desempenha um papel quando a Wrap
propriedade é definida como NoWrap
e a linha de filhos tem uma largura total menor que a largura do FlexLayout
, ou a coluna de filhos tem uma altura menor do que o FlexLayout
. A Grow
propriedade indica como dividir o espaço que sobrou entre as crianças.
Na página Crescer Experimento, cinco Label
elementos de cores alternadas são organizados em uma coluna e dois Slider
elementos permitem ajustar a Grow
propriedade do segundo e quarto Label
. A captura de tela do iOS na extremidade esquerda mostra as propriedades padrão Grow
de 0:
Se qualquer criança recebe um valor positivo Grow
, então essa criança ocupa todo o espaço restante, como demonstra a captura de tela do Android. Esse espaço também pode ser alocado entre duas ou mais crianças. Na captura de tela UWP, a Grow
propriedade do segundo Label
é definida como 0,5, enquanto a Grow
propriedade do quarto Label
é 1,5, o que dá ao quarto Label
três vezes mais espaço restante do que o segundo Label
.
A forma como o modo de exibição filho usa esse espaço depende do tipo específico de criança. Para um Label
, o texto pode ser posicionado dentro do espaço total do uso das Label
propriedades HorizontalTextAlignment
e VerticalTextAlignment
.
A propriedade Shrink
A Shrink
propriedade vinculável anexada é do tipo int
. O valor padrão é 1 e o valor deve ser maior ou igual a 0.
A Shrink
propriedade desempenha um papel quando a Wrap
propriedade é definida como NoWrap
e a largura agregada de uma linha de filhos é maior do que a largura do FlexLayout
, ou a altura agregada de uma única coluna de filhos é maior do que a altura do FlexLayout
. Normalmente, a FlexLayout
vontade exibe essas crianças restringindo seus tamanhos. A Shrink
propriedade pode indicar quais crianças têm prioridade para serem exibidas em seus tamanhos completos.
A página Shrink Experiment cria um FlexLayout
com uma única linha de cinco Label
filhos que exigem mais espaço do que a FlexLayout
largura. A captura de tela do iOS à esquerda mostra todos os Label
elementos com valores padrão de 1:
Na captura de tela do Android, o Shrink
valor para o segundo Label
é definido como 0 e é Label
exibido em sua largura total. Além disso, o quarto Label
recebe um Shrink
valor maior que um, e encolheu. A captura de tela da UWP mostra ambos os Label
elementos recebendo um Shrink
valor de 0 para permitir que sejam exibidos em seu tamanho completo, se isso for possível.
Você pode definir os Grow
valores e Shrink
para acomodar situações em que os tamanhos filho agregados às vezes podem ser menores ou às vezes maiores do que o tamanho do FlexLayout
.
Estilo CSS com FlexLayout
Você pode usar o recurso de estilo CSS introduzido com Xamarin.Forms o 3.0 em conexão com FlexLayout
o . A página Itens de Catálogo CSS do exemplo duplica o layout da página Itens de Catálogo , mas com uma folha de estilos CSS para muitos dos estilos:
O arquivo CatalogItemsPage.xaml original tem cinco Style
definições em sua Resources
seção com 15 Setter
objetos. No arquivo CssCatalogItemsPage.xaml, isso foi reduzido a duas Style
definições com apenas quatro Setter
objetos. Esses estilos complementam a folha de estilos CSS para propriedades que o Xamarin.Forms recurso de estilo CSS atualmente não suporta:
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:FlexLayoutDemos"
x:Class="FlexLayoutDemos.CssCatalogItemsPage"
Title="CSS Catalog Items">
<ContentPage.Resources>
<StyleSheet Source="CatalogItemsStyles.css" />
<Style TargetType="Frame">
<Setter Property="BorderColor" Value="Blue" />
<Setter Property="CornerRadius" Value="15" />
</Style>
<Style TargetType="Button">
<Setter Property="Text" Value="LEARN MORE" />
<Setter Property="BorderRadius" Value="20" />
</Style>
</ContentPage.Resources>
<ScrollView Orientation="Both">
<FlexLayout>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Seated Monkey" StyleClass="header" />
<Label Text="This monkey is laid back and relaxed, and likes to watch the world go by." />
<Label Text=" • Doesn't make a lot of noise" />
<Label Text=" • Often smiles mysteriously" />
<Label Text=" • Sleeps sitting up" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.SeatedMonkey.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Banana Monkey" StyleClass="header" />
<Label Text="Watch this monkey eat a giant banana." />
<Label Text=" • More fun than a barrel of monkeys" />
<Label Text=" • Banana not included" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.Banana.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
<Frame>
<FlexLayout Direction="Column">
<Label Text="Face-Palm Monkey" StyleClass="header" />
<Label Text="This monkey reacts appropriately to ridiculous assertions and actions." />
<Label Text=" • Cynical but not unfriendly" />
<Label Text=" • Seven varieties of grimaces" />
<Label Text=" • Doesn't laugh at your jokes" />
<Image Source="{local:ImageResource FlexLayoutDemos.Images.FacePalm.jpg}" />
<Label StyleClass="empty" />
<Button />
</FlexLayout>
</Frame>
</FlexLayout>
</ScrollView>
</ContentPage>
A folha de estilos CSS é referenciada na primeira linha da Resources
seção:
<StyleSheet Source="CatalogItemsStyles.css" />
Observe também que dois elementos em cada um dos três itens incluem StyleClass
configurações:
<Label Text="Seated Monkey" StyleClass="header" />
···
<Label StyleClass="empty" />
Estes referem-se aos seletores na folha de estilos CatalogItemsStyles.css:
frame {
width: 300;
height: 480;
background-color: lightyellow;
margin: 10;
}
label {
margin: 4 0;
}
label.header {
margin: 8 0;
font-size: large;
color: blue;
}
label.empty {
flex-grow: 1;
}
image {
height: 180;
order: -1;
align-self: center;
}
button {
font-size: large;
color: white;
background-color: green;
}
Várias FlexLayout
propriedades vinculáveis anexadas são referenciadas aqui. label.empty
No seletor, você verá o atributoflex-grow
, que estiliza um vazio Label
para fornecer algum espaço em branco acima do Button
. O image
seletor contém um order
atributo e um align-self
atributo, que correspondem a FlexLayout
propriedades vinculáveis anexadas.
Você viu que pode definir propriedades diretamente no FlexLayout
e pode definir propriedades vinculáveis anexadas nos filhos de um FlexLayout
arquivo . Ou, você pode definir essas propriedades indiretamente usando estilos tradicionais baseados em XAML ou estilos CSS. O importante é conhecer e entender essas propriedades. Essas propriedades são o que torna o FlexLayout
verdadeiramente flexível.
FlexLayout com Xamarin.University
Xamarin.Forms Vídeo 3.0 Flex Layout