Respuesta corta
Start, Center, EndY Filldefinir la vista de alineación dentro de su espacio .
Expanddefine si ocupa más espacio si está disponible.
Teoría
La estructura LayoutOptionscontrola dos comportamientos distintos:
Alineación: ¿Cómo se alinea la vista dentro de la vista principal?
Start: Para la alineación vertical, la vista se mueve hacia arriba. Para la alineación horizontal, este suele ser el lado izquierdo. (Pero tenga en cuenta que en dispositivos con configuración de idioma de derecha a izquierda esto es al revés, es decir, alineado a la derecha).Center: La vista está centrada.End: Por lo general, la vista está alineada a la derecha o abajo. (En los idiomas de derecha a izquierda, por supuesto, alineados a la izquierda).Fill: Esta alineación es ligeramente diferente. La vista se extenderá a todo el tamaño de la vista principal.
Si el padre, sin embargo, no es más grande que sus hijos, no notará ninguna diferencia entre esas alineaciones. La alineación solo es importante para las vistas principales con espacio adicional disponible.
Expansión: ¿El elemento ocupará más espacio si está disponible?
- Sufijo
Expand: si la vista principal es mayor que el tamaño combinado de todos sus elementos secundarios, es decir, hay espacio adicional disponible, entonces el espacio se distribuye entre las vistas secundarias con ese sufijo. Esos niños "ocuparán" su espacio, pero no necesariamente lo "llenarán". Echaremos un vistazo a este comportamiento en el siguiente ejemplo.
- Sin sufijo: los niños sin
Expandsufijo no obtendrán espacio adicional, incluso si hay más espacio disponible.
Nuevamente, si la vista principal no es más grande que sus elementos secundarios, el sufijo de expansión tampoco hace ninguna diferencia.
Ejemplo
Echemos un vistazo al siguiente ejemplo para ver la diferencia entre las ocho opciones de diseño.
La aplicación contiene un gris oscuro StackLayoutcon ocho botones blancos anidados, cada uno de los cuales está etiquetado con su opción de diseño vertical. Al hacer clic en uno de los botones, asigna su opción de diseño vertical al diseño de la pila. De esta forma, podemos probar fácilmente la interacción de las vistas con los padres, ambas con diferentes opciones de diseño.
(Las últimas líneas de código agregan cuadros amarillos adicionales. Volveremos a esto en un momento).
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,
});
}
}
Las siguientes capturas de pantalla muestran el resultado al hacer clic en cada uno de los ocho botones. Nosotros hacemos las siguientes observaciones:
- Mientras el padre
stackLayoutesté ajustado (no Fillla página), la opción de diseño vertical de cada uno Buttones insignificante.
- La opción de diseño vertical solo es importante si
stackLayoutes más grande (por ejemplo, mediante Fillalineación) y los botones individuales tienen el Expandsufijo.
- El espacio adicional se distribuye eventualmente entre todos los botones con
Expandsufijo. Para ver esto más claramente, agregamos líneas horizontales amarillas entre cada dos botones vecinos.
- Los botones con más espacio que la altura solicitada no necesariamente lo "llenan". En este caso, el comportamiento real está controlado por su alineación. Por ejemplo, están alineados en la parte superior, central o botón de su espacio o lo llenan por completo.
- Todos los botones abarcan todo el ancho del diseño, ya que solo modificamos el
VerticalOptions.
Aquí encontrará las capturas de pantalla de alta resolución correspondientes.
