Organizar vistas com StackLayout

O empilhamento de exibições em uma lista vertical ou horizontal é um design comum para interfaces de usuário. Pense em algumas páginas comuns em aplicativos. Os exemplos incluem páginas de login, registro e configurações. Todas essas páginas geralmente contêm conteúdo empilhado. Nesta unidade, você aprenderá a organizar exibições em uma lista vertical ou horizontal usando StackLayout e os controles VerticalStackLayout StackLayout otimizados e HorizontalStackLayout.

O que é um StackLayout, VerticalStackLayout e HorizontalStackLayout?

StackLayout é um contêiner de layout que organiza suas exibições filhas da esquerda para a direita ou de cima para baixo. A direção é baseada em sua Orientation propriedade e o valor padrão é de cima para baixo. A ilustração a seguir mostra uma visão conceitual de um arquivo .StackLayout

• StackLayout tem uma lista do Children que herda da sua classe Layout<T>base. A lista armazena modos de exibição, o que é útil porque a maioria dos elementos da interface do usuário com os quais você trabalha no .NET Multi-platform App UI (MAUI) deriva do View. Os painéis de layout também derivam do , o Viewque significa que você pode aninhar painéis se precisar.

• VerticalStackLayout e HorizontalStackLayout são os layouts preferidos para usar quando você sabe que sua orientação não vai mudar, porque eles são otimizados para desempenho.

Como adicionar modos de exibição a um StackLayout

No .NET MAUI, você pode adicionar modos de exibição a um StackLayout código em C# ou em Extensible Application Markup Language (XAML). Aqui está um exemplo de três modos de exibição adicionados usando código:

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

Você pode adicionar os modos de exibição à Children coleção e posicioná-los StackLayout automaticamente em uma lista vertical. Veja como é em um dispositivo Android:

Para fazer a mesma coisa em XAML, aninhe os filhos dentro das StackLayout tags. O analisador XAML adiciona os modos de exibição aninhados à Children coleção automaticamente porque Children é o ContentProperty para todos os painéis de layout. Aqui está um exemplo dos mesmos três modos de exibição sendo adicionados a um StackLayout em XAML:

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

Como as exibições são ordenadas em um StackLayout

A ordem dos modos de exibição na Children coleção determina sua ordem de layout quando eles são renderizados. Para modos de exibição adicionados em XAML, a ordem textual é usada. Para crianças adicionadas no código, a ordem na qual você chama o Add método determina a ordem do layout.

Como alterar o espaço entre modos de exibição em um StackLayout

É comum querer algum espaço entre os filhos de um StackLayout. StackLayout Permite controlar o espaço entre cada criança usando a Spacing propriedade. O valor padrão é zero unidades, mas você pode defini-lo para o que parecer bom para você. Veja um exemplo de como definir a Spacing propriedade como 30 em XAML:

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

A captura de tela a seguir mostra como a interface do usuário seria renderizada no Android:

Como definir a orientação de um StackLayout

StackLayout Permite organizar as crianças em uma coluna ou linha. Você controla esse comportamento definindo sua Orientation propriedade. Até agora, temos mostrado apenas um vertical StackLayout.

Vertical é a predefinição. Se você define explicitamente o Orientation para Vertical é com você. Alguns programadores preferem uma configuração explícita para tornar o código mais auto-documentável.

Aqui está um exemplo de como definir o Orientation para Horizontal em XAML:

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

Definir LayoutOptions de um modo de exibição em um StackLayout

Cada vista tem uma VerticalOptions e HorizontalOptions propriedade. Você pode usar essas propriedades para definir a posição da exibição dentro da área de exibição retangular fornecida pelo painel de layout.

Como observado anteriormente, com , o StackLayoutcomportamento das LayoutOptions propriedades depende da Orientation propriedade do StackLayout. StackLayout usa a LayoutOptions propriedade na direção oposta ao seu Orientation. Por padrão, um elemento em um layout de pilha não recebe espaço extra na mesma direção do Orientation layout de pilha. A atribuição de uma posição para essa direção neste caso padrão não altera a renderização do elemento. Há uma mudança na renderização, porém, quando a posição é combinada com a expansão.

E a expansão?

Lembre-se de uma unidade anterior que o struct contém uma LayoutOptions propriedade chamada bool que agora está obsoleta Expands no .NET MAUI. Ao definir o VerticalOptions e HorizontalOptions, você pode notar o LayoutOptions de StartAndExpand, CenterAndExpand, EndAndExpand, e FillAndExpand. Se você definir LayoutOptions uma dessas AndExpand opções, a opção será ignorada e a primeira parte da LayoutOptions será usada, como Start, Center, End, ou Fill. Se você estiver migrando do Xamarin.Forms, deverá remover todas AndExpand essas propriedades. Mais adiante no módulo, veremos como alcançar uma funcionalidade semelhante quando aprendemos sobre Grido .

StackLayouts otimizados

Como mencionado anteriormente, os VerticalStackLayout controles e HorizontalStackLayout são otimizados StackLayout com orientações predefinidas. Recomendamos que você use esses controles sempre que possível, para obter o melhor desempenho de layout. Estes layouts têm a funcionalidade de LayoutOptions e Spacing que o regular StackLayout tem.

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>