FlexLayout

Visualizar a amostra

A interface do usuário de aplicativo multiplataforma do .NET (.NET MAUI) FlexLayout é um layout que pode organizar seus filhos horizontal e verticalmente em uma pilha e também pode encapsular seus filhos se houver muitos para caber em uma única linha ou coluna. Além disso, FlexLayout pode controlar a orientação e o alinhamento e adaptar-se a diferentes tamanhos de tela. FlexLayout é baseado no Módulo de Layout Flexível Box do CSS.

A classe FlexLayout define as seguintes propriedades:

• AlignContent, do tipo FlexAlignContent, que determina como o mecanismo de layout distribuirá espaço entre crianças que foram dispostas em várias linhas. O valor padrão dessa propriedade é Stretch. Para obter mais informações, consulte AlignContent.
• AlignItems, do tipo FlexAlignItems, que indica como o mecanismo de layout distribuirá espaço entre e ao redor de crianças ao longo do eixo cruzado. O valor padrão dessa propriedade é Stretch. Para obter mais informações, consulte AlignItems.
• Direction, do tipo FlexDirection, que define a direção e o eixo principal dos filhos. O valor padrão dessa propriedade é Row. Para obter mais informações, consulte Direção.
• JustifyContent, do tipo FlexJustify, que especifica como o espaço é distribuído entre e ao redor de crianças ao longo do eixo principal. O valor padrão dessa propriedade é Start. Para obter mais informações, consulte JustifyContent.
• Position, do tipo FlexPosition, que determina se a posição dos filhos é relativa umas às outras ou usando valores fixos. O valor padrão dessa propriedade é Relative.
• Wrap, do tipo FlexWrap, que controla se as crianças são dispostas em uma única linha ou em várias linhas. O valor padrão dessa propriedade é NoWrap. Para obter mais informações, consulte Wrap.
• AlignSelf, do tipo FlexAlignSelf, que é uma propriedade anexada que indica como o mecanismo de layout distribuirá o espaço entre e ao redor dos filhos para um filho específico ao longo do eixo cruzado. O valor padrão dessa propriedade é Auto. Para obter mais informações, consulte AlignSelf.
• Basis, do tipo FlexBasis, que é uma propriedade anexada que define o tamanho principal inicial do filho antes que o espaço livre seja distribuído de acordo com outros valores de propriedade. O valor padrão dessa propriedade é Auto. Para obter mais informações, consulte Base.
• Grow, do tipo float, que é uma propriedade anexada que especifica a quantidade de espaço disponível que o filho deve usar no eixo principal. O valor padrão dessa propriedade é 0,0. Um retorno de chamada de validação garante que, quando a propriedade for definida, seu valor seja maior ou igual a 0. Para obter mais informações, consulte Grow.
• Order, do tipo int, que é uma propriedade anexada que determina se o filho deve ser disposto antes ou depois de outras crianças no contêiner. O valor padrão dessa propriedade é 0. Para obter mais informações, consulte Order.
• Shrink, do tipo float, que é uma propriedade anexada que controla como uma criança deve reduzir para que todas as crianças possam caber dentro do contêiner. O valor padrão dessa propriedade é 1.0. Um retorno de chamada de validação garante que, quando a propriedade for definida, seu valor seja maior ou igual a 0. Para obter mais informações, consulte Shrink.

Essas propriedades são suportadas por BindableProperty objetos, o que significa que as propriedades podem ser alvos de associações de dados e estilizadas.

FlexLayout e seus filhos podem ser parcialmente estilizados usando CSS (Folhas de Estilo em Cascata). Para obter mais informações, consulte Aplicativos de estilo usando CSS (Folhas de Estilo em Cascata).

Orientação e alinhamento

As propriedades Direction, Wrap, JustifyContent, AlignItems, AlignContent e Position vinculáveis podem ser definidas em um FlexLayout para controlar a orientação e o alinhamento de todos os elementos filhos.

Direção

A Direction propriedade, do tipo FlexDirection, define a direção e o eixo principal dos filhos. A enumeração FlexDirection define os seguintes membros:

• Column, que indica que os filhos devem ser empilhados verticalmente.
• ColumnReverse (ou "coluna inversa" em XAML), que indica que as crianças devem ser empilhadas verticalmente em ordem inversa.
• Row, que indica que as crianças devem ser empilhadas horizontalmente. Este é o valor padrão da propriedade Direction.
• RowReverse (ou "row-reverse" em XAML), que indica que os filhos devem ser dispostos horizontalmente em ordem inversa.

Quando a Direction propriedade for definida como Column, ou ColumnReverse, o eixo principal será o eixo y e os itens serão empilhados verticalmente. Quando a Direction propriedade for definida como Row, ou RowReverse, o eixo principal será o eixo x e as crianças serão empilhadas horizontalmente.

Encapsular

A propriedade Wrap, do tipo FlexWrap, controla se os elementos são dispostos em uma linha única ou em várias linhas. A enumeração FlexWrap define os seguintes membros:

• NoWrap, que indica que as crianças são dispostas em uma única linha. Este é o valor padrão da propriedade Wrap.
• Wrap, que indica que os itens são dispostos em várias linhas, se necessário.
• Reverse (ou "wrap-reverse" em XAML), que indica que os itens são dispostos em várias linhas, se necessário, em ordem inversa.

Quando a Wrap propriedade é definida como NoWrap e o eixo principal é restrito, sem ser largo ou alto o suficiente para acomodar todos os filhos, o FlexLayout faz os itens menores. Você pode controlar o fator de redução de crianças com a Shrink propriedade associável anexada.

Quando a Wrap propriedade é definida como Wrap ou WrapReverse, a AlignContent propriedade pode ser usada para especificar como as linhas devem ser distribuídas.

JustifyContent

A JustifyContent propriedade, do tipo FlexJustify, especifica como o espaço é distribuído entre e ao redor de crianças ao longo do eixo principal. A enumeração FlexJustify define os seguintes membros:

• Start (ou "flex-start" em XAML), que indica que as crianças devem ser alinhadas no início. Este é o valor padrão da propriedade JustifyContent.
• Center, que indica que as crianças devem ser alinhadas ao redor do centro.
• End (ou "flex-end" em XAML), que indica que as crianças devem ser alinhadas no final.
• SpaceBetween (ou "espaço entre" em XAML), que indica que as crianças devem ser distribuídas uniformemente, com o primeiro filho sendo no início e o último filho sendo no final.
• SpaceAround (ou "space-around" em XAML), que indica que as crianças devem ser distribuídas uniformemente, com os primeiros e últimos filhos tendo um espaço de meio tamanho.
• SpaceEvenly, que indica que as crianças devem ser distribuídas uniformemente, com todas as crianças tendo espaço igual ao seu redor.

AlignItems

A AlignItems propriedade, do tipo FlexAlignItems, indica como o mecanismo de layout distribuirá espaço entre e ao redor de crianças ao longo do eixo cruzado. A enumeração FlexAlignItems define os seguintes membros:

• Stretch, que indica que as crianças devem ser esticadas. Esse é o valor padrão da propriedade AlignItems.
• Center, que indica que as crianças devem ser alinhadas ao redor do centro.
• Start (ou "flex-start" em XAML), que indica que as crianças devem ser alinhadas no início.
• End (ou "flex-end" em XAML), que indica que as crianças devem ser alinhadas no final.

Essa é uma das duas propriedades que indica como as crianças são alinhadas no eixo cruzado. Em cada linha, os filhos são estendidos ou alinhados no início, centro ou final de cada item.

Para qualquer filho individual, a AlignItems configuração pode ser substituída pela AlignSelf propriedade associável anexada.

AlignContent

A propriedade AlignContent do tipo FlexAlignContent determina como o mecanismo de layout distribuirá espaço entre e ao redor dos elementos dispostos em várias linhas. A enumeração FlexAlignContent define os seguintes membros:

• Stretch, que indica que as crianças devem ser estendidas. Esse é o valor padrão da propriedade AlignContent.
• Center, que indica que as crianças devem ser alinhadas ao redor do centro.
• Start (ou "flex-start" em XAML), que indica que as crianças devem ser alinhadas no início.
• End (ou "flex-end" em XAML), que indica que as crianças devem ser alinhadas no final.
• SpaceBetween (ou "espaço entre" em XAML), que indica que as crianças devem ser distribuídas uniformemente, com o primeiro filho sendo no início e o último filho sendo no final.
• SpaceAround (ou "space-around" em XAML), que indica que as crianças devem ser distribuídas uniformemente, com os primeiros e últimos filhos tendo um espaço de meio tamanho.
• SpaceEvenly, que indica que as crianças devem ser distribuídas uniformemente, com todas as crianças tendo espaço igual ao seu redor.

A AlignContent propriedade não tem efeito quando há apenas uma linha ou coluna.

Alinhamento e dimensionamento filho

As propriedades associáveis anexadas AlignSelf, Order, Basis, Grow e Shrink podem ser definidas nos filhos do FlexLayout para controlar a orientação, o alinhamento e o dimensionamento das crianças.

Auto-alinhamento

A propriedade AlignSelf, do tipo FlexAlignSelf, indica como o motor de layout distribuirá espaço entre e ao redor das crianças para uma criança específica ao longo do eixo transversal. A enumeração FlexAlignSelf define os seguintes membros:

• Auto, que indica que um filho deve ser alinhado de acordo com o valor de alinhamento de seu pai. Este é o valor padrão da propriedade AlignSelf.
• Stretch, que indica que uma criança deve ser ampliada.
• Center, que indica que uma criança deve ser alinhada ao redor do centro.
• Start (ou "flex-start" em XAML), que indica que um filho deve ser alinhado no início.
• End (ou "flex-end" em XAML), que indica que um filho deve ser alinhado no final.

Para cada filho individual de FlexLayout, essa propriedade substitui a propriedade AlignItems definida em FlexLayout. A configuração padrão de Auto significa usar a configuração AlignItems.

No XAML, essa propriedade é definida em um filho sem qualquer referência ao pai FlexLayout :

<Label FlexLayout.AlignSelf="Center"
       ... />

O código C# equivalente é:

Label label = new Label();
FlexLayout.SetAlignSelf(label, FlexAlignSelf.Center);

Pedido

A propriedade Order, do tipo int, permite que você altere a ordem em que os filhos FlexLayout estão organizados. O valor padrão dessa propriedade é 0.

Normalmente, as crianças são organizadas na ordem em que são adicionadas ao FlexLayout. No entanto, essa ordem pode ser substituída definindo essa propriedade como um valor inteiro diferente de zero em um ou mais filhos. Em FlexLayout seguida, organiza seus filhos com base em seus Order valores de propriedade. Crianças com os mesmos valores de propriedade Order são ordenadas na ordem em que são adicionadas ao FlexLayout.

Base

A Basis propriedade, do tipo FlexBasis, define o tamanho inicial do filho no eixo principal antes que o espaço livre seja distribuído de acordo com os valores de outras propriedades. O valor especificado por essa propriedade é o tamanho ao longo do eixo principal do pai FlexLayout. Portanto, essa propriedade indica a largura de um filho quando as crianças são organizadas em linhas ou a altura de um filho quando as crianças são organizadas em colunas. Essa propriedade é chamada de base porque especifica um tamanho que é a base de todo o layout subsequente.

O FlexBasis tipo é uma estrutura que permite que o tamanho seja especificado em unidades independentes do dispositivo ou como um percentual do tamanho do FlexLayout. O valor padrão da propriedade Basis é Auto, o que significa que a largura ou altura solicitada pela criança é usada.

No XAML, você pode usar um número para um tamanho em unidades independentes de dispositivo:

<Label FlexLayout.Basis="40"
       ... />

O código C# equivalente é:

FlexLayout.SetBasis(label, 40);

No XAML, uma porcentagem pode ser especificada da seguinte maneira:

<Label FlexLayout.Basis="25%"
       ... />

O código C# equivalente é:

FlexLayout.SetBasis(label, new FlexBasis(0.25f, true));

O primeiro argumento para o FlexBasis construtor é um valor fracionário float que deve estar no intervalo de 0 a 1. O segundo argumento indica que o tamanho é relativo, em vez de absoluto.

Crescer

A Grow propriedade, do tipo float, especifica a quantidade de espaço disponível que o filho deve usar no eixo principal. O valor padrão dessa propriedade é 0,0 e seu valor deve ser maior ou igual a 0.

A propriedade Grow é usada quando a propriedade Wrap é definida para NoWrap e uma linha de filhos tem uma largura total menor que a largura do FlexLayout, ou uma coluna de filhos tem uma altura menor que a do FlexLayout. A Grow propriedade indica como anexar o espaço restante entre as crianças. Se um único filho receber um valor positivo Grow , esse filho ocupa todo o espaço restante. Como alternativa, o espaço restante também pode ser alocado entre duas ou mais crianças.

Reduzir

A Shrink propriedade, do tipo float, controla como uma criança deve reduzir para que todas as crianças possam caber dentro do contêiner. O valor padrão dessa propriedade é 1,0 e seu valor deve ser maior ou igual a 0.

A Shrink propriedade é usada quando a Wrap propriedade é definida NoWrap e a largura agregada de uma linha de filhos é maior que a largura da FlexLayout, ou a altura agregada de uma única coluna de filhos é maior que a altura da FlexLayout. Normalmente, o FlexLayout exibirá esses filhos ajustando seus tamanhos. A Shrink propriedade pode indicar quais filhos têm prioridade em serem exibidos em seus tamanhos completos.

Exemplos

Os exemplos a seguir demonstram usos comuns de FlexLayout.

Stack

Um FlexLayout pode substituir um StackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.SimpleStackPage"
             Title="Simple Stack">    
    <FlexLayout Direction="Column"
                AlignItems="Center"
                JustifyContent="SpaceEvenly">        
        <Label Text="FlexLayout in Action"
               FontSize="18" />
        <Image Source="dotnet_bot_branded.png"
               HeightRequest="300" />
        <Button Text="Do-Nothing Button" />
        <Label Text="Another Label" />
    </FlexLayout>
</ContentPage>

Neste exemplo, a propriedade Direction é ajustada para Column, o que faz com que os filhos de FlexLayout sejam organizados em uma única coluna. A AlignItems propriedade é definida como Center, o que faz com que cada filho seja centralizado horizontalmente. A JustifyContent propriedade é definida para a SpaceEvenly qual aloca todo o espaço vertical restante igualmente entre todos os filhos, acima do primeiro filho e abaixo do último filho:

Encapsular itens

Uma FlexLayout pode encapsular seus filhos em linhas ou colunas adicionais:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.PhotoWrappingPage"
             Title="Photo Wrapping">
    <Grid>
        <ScrollView>
            <FlexLayout x:Name="flexLayout"
                        Wrap="Wrap"
                        JustifyContent="SpaceAround" />
        </ScrollView>
        ...
    </Grid>
</ContentPage>

Neste exemplo, a Direction propriedade do FlexLayout não está definida, portanto, tem a configuração padrão de Row, o que significa que os filhos são organizados em linhas e o eixo principal é horizontal. A propriedade Wrap é definida como Wrap, o que faz com que os elementos sejam dispostos para a próxima linha se houver muitos para caber em uma única linha. A propriedade JustifyContent é definida como SpaceAround, a qual aloca todo o espaço restante no eixo principal, de modo que cada filho seja cercado pela mesma quantidade de espaço.

O arquivo code-behind para este exemplo recupera uma coleção de fotos e as adiciona ao FlexLayout.

O FlexLayout é filho de um ScrollView. Portanto, se houver muitas linhas para caber na página, ela ScrollView terá uma propriedade Orientation padrão Vertical e permitirá a rolagem vertical.

Layout da página

Há um layout padrão no design da Web chamado santo graal porque é um formato de layout que é muito desejável, mas muitas vezes difícil de perceber com perfeição. O layout consiste em um cabeçalho na parte superior da página e um rodapé na parte inferior, ambos estendendo-se até a largura total da página. Ocupando o centro da página está o conteúdo principal, mas geralmente com um menu colunar à esquerda do conteúdo e informações complementares (às vezes chamadas de área de destaque) à direita. Esse layout pode ser realizado com um FlexLayout.

O exemplo a seguir mostra uma implementação desse layout usando um FlexLayout aninhado em outro elemento.

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="FlexLayoutDemos.Views.HolyGrailLayoutPage"
             Title="Holy Grail Layout">

    <FlexLayout Direction="Column">

        <!-- Header -->
        <Label Text="HEADER"
               FontSize="18"
               BackgroundColor="Aqua"
               HorizontalTextAlignment="Center" />

        <!-- Body -->
        <FlexLayout FlexLayout.Grow="1">

            <!-- Content -->
            <Label Text="CONTENT"
                   FontSize="18"
                   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="18"
               BackgroundColor="Pink"
               HorizontalTextAlignment="Center" />
    </FlexLayout>
</ContentPage>

As áreas de navegação e as área lateral são renderizadas com um BoxView tanto à esquerda quanto à direita. O primeiro FlexLayout 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 organizados em uma linha:

Neste exemplo, a Order propriedade é definida no primeiro BoxView como um valor menor que seus irmãos para fazer com que ela apareça como o primeiro item na linha. A propriedade Basis é definida nos dois objetos BoxView para lhes dar uma largura de 50 unidades independente de dispositivo. A propriedade Grow é definida no FlexLayout aninhado para indicar que este FlexLayout deve ocupar todo o espaço vertical não utilizado dentro do FlexLayout exterior. Além disso, a propriedade Grow é definida em Label, que representa o conteúdo, para indicar que esse conteúdo deve ocupar todo o espaço horizontal não utilizado dentro do elemento FlexLayout aninhado.