Resposta curta
Start, Center, EndE Filldefinir a vista de alinhamento dentro do seu espaço .
Expanddefine se ele ocupa mais espaço, se disponível.
Teoria
A estrutura LayoutOptionscontrola dois comportamentos distintos:
Alinhamento: como a exibição é alinhada na exibição principal?
Start: Para alinhamento vertical, a vista é movida para o topo. Para o alinhamento horizontal, esse geralmente é o lado esquerdo. (Mas observe que em dispositivos com o idioma da direita para a esquerda é o contrário, isto é, alinhado à direita).Center: A vista é centralizada.End: Geralmente a vista está alinhada por baixo ou para a direita. (Nos idiomas da direita para a esquerda, é claro, alinhados à esquerda.)Fill: Esse alinhamento é um pouco diferente. A exibição se estenderá por todo o tamanho da exibição principal.
Se o pai, porém, não for maior que o filho, você não notará nenhuma diferença entre esses alinhamentos. O alinhamento é importante apenas para as visualizações pai com espaço adicional disponível.
Expansão: o elemento ocupará mais espaço, se disponível?
- Sufixo
Expand: se a visualização pai for maior que o tamanho combinado de todos os seus filhos, ou seja, espaço adicional estiver disponível, o espaço será proporcional entre as visualizações filhos com esse sufixo. Essas crianças "ocuparão" seu espaço, mas não necessariamente o "preencherão". Vamos dar uma olhada nesse comportamento no exemplo abaixo.
- Sem sufixo: os filhos sem
Expandsufixo não receberão espaço adicional, mesmo que haja mais espaço disponível.
Novamente, se a visualização pai não for maior que seus filhos, o sufixo de expansão também não fará diferença.
Exemplo
Vamos dar uma olhada no exemplo a seguir para ver a diferença entre as oito opções de layout.
O aplicativo contém um cinza escuro StackLayoutcom oito botões brancos aninhados, cada um deles marcado com sua opção de layout vertical. Ao clicar em um dos botões, ele atribui sua opção de layout vertical ao layout da pilha. Dessa forma, podemos testar facilmente a interação das visualizações com os pais, ambos com diferentes opções de layout.
(As últimas linhas de código adicionam caixas amarelas adicionais. Voltaremos a isso daqui a pouco.)
public static class App
{
static readonly StackLayout stackLayout = new StackLayout {
BackgroundColor = Color.Gray,
VerticalOptions = LayoutOptions.Start,
Spacing = 2,
Padding = 2,
};
public static Page GetMainPage()
{
AddButton("Start", LayoutOptions.Start);
AddButton("Center", LayoutOptions.Center);
AddButton("End", LayoutOptions.End);
AddButton("Fill", LayoutOptions.Fill);
AddButton("StartAndExpand", LayoutOptions.StartAndExpand);
AddButton("CenterAndExpand", LayoutOptions.CenterAndExpand);
AddButton("EndAndExpand", LayoutOptions.EndAndExpand);
AddButton("FillAndExpand", LayoutOptions.FillAndExpand);
return new NavigationPage(new ContentPage {
Content = stackLayout,
});
}
static void AddButton(string text, LayoutOptions verticalOptions)
{
stackLayout.Children.Add(new Button {
Text = text,
BackgroundColor = Color.White,
VerticalOptions = verticalOptions,
HeightRequest = 20,
Command = new Command(() => {
stackLayout.VerticalOptions = verticalOptions;
(stackLayout.ParentView as Page).Title = "StackLayout: " + text;
}),
});
stackLayout.Children.Add(new BoxView {
HeightRequest = 1,
Color = Color.Yellow,
});
}
}
As seguintes capturas de tela mostram o resultado ao clicar em cada um dos oito botões. Nós fazemos as seguintes observações:
- Enquanto o pai
stackLayoutestiver apertado (não Filla página), a opção de layout vertical de cada um Buttonserá insignificante.
- A opção de layout vertical importa apenas se
stackLayoutfor maior (por exemplo, através do Fillalinhamento) e se os botões individuais tiverem o Expandsufixo.
- Espaço adicional é proporcionalmente proporcional entre todos os botões com
Expandsufixo. Para ver isso mais claramente, adicionamos linhas horizontais amarelas entre cada dois botões vizinhos.
- Os botões com mais espaço do que a altura solicitada não o "preenchem" necessariamente. Nesse caso, o comportamento real é controlado por seu alinhamento. Por exemplo, eles estão alinhados na parte superior, central ou no botão de seu espaço ou preenchem-no completamente.
- Todos os botões se estendem por toda a largura do layout, pois apenas modificamos o
VerticalOptions.
Aqui você encontra as capturas de tela de alta resolução correspondentes.
