Was ist der Unterschied zwischen den Layoutoptionen von Xamarin.Form, insbesondere Fill und Expand?

Kurze Antwort

StartCenterEnd und Fill definieren Sie die Ansicht Ausrichtung innerhalb seiner Raum.

Expand definiert ob es belegt mehr Speicherplatzwenn verfügbar.

Theorie

Die Struktur LayoutOptions steuert zwei unterschiedliche Verhaltensweisen:

1. Ausrichtung: Wie ist der Blick ausgerichtet, innerhalb der übergeordneten Ansicht?

   • Start: Für die vertikale Ausrichtung der Ansicht nach oben verzogen. Für die horizontale Ausrichtung dieser ist in der Regel der linken Seite. (Aber beachten Sie, dass auf Geräten mit rechts-nach-Links-Sprache einstellen-das ist die andere Weise herum, also rechts ausgerichtet wird.)
   • Center: Die Ansicht ist zentriert.
   • End: In der Regel die Ansicht ist von unten oder rechts ausgerichtet wird. (Rechts-nach-Links-Sprachen, natürlich, Links ausgerichtet ist.)
   • Fill: Diese Ausrichtung ist etwas anders. Die Aussicht erstrecken sich über die volle Größe des übergeordneten Ansicht.

   Wenn der Elternteil, jedoch nicht größer, dann Ihre Kinder, werden Sie nicht bemerken einen Unterschied zwischen diesen Ausrichtungen. Die Ausrichtung ist nur von Bedeutung für die übergeordneten Ansichten mit zusätzlicher Speicherplatz zur Verfügung.

2. Ausbau: Wird das element mehr Platz einnehmen, wenn verfügbar?

   • Suffix Expand: Wenn die übergeordnete Ansicht größer ist als die kombinierte Größe aller seiner Kinder, d.h. der zusätzliche Platz zur Verfügung steht, dann ist der Raum bemessen unter untergeordneten Ansichten mit diesem suffix. Diese Kinder werden "besetzen" Ihren Platz, aber nicht unbedingt "füllen". Wir werden haben Sie einen Blick auf das Verhalten in dem Beispiel unten.
   • Kein suffix: Die Kinder ohne Expand suffix nicht bekommen zusätzlichen Platz, auch wenn mehr Speicherplatz verfügbar ist.

   Wieder, wenn die übergeordnete Ansicht ist nicht größer als sein Kinder, den ausbau suffix nicht einen Unterschied machen als gut.

Beispiel

Lassen Sie uns einen Blick auf das folgende Beispiel, um den Unterschied zu sehen zwischen allen acht layout-Optionen.

Die app beinhaltet einen dunklen Grau StackLayout mit acht geschachtelte weiße Tasten, von denen jede ist beschriftet mit seinem vertikalen layout-option. Beim Klick auf einen der buttons, es ordnet seine vertikale layout-option, um die stack-layout. Auf diese Weise können wir leicht testen, das zusammenspiel von Ansichten mit Eltern, sowohl mit verschiedenen layout-option.

(Die letzten paar Zeilen code fügen Sie zusätzliche gelbe Kästen. Wir kommen zurück zu diesem einen moment.)

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,
        });
    }
}

Die folgenden screenshots zeigen das Ergebnis, wenn auf jeder der acht Tasten. Wir machen die folgenden Beobachtungen:

• Solange die Eltern stackLayout dicht ist (nicht Fill auf der Seite), das vertikale layout-option für jedes Button vernachlässigbar ist.
• Das vertikale layout-option ist nur von Bedeutung, wenn die stackLayout größer ist (z.B. über Fill Ausrichtung) und die einzelnen Tasten haben die Expand suffix.
• Zusätzliche Raum ist ebenmäßig proportioniert unter alle Tasten mit Expand suffix. Um dies zu sehen, mehr klar, wir Hinzugefügt gelben horizontalen Linien zwischen je zwei benachbarten Tasten.
• - Tasten mit mehr Platz als Ihr beantragten Höhe nicht unbedingt "füllen". In diesem Fall ist das tatsächliche Verhalten gesteuert durch Ihre Ausrichtung. E. g. Sie sind entweder ausgerichtet auf top -, center-oder-Taste Ihrer space-oder füllen Sie es vollständig aus.
• Alle Tasten erstrecken sich über die gesamte Breite des Layouts, da wir nur ändern die VerticalOptions.

Hier finden Sie die entsprechenden hochauflösenden screenshots.

InformationsquelleAutor der Antwort Falko