Organizar exibições com StackLayout

• 10 minutos

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

O que é um StackLayout, um VerticalStackLayout e um HorizontalStackLayout?

O 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 propriedade Orientation, e o valor padrão é de cima para baixo. A ilustração a seguir mostra uma exibição conceitual de um StackLayout vertical.

• StackLayout tem uma lista de Children herdada da classe base Layout<T>. A lista armazena exibições, o que é útil porque a maioria dos elementos de interface do usuário com os quais você trabalha na MAUI (interface do usuário do aplicativo multiplataforma) do .NET deriva de View. Os painéis de layout também derivam de View, o que significa que é possível aninhar painéis quando necessário.

• VerticalStackLayout e HorizontalStackLayout são os layouts indicados para uso quando você sabe que sua orientação não mudará, pois são otimizados para desempenho.

Como adicionar exibições a um StackLayout

No .NET MAUI, você pode adicionar exibições a um StackLayout no código C# ou no XAML (Extensible Application Markup Language). Veja um exemplo de três exibições adicionadas 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);
    }
}

É possível adicionar as exibições à coleção Children e o StackLayout as posiciona automaticamente em uma lista vertical. Veja qual será a aparência dela em um dispositivo Android:

Para fazer a mesma coisa em XAML, aninhe os filhos dentro das marcas StackLayout. O analisador XAML adiciona as exibições aninhadas à coleção Children automaticamente, porque Children é o ContentProperty para todos os painéis de layout. Veja um exemplo das mesmas três exibições que são adicionadas 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 das exibições na coleção Children determina a ordem de layout quando elas são renderizadas. Para exibições adicionadas em XAML, é usada a ordem textual. Para os filhos adicionados no código, a ordem do layout é determinada pela ordem na qual você chama o método Add.

Como alterar o espaço entre exibições em um StackLayout

É comum querer algum espaço entre os filhos de um StackLayout. StackLayout permite controlar o espaço entre cada filho por meio da propriedade Spacing. O valor padrão é zero unidades, mas é possível defini-lo conforme desejado. Veja um exemplo de como configurar a propriedade Spacing como 30 em XAML:

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

A seguinte captura de tela mostra como a IU será renderizada no Android:

Como definir a orientação de um StackLayout

StackLayout permite organizar filhos em uma coluna ou em uma linha. Você controla esse comportamento definindo sua propriedade Orientation. Até agora, mostramos apenas um StackLayout vertical.

Vertical é o padrão. Definir explicitamente o Orientation como Vertical cabe a você. Alguns programadores preferem uma configuração explícita para tornar o código mais autodocumentado.

Veja um exemplo de como configurar o Orientation como 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 o LayoutOptions de uma exibição em um StackLayout

Toda exibição tem uma propriedade VerticalOptions e uma propriedade HorizontalOptions. É possível usar essas propriedades para definir a posição da exibição dentro da área de exibição retangular fornecida pelo painel de layout.

Conforme mencionado anteriormente, com StackLayout, o comportamento das propriedades LayoutOptions depende da propriedade Orientation de StackLayout. O StackLayout usa a propriedade LayoutOptions na direção oposta à do seu Orientation. Por padrão, um elemento em um layout empilhado não recebe nenhum espaço extra na mesma direção que o Orientation do layout empilhado. Neste caso padrão, atribuir uma posição para essa direção não altera a renderização do elemento. No entanto, quando a posição é combinada com a expansão, há uma alteração na renderização.

E a expansão?

Lembre-se que uma unidade anterior explicou que o struct LayoutOptions contém uma propriedade bool chamada Expands, que agora está obsoleta no .NET MAUI. Ao definir o VerticalOptions e o HorizontalOptions, você pode notar o LayoutOptions de StartAndExpand, CenterAndExpand, EndAndExpand e FillAndExpand. Se você definir LayoutOptions para uma opção com AndExpand, ele será ignorado e a primeira parte do LayoutOptions será usada, como Start, Center, End ou Fill. Se você migrar do Xamarin.Forms, remova todos os AndExpand dessas propriedades. Posteriormente no módulo, veremos como obter uma funcionalidade semelhante ao aprendermos sobre o Grid.

StackLayouts otimizados

Conforme mencionado anteriormente, VerticalStackLayout e HorizontalStackLayout são controles StackLayout otimizados com orientações predefinidas. É recomendado usar esses controles sempre que possível para obter o melhor desempenho do layout. Esses layouts têm as funcionalidade LayoutOptions e Spacing que também estão presentes no StackLayout.

<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>

Verificação de conhecimentos

1.

Como adicionar exibições filhas a um StackLayout?

Por meio da adição de exibições filho à propriedade ChildViews em C#.

Por meio de um código XAML ou C#.

Declare as exibições filhas e, em seguida, use HorizontalOptions ou VerticalOptions, dependendo de como você deseja que as exibições sejam mostradas.

É necessário responder a todas as perguntas antes de verificar o trabalho.