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
Directionpropriedade é definida como um valor daFlexDirectionenumeração. O padrão éRow. Definir a propriedade comoColumnfaz com que os filhos doFlexLayoutsejam organizados em uma única coluna de itens.Quando os itens em um
FlexLayoutsão organizados em uma coluna, diz-se que oFlexLayouttem um eixo principal vertical e um eixo transversal horizontal.A
AlignItemspropriedade é do tipoFlexAlignItemse especifica como os itens são alinhados no eixo cruzado. ACenteropção faz com que cada item seja centralizado horizontalmente.Se você estivesse usando um
StackLayoutem vez de umFlexLayoutpara essa tarefa, centralizaria todos os itens atribuindo aHorizontalOptionspropriedade de cada item aoCenter. AHorizontalOptionspropriedade não funciona para filhos de umFlexLayout, mas a únicaAlignItemspropriedade realiza o mesmo objetivo. Se precisar, você pode usar a propriedade vinculável anexadaAlignSelfpara substituir aAlignItemspropriedade de itens individuais:<Label Text="FlexLayout in Action" FontSize="Large" FlexLayout.AlignSelf="Start" />Com essa mudança, este
Labelé posicionado na borda esquerda doFlexLayoutquando a ordem de leitura é da esquerda para a direita.A
JustifyContentpropriedade é do tipoFlexJustifye especifica como os itens são organizados no eixo principal. ASpaceEvenlyopçã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 aVerticalOptionspropriedade de cada item paraCenterAndExpandobter um efeito semelhante. Mas a opção alocariaCenterAndExpandduas vezes mais espaço entre cada item do que antes do primeiro item e depois do último item. Você pode imitar aCenterAndExpandopção deVerticalOptionsdefinindo aJustifyContentpropriedade deFlexLayoutparaSpaceAround.
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 FlexWrapde 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
Orderpropriedade 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 aOrderpropriedade no primeiroBoxViewpara 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 aOrderpropriedade como um valor maior do que seus irmãos.A
Basispropriedade vinculável anexada é definida nos doisBoxViewitens para dar-lhes uma largura de 50 pixels. Essa propriedade é do tipoFlexBasis, uma estrutura que define uma propriedade estática do tipoFlexBasischamadoAuto, que é o padrão. Você pode usarBasispara 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
Growpropriedade é definida no aninhadoLayoute noLabelfilho que representa o conteúdo. Essa propriedade é do tipofloate 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 umGridarquivo .A primeira
Growpropriedade anexada é definida no aninhadoFlexLayout, indicando que esteFlexLayoutdeve ocupar todo o espaço vertical não utilizado dentro do exteriorFlexLayout. A segundaGrowpropriedade anexada é definida na representação doLabelconteúdo, indicando que esse conteúdo deve ocupar todo o espaço horizontal não utilizado dentro do .FlexLayoutHá também uma propriedade vinculável anexada semelhante
Shrinkque você pode usar quando o tamanho das crianças excede o tamanho doFlexLayoutmas 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 FlexLayoutmaior . 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 CenterImage 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:
ColumnColumnReverse(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ãoWrapReverse(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ãoCenterEnd(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ãoCenterStart(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ãoCenterStart(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ãoStretchCenterStart(ou "flex-start" em XAML)End(ou "flex-end" em XAML)
Para qualquer filho individual do , essa configuração de FlexLayoutpropriedade 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.Autostatic , 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 FlexLayouto . 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 FlexLayoutarquivo . 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