StackLayout（堆疊佈局）

瀏覽範例

.NET 多平台應用程式介面（.NET MAUI） StackLayout 將子視圖組織成一維堆疊，可以橫向或縱向排列。 預設情況下，a StackLayout 是垂直方向的。 此外，StackLayout 也可以用作包含其他子佈局的父佈局。

類別 StackLayout 會定義下列屬性：

• Orientation 的類型為 StackOrientation，代表子視圖的位置方向。 這個屬性預設值為 Vertical。
• Spacing，型別為double，表示每個子視圖之間的間距大小。 此屬性的預設值為 0。

這些屬性由 BindableProperty 物件支撐，意味著這些屬性可以作為資料綁定的目標並進行樣式化。

垂直方向

以下 XAML 展示了如何建立包含不同子視圖的垂直導向 StackLayout ：

<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>

此範例建立包含 StackLayout 和 Label 的垂直物件BoxView。 預設情況下，子視圖之間沒有空格：

對等的 C# 程式代碼為：

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

備註

屬性的 Margin 值代表元素與相鄰元素之間的距離。 如需詳細資訊，請參閱 位置控制項。

水平方向

以下 XAML 展示了如何透過將 StackLayout 屬性設為 Orientation 來建立一個水平方向的 Horizontal：

<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>

此範例建立一個包含StackLayout物件的水平圖BoxView，子視圖間沒有空隙：

對等的 C# 程式代碼為：

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

子視圖之間的空間

子視圖 StackLayout 間的間距可以透過將 Spacing 屬性設定為 double 值來改變。

<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>

此範例建立一個 StackLayout 垂直包含 Label 和 BoxView 的物件，兩者之間有六個與裝置無關的垂直空間單位：

小提示

Spacing屬性可設定為負值，使子視圖重疊。

對等的 C# 程式代碼為：

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

子視窗的位置與大小

子視圖在StackLayout內之大小與位置取決於子視圖的HeightRequest和WidthRequest屬性的值，以及它們的HorizontalOptions和VerticalOptions屬性的值。 在垂直視圖 StackLayout中，子視圖會擴展以填滿可用寬度，當其大小未明確設定時。 同樣地，在水平 StackLayout中，子視圖會在未明確設定大小時展開以填滿可用高度。

HorizontalOptions 和 VerticalOptions 屬性，以及其子視圖的 StackLayout，可以被設置為來自LayoutOptions結構體的欄位，該結構體封裝了一種對齊佈局的偏好。 此配置偏好決定子視窗在其父版面配置中的位置與大小。

以下 XAML 範例為每個子視圖 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>

在此範例中，對物件設定 Label 對齊偏好以控制其在 StackLayout中的位置。 Start、Center、End 和 Fill 欄位用於定義 Label 物件在 StackLayout 內的對齊：

A StackLayout 只尊重與方向相反 StackLayout 的兒童視角的對齊偏好。 因此，垂直排列的Label內的子視圖會在StackLayout中將其屬性設HorizontalOptions為某一個對齊欄位：

• Start，將 Label 放在 StackLayout 的左側。
• Center，將 Label 置於 StackLayout 中居中。
• End，這使得 Label 位於 StackLayout 的右側。
• Fill，確保 Label 充滿 StackLayout 的寬度。

對等的 C# 程式代碼為：

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

欲了解更多關於對齊的資訊，請參閱 版面配置中的對齊視圖。

巢狀 StackLayout 物件

A StackLayout 可以作為包含巢狀子 StackLayout 物件或其他子配置的父版面配置使用。

以下 XAML 展示了巢狀 StackLayout 物件的範例：

<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">
        ...
        <Border Stroke="Black"
                Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Red"
                         WidthRequest="40" />
                <Label Text="Red"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Border>
        <Border Stroke="Black"
                Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Yellow"
                         WidthRequest="40" />
                <Label Text="Yellow"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Border>
        <Border Stroke="Black"
                Padding="5">
            <StackLayout Orientation="Horizontal"
                         Spacing="15">
                <BoxView Color="Blue"
                         WidthRequest="40" />
                <Label Text="Blue"
                       FontSize="18"
                       VerticalOptions="Center" />
            </StackLayout>
        </Border>
        ...
    </StackLayout>
</ContentPage>

在這個例子中，父StackLayout物件包含在Border物件內的StackLayout巢狀物件。 父 StackLayout 物件為垂直方向，子 StackLayout 物件為水平方向：

這很重要

嵌套StackLayout物件和其他布局的層次越深，執行的佈局計算就越多，這可能影響效能。 欲了解更多資訊，請參閱 選擇正確版面。

對等的 C# 程式代碼為：

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

        Border border1 = new Border
        {
            Stroke = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout border1StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        border1StackLayout.Add(new BoxView { Color = Colors.Red, WidthRequest = 40 });
        border1StackLayout.Add(new Label { Text = "Red", FontSize = 20, VerticalOptions = LayoutOptions.Center });
        border1.Content = border1StackLayout;

        Border border2 = new Border
        {
            Stroke = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout border2StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        border2StackLayout.Add(new BoxView { Color = Colors.Yellow, WidthRequest = 40 });
        border2StackLayout.Add(new Label { Text = "Yellow", FontSize =  20, VerticalOptions = LayoutOptions.Center });
        border2.Content = border2StackLayout;

        Border border3 = new Border
        {
            Stroke = Colors.Black,
            Padding = new Thickness(5)
        };
        StackLayout border3StackLayout = new StackLayout
        {
            Orientation = StackOrientation.Horizontal,
            Spacing = 15
        };
        border3StackLayout.Add(new BoxView { Color = Colors.Blue, WidthRequest = 40 });
        border3StackLayout.Add(new Label { Text = "Blue", FontSize = 20, VerticalOptions = LayoutOptions.Center });
        border3.Content = border3StackLayout;

        ...

        StackLayout stackLayout = new StackLayout { Margin = new Thickness(20) };
        stackLayout.Add(new Label { Text = "Primary colors" });
        stackLayout.Add(border1);
        stackLayout.Add(border2);
        stackLayout.Add(border3);
        stackLayout.Add(new Label { Text = "Secondary colors" });
        stackLayout.Add(border4);
        stackLayout.Add(border5);
        stackLayout.Add(border6);

        Content = stackLayout;
    }
}