StackLayout

Artykuł
09/30/2024

.NET MAUI StackLayout.

Interfejs użytkownika aplikacji wieloplatformowej platformy .NET (.NET MAUI) StackLayout organizuje widoki podrzędne w jednowymiarowym stosie w poziomie lub w pionie. Domyślnie układ StackLayout ma orientację pionową. Ponadto StackLayout element może służyć jako układ nadrzędny zawierający inne układy podrzędne.

Klasa StackLayout definiuje następujące właściwości:

Orientation, typu StackOrientation, reprezentuje kierunek, w którym są rozmieszczone widoki podrzędne. Wartość domyślna tej właściwości to Vertical.
Spacing, typu double, wskazuje ilość miejsca między każdym widokiem podrzędnym. Wartość domyślna tej właściwości to 0.

Te właściwości są wspierane przez BindableProperty obiekty, co oznacza, że właściwości mogą być obiektami docelowymi powiązań danych i stylizowanymi.

Orientacja pionowa

Poniższy kod XAML pokazuje, jak utworzyć orientację StackLayout pionową zawierającą różne widoki podrzędne:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.XAML.VerticalStackLayoutPage"
             Title="Vertical StackLayout demo">
    <StackLayout Margin="20">
        <Label Text="Primary colors" />
        <BoxView Color="Red"
                 HeightRequest="40" />
        <BoxView Color="Yellow"
                 HeightRequest="40" />
        <BoxView Color="Blue"
                 HeightRequest="40" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green"
                 HeightRequest="40" />
        <BoxView Color="Orange"
                 HeightRequest="40" />
        <BoxView Color="Purple"
                 HeightRequest="40" />
    </StackLayout>
</ContentPage>

W tym przykładzie tworzony jest pionowy StackLayout obiekt zawierający Label i BoxView . Domyślnie między widokami podrzędnym nie ma spacji:

Vertically oriented .NET MAUI StackLayout.

Równoważny kod języka C# to:

public class VerticalStackLayoutPage : ContentPage
{
    public VerticalStackLayoutPage()
    {
        Title = "Vertical StackLayout demo";

        StackLayout stackLayout = new StackLayout { Margin = new Thickness(20) };

        stackLayout.Add(new Label { Text = "Primary colors" });
        stackLayout.Add(new BoxView { Color = Colors.Red, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Yellow, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Blue, HeightRequest = 40 });
        stackLayout.Add(new Label { Text = "Secondary colors" });
        stackLayout.Add(new BoxView { Color = Colors.Green, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Orange, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Purple, HeightRequest = 40 });

        Content = stackLayout;
    }
}

Uwaga

Wartość Margin właściwości reprezentuje odległość między elementem a sąsiednimi elementami. Aby uzyskać więcej informacji, zobacz Kontrolki położenia.

Orientacja pozioma

Poniższy kod XAML pokazuje, jak utworzyć obiekt zorientowany StackLayout w poziomie, ustawiając jego Orientation właściwość na Horizontalwartość :

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.XAML.HorizontalStackLayoutPage"
             Title="Horizontal StackLayout demo">
    <StackLayout Margin="20"
                 Orientation="Horizontal"
                 HorizontalOptions="Center">
        <BoxView Color="Red"
                 WidthRequest="40" />
        <BoxView Color="Yellow"
                 WidthRequest="40" />
        <BoxView Color="Blue"
                 WidthRequest="40" />
        <BoxView Color="Green"
                 WidthRequest="40" />
        <BoxView Color="Orange"
                 WidthRequest="40" />
        <BoxView Color="Purple"
                 WidthRequest="40" />
    </StackLayout>
</ContentPage>

W tym przykładzie tworzony jest poziomy StackLayout zawierający BoxView obiekty bez spacji między widokami podrzędnymi:

Horizontally oriented .NET MAUI StackLayout.

Równoważny kod języka C# to:

public class HorizontalStackLayoutPage : ContentPage
{
    public HorizontalStackLayoutPage()
    {
        Title = "Horizontal StackLayout demo";

        StackLayout stackLayout = new StackLayout
        {
            Margin = new Thickness(20),
            Orientation = StackOrientation.Horizontal,
            HorizontalOptions = LayoutOptions.Center
        };

        stackLayout.Add(new BoxView { Color = Colors.Red, WidthRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Yellow, WidthRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Blue, WidthRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Green, WidthRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Orange, WidthRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Purple, WidthRequest = 40 });

        Content = stackLayout;
    }
}

Odstęp między widokami podrzędnym

Odstępy między widokami podrzędnym w obiekcie StackLayout można zmienić, ustawiając Spacing właściwość na double wartość:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.XAML.StackLayoutSpacingPage"
             Title="StackLayout Spacing demo">
    <StackLayout Margin="20"
                 Spacing="6">
        <Label Text="Primary colors" />
        <BoxView Color="Red"
                 HeightRequest="40" />
        <BoxView Color="Yellow"
                 HeightRequest="40" />
        <BoxView Color="Blue"
                 HeightRequest="40" />
        <Label Text="Secondary colors" />
        <BoxView Color="Green"
                 HeightRequest="40" />
        <BoxView Color="Orange"
                 HeightRequest="40" />
        <BoxView Color="Purple"
                 HeightRequest="40" />
    </StackLayout>
</ContentPage>

W tym przykładzie tworzony jest pionowy StackLayout obiekt zawierający obiekty Label BoxView , które mają sześć niezależnych od urządzenia jednostek przestrzeni pionowej między nimi:

Vertically oriented .NET MAUI StackLayout with spacing between child views.

Napiwek

Właściwość Spacing można ustawić na wartości ujemne, aby widoki podrzędne nakładały się na siebie.

Równoważny kod języka C# to:

public class StackLayoutSpacingPage : ContentPage
{
    public StackLayoutSpacingPage()
    {
        Title = "StackLayout Spacing demo";

        StackLayout stackLayout = new StackLayout
        {
            Margin = new Thickness(20),
            Spacing = 6
        };

        stackLayout.Add(new Label { Text = "Primary colors" });
        stackLayout.Add(new BoxView { Color = Colors.Red, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Yellow, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Blue, HeightRequest = 40 });
        stackLayout.Add(new Label { Text = "Secondary colors" });
        stackLayout.Add(new BoxView { Color = Colors.Green, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Orange, HeightRequest = 40 });
        stackLayout.Add(new BoxView { Color = Colors.Purple, HeightRequest = 40 });

        Content = stackLayout;
    }
}

Położenie i rozmiar widoków podrzędnych

Rozmiar i położenie widoków podrzędnych w obiekcie StackLayout zależą od wartości właściwości i WidthRequest widoków HeightRequest podrzędnych oraz wartości ich HorizontalOptions właściwości iVerticalOptions. W pionie StackLayoutwidoki podrzędne rozszerzają się, aby wypełnić dostępną szerokość, gdy ich rozmiar nie jest jawnie ustawiony. Podobnie w poziomych widokach podrzędnych StackLayoutrozwiń, aby wypełnić dostępną wysokość, gdy ich rozmiar nie jest jawnie ustawiony.

Właściwości HorizontalOptions StackLayouti obiektu , VerticalOptions i jego widoków podrzędnych można ustawić na pola z LayoutOptions struktury, która hermetyzuje preferencję układu wyrównania. Ta preferencja układu określa położenie i rozmiar widoku podrzędnego w układzie nadrzędnym.

Poniższy przykład XAML ustawia preferencje wyrównania dla każdego widoku podrzędnego w pliku StackLayout:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.XAML.AlignmentPage"
             Title="Alignment demo">
    <StackLayout Margin="20"
                 Spacing="6">
        <Label Text="Start"
               BackgroundColor="Gray"
               HorizontalOptions="Start" />
        <Label Text="Center"
               BackgroundColor="Gray"
               HorizontalOptions="Center" />
        <Label Text="End"
               BackgroundColor="Gray"
               HorizontalOptions="End" />
        <Label Text="Fill"
               BackgroundColor="Gray"
               HorizontalOptions="Fill" />
    </StackLayout>
</ContentPage>

W tym przykładzie preferencje wyrównania są ustawiane na Label obiektach, aby kontrolować ich położenie w obiekcie StackLayout. Pola Start, Center, Endi Fill służą do definiowania wyrównania Label obiektów w obiekcie nadrzędnym StackLayout:

.NET MAUI StackLayout with alignment options specified.

Obiekt StackLayout zachowuje tylko preferencje wyrównania w widokach podrzędnych, których kierunek jest przeciwny do orientacji obiektu StackLayout. W związku z tym widoki podrzędne obiektu Label w obiekcie StackLayout w orientacji pionowej mają właściwości HorizontalOptions ustawiane na jedno z pól wyrównania:

Start, który umieszcza element Label po lewej stronie obiektu StackLayout.
Center, które powoduje wyśrodkowanie obiektu Label w obiekcie StackLayout.
End, który umieszcza element Label po prawej stronie obiektu StackLayout.
Fill, które zapewnia, że obiekt Label wypełnia szerokość obiektu StackLayout.

Równoważny kod języka C# to:

public class AlignmentPage : ContentPage
{
    public AlignmentPage()
    {
        Title = "Alignment demo";

        StackLayout stackLayout = new StackLayout
        {
            Margin = new Thickness(20),
            Spacing = 6
        };

        stackLayout.Add(new Label { Text = "Start", BackgroundColor = Colors.Gray, HorizontalOptions = LayoutOptions.Start });
        stackLayout.Add(new Label { Text = "Center", BackgroundColor = Colors.Gray, HorizontalOptions = LayoutOptions.Center });
        stackLayout.Add(new Label { Text = "End", BackgroundColor = Colors.Gray, HorizontalOptions = LayoutOptions.End });
        stackLayout.Add(new Label { Text = "Fill", BackgroundColor = Colors.Gray, HorizontalOptions = LayoutOptions.Fill });

        Content = stackLayout;
    }
}

Aby uzyskać więcej informacji na temat wyrównania, zobacz Wyrównanie widoków w układach.

Zagnieżdżone obiekty StackLayout

Element StackLayout może służyć jako układ nadrzędny zawierający zagnieżdżone obiekty podrzędne StackLayout lub inne układy podrzędne.

Poniższy kod XAML przedstawia przykład zagnieżdżania StackLayout obiektów:

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.XAML.CombinedStackLayoutPage"
             Title="Combined StackLayouts demo">
    <StackLayout Margin="20">
        ...
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red"
                         WidthRequest="40" />
                <Label Text="Red"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow"
                         WidthRequest="40" />
                <Label Text="Yellow"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        <Frame BorderColor="Black"
               Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue"
                         WidthRequest="40" />
                <Label Text="Blue"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Frame>
        ...
    </StackLayout>
</ContentPage>

W tym przykładzie obiekt nadrzędny StackLayout zawiera zagnieżdżone StackLayout obiekty wewnątrz Frame obiektów. Obiekt nadrzędny StackLayout jest zorientowany w pionie, podczas gdy obiekty podrzędne StackLayout są zorientowane w poziomie:

Nested .NET MAUI StackLayouts.

Ważne

Im głębiej zagnieżdżasz StackLayout obiekty i inne układy, tym więcej obliczeń układu zostanie wykonanych, co może mieć wpływ na wydajność. Aby uzyskać więcej informacji, zobacz Wybieranie poprawnego układu.

Równoważny kod języka C# to:

public class CombinedStackLayoutPage : ContentPage
{
    public CombinedStackLayoutPage()
    {
        Title = "Combined StackLayouts demo";

        Frame frame1 = new Frame
        {
            BorderColor = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout frame1StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        frame1StackLayout.Add(new BoxView { Color = Colors.Red, WidthRequest = 40 });
        frame1StackLayout.Add(new Label { Text = "Red", FontSize = 22, VerticalOptions = LayoutOptions.Center });
        frame1.Content = frame1StackLayout;

        Frame frame2 = new Frame
        {
            BorderColor = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout frame2StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        frame2StackLayout.Add(new BoxView { Color = Colors.Yellow, WidthRequest = 40 });
        frame2StackLayout.Add(new Label { Text = "Yellow", FontSize = 22, VerticalOptions = LayoutOptions.Center });
        frame2.Content = frame2StackLayout;

        Frame frame3 = new Frame
        {
            BorderColor = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout frame3StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        frame3StackLayout.Add(new BoxView { Color = Colors.Blue, WidthRequest = 40 });
        frame3StackLayout.Add(new Label { Text = "Blue", FontSize = 22, VerticalOptions = LayoutOptions.Center });
        frame3.Content = frame3StackLayout;

        ...

        StackLayout stackLayout = new StackLayout { Margin = new Thickness(20) };
        stackLayout.Add(new Label { Text = "Primary colors" });
        stackLayout.Add(frame1);
        stackLayout.Add(frame2);
        stackLayout.Add(frame3);
        stackLayout.Add(new Label { Text = "Secondary colors" });
        stackLayout.Add(frame4);
        stackLayout.Add(frame5);
        stackLayout.Add(frame6);

        Content = stackLayout;
    }
}

Udostępnij za pośrednictwem

StackLayout

Orientacja pionowa

Orientacja pozioma

Odstęp między widokami podrzędnym

Położenie i rozmiar widoków podrzędnych

Zagnieżdżone obiekty StackLayout

Dodatkowe zasoby