VerticalStackLayout

.NET 多平臺應用程式 UI （.NET MAUI） VerticalStackLayout 會在一維垂直堆疊中組織子檢視，而且是 較高效能的 StackLayout替代方案。 此外， VerticalStackLayout 可以做為包含其他子版面配置的父版面配置。

VerticalStackLayout定義下列屬性：

• Spacing型 double別為 的 ，表示每個子檢視之間的空間量。 這個屬性的預設值為 0。

這個屬性是由 BindableProperty 物件所支援，這表示它可以是數據系結和樣式的目標。

下列 XAML 示範如何建立 VerticalStackLayout 包含不同子檢視的 ：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

這個範例會 VerticalStackLayout 建立包含 Label 與 Rectangle 物件的 。 根據預設，子檢視之間沒有空格：

注意

屬性的值 Margin 代表專案與其相鄰專案之間的距離。 如需詳細資訊，請參閱 位置控件。

子檢視之間的間距

將 屬性設定Spacing為 double 值，即可變更 中VerticalStackLayout子檢視之間的間距：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="10">
        <Label Text="Primary colors" />
        <Rectangle Fill="Red"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Yellow"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Blue"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Label Text="Secondary colors" />
        <Rectangle Fill="Green"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Orange"
                   HeightRequest="30"
                   WidthRequest="300" />
        <Rectangle Fill="Purple"
                   HeightRequest="30"
                   WidthRequest="300" />
    </VerticalStackLayout>
</ContentPage>

此範例會 VerticalStackLayout 建立 包含 Label 和 Rectangle 物件，其子檢視之間有十個裝置獨立空間單位：

提示

屬性 Spacing 可以設定為負值，讓子檢視重疊。

位置和大小子檢視

內 VerticalStackLayout 子檢視的大小和位置取決於子檢視和 HeightRequestWidthRequest 屬性的值，以及其 HorizontalOptions 屬性的值。 在 中 VerticalStackLayout，子檢視會展開，以在未明確設定其大小時填滿可用的寬度。

HorizontalOptions的屬性VerticalStackLayout及其子檢視可以設定為結構中的LayoutOptions欄位，其封裝對齊配置喜好設定。 此版面配置喜好設定會決定子檢視在其父版面配置中的位置和大小。

提示

除非您需要，否則請勿設定 HorizontalOptions 的 VerticalStackLayout 屬性。 的預設值 LayoutOptions.Fill 允許最佳的版面配置優化。 變更此屬性的成本並耗用記憶體，即使將它設定回其預設值也一定。

下列 XAML 範例會在 中的每個 VerticalStackLayout子檢視上設定對齊喜好設定：

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout 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" />
    </VerticalStackLayout>
</ContentPage>

在此範例中，會在 對象上 Label 設定對齊喜好設定，以控制其在 內 VerticalStackLayout的位置。 、、 和欄位可用來定義父VerticalStackLayout代 內物件的對齊方式Label：FillEndCenterStart

VerticalStackLayout只會尊重子檢視的對齊喜好設定，而子檢視的方向與配置的方向相反。 因此， Label 在內的子檢視會將 VerticalStackLayout 其 HorizontalOptions 屬性設定為其中一個對齊欄位：

• Start，它會將 放在 Label 的左側 VerticalStackLayout。
• Center，這會將 Label 放在 VerticalStackLayout 的中心位置。
• End，其位於 Label 的右側 VerticalStackLayout。
• Fill，這會確保 Label 填入 VerticalStackLayout 的寬度。

Nest VerticalStackLayout 物件

VerticalStackLayout可用來做為包含其他巢狀子版面配置的父版面配置。

下列 XAML 顯示 中的VerticalStackLayout巢狀HorizontalStackLayout物件範例：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="StackLayoutDemos.Views.VerticalStackLayoutPage">
    <VerticalStackLayout Margin="20"
                         Spacing="6">
       <Label Text="Primary colors" />
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
       <Frame BorderColor="Black"
              Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Frame>
    </VerticalStackLayout>
</ContentPage>

在此範例中，父VerticalStackLayout代包含 物件內的Frame巢狀HorizontalStackLayout物件：

重要

您巢狀配置物件越深，將會執行更多版面配置計算，這可能會影響效能。 如需詳細資訊，請參閱 選擇正確的版面配置。