webentwicklung-frage-antwort-db.com.de

Was ist der Unterschied zwischen Xamarin.Forms LayoutOptions, insbesondere Fill and Expand?

In Xamarin.Forms hat jeder View die beiden Eigenschaften HorizontalOptions und VerticalOptions. Beide sind vom Typ LayoutOptions und können einen der folgenden Werte haben:

  • LayoutOptions.Start
  • LayoutOptions.Center
  • LayoutOptions.End
  • LayoutOptions.Fill
  • LayoutOptions.StartAndExpand
  • LayoutOptions.CenterAndExpand
  • LayoutOptions.EndAndExpand
  • LayoutOptions.FillAndExpand

Anscheinend wird die Ausrichtung der Ansicht in der übergeordneten Ansicht gesteuert. Aber wie genau verhält sich jede einzelne Option? Und was ist der Unterschied zwischen Fill und dem Suffix Expand?

158
Falko

Kurze Antwort

Start, Center, End und Fill definieren die Ausrichtung der Ansicht innerhalb ihres Raums .

Expand definiert , ob mehr Platz belegt wird , falls verfügbar.

Theorie

Die Struktur LayoutOptions steuert zwei unterschiedliche Verhaltensweisen:

  1. Ausrichtung: Wie ist die Ansicht in der übergeordneten Ansicht ausgerichtet?

    • Start: Bei vertikaler Ausrichtung wird die Ansicht nach oben verschoben. Bei horizontaler Ausrichtung ist dies normalerweise die linke Seite. (Beachten Sie jedoch, dass dies bei Geräten mit Spracheinstellung von rechts nach links umgekehrt ist, d. H. Rechtsbündig.)
    • Center: Die Ansicht ist zentriert.
    • End: Normalerweise ist die Ansicht unten oder rechts ausgerichtet. (Bei Sprachen von rechts nach links natürlich linksbündig.)
    • Fill: Diese Ausrichtung unterscheidet sich geringfügig. Die Ansicht erstreckt sich über die gesamte Größe der übergeordneten Ansicht.

    Wenn das übergeordnete Element jedoch nicht größer als die untergeordneten Elemente ist, werden Sie keinen Unterschied zwischen diesen Ausrichtungen feststellen. Die Ausrichtung ist nur für übergeordnete Ansichten von Bedeutung, wenn zusätzlicher Speicherplatz verfügbar ist.

  2. Erweiterung: Wird das Element, falls verfügbar, mehr Platz belegen?

    • Suffix Expand: Wenn die übergeordnete Ansicht größer ist als die Gesamtgröße aller untergeordneten Ansichten, d. H. Zusätzlicher Speicherplatz verfügbar ist, wird der Speicherplatz unter den untergeordneten Ansichten mit diesem Suffix proportionalisiert. Diese Kinder "belegen" ihren Platz, "füllen" ihn aber nicht unbedingt. Wir werden uns dieses Verhalten im folgenden Beispiel ansehen.
    • Kein Suffix: Die untergeordneten Elemente ohne das Suffix Expand erhalten keinen zusätzlichen Speicherplatz, auch wenn mehr Speicherplatz verfügbar ist.

    Auch hier macht das Erweiterungssuffix keinen Unterschied, wenn die übergeordnete Ansicht nicht größer als die untergeordneten Ansichten ist.

Beispiel

Schauen wir uns das folgende Beispiel an, um den Unterschied zwischen allen acht Layoutoptionen zu erkennen.

Die App enthält ein dunkelgraues StackLayout mit acht verschachtelten weißen Tasten, von denen jede mit ihrer vertikalen Layoutoption beschriftet ist. Wenn Sie auf eine der Schaltflächen klicken, wird dem Stapel-Layout die Option für das vertikale Layout zugewiesen. Auf diese Weise können wir auf einfache Weise die Interaktion von Ansichten mit Eltern testen, beide mit unterschiedlichen Layoutoptionen.

(In den letzten Codezeilen werden zusätzliche gelbe Kästchen hinzugefügt. Wir werden gleich darauf zurückkommen.)

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 Sie auf die acht Schaltflächen klicken. Wir machen die folgenden Beobachtungen:

  • Solange das übergeordnete stackLayout eng ist (nicht Fill die Seite), ist die vertikale Layoutoption jedes Button vernachlässigbar.
  • Die vertikale Layoutoption ist nur von Bedeutung, wenn das stackLayout größer ist (z. B. über die Ausrichtung Fill) und die einzelnen Schaltflächen das Suffix Expand haben.
  • Zusätzlicher Platz wird eventuell unter allen Schaltflächen mit dem Suffix Expand aufgeteilt. Um dies deutlicher zu sehen, haben wir zwischen jeweils zwei benachbarten Schaltflächen gelbe horizontale Linien eingefügt.
  • Schaltflächen mit mehr Platz als der gewünschten Höhe füllen sie nicht unbedingt aus. In diesem Fall wird das tatsächliche Verhalten durch ihre Ausrichtung gesteuert. Z.B. Sie sind entweder oben, in der Mitte oder auf der Schaltfläche ihres Bereichs ausgerichtet oder füllen ihn vollständig aus.
  • Alle Schaltflächen erstrecken sich über die gesamte Breite des Layouts, da wir nur das VerticalOptions ändern.

Screenshots

Hier finden Sie die entsprechenden hochauflösenden Screenshots.

319
Falko

In der aktuellen Version von Xamarin.Forms ist ein kleiner Fehler aufgetreten. Vielleicht war es schon eine Weile dort.

CenterAndExpand wird im Allgemeinen nicht erweitert, und das Umgehen kann verwirrend sein.

Wenn Sie zum Beispiel ein StackLayout auf CenterAndExpand gesetzt haben, dann setzen Sie eine Beschriftung, die ebenfalls auf CenterAndExpand gesetzt ist, und erwarten eine Beschriftung mit der vollen Breite des StackLayout. Nee. Es wird sich nicht ausdehnen. Sie müssen StackLayout auf "FillAndExpand" setzen, damit das verschachtelte Label-Objekt auf die volle Breite des StackLayout erweitert wird. Anschließend müssen Sie das Label anweisen, den Text zu zentrieren. nicht selbst als Objekt, mit HorizontalTextAlignment="Center". Meiner Erfahrung nach müssen sowohl das übergeordnete als auch das verschachtelte Kind auf FillAndExpand gesetzt sein, wenn Sie wirklich sicherstellen möchten, dass es entsprechend erweitert wird.

        <StackLayout HorizontalOptions="FillAndExpand"
                     Orientation="Vertical"
                     WidthRequest="300">
            <Label BackgroundColor="{StaticResource TileAlerts}"
                   HorizontalOptions="FillAndExpand"
                   Style="{StaticResource LabelStyleReversedLrg}"
                   HorizontalTextAlignment="Center"
                   Text="Alerts" />
14
Clint StLaurent