VerticalStackLayout

.NET 多平台應用程式介面（.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 物件。 預設情況下，子視圖之間沒有間距：

VerticalStackLayout 顯示不同子視圖截圖。

備註

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

子視圖之間的空間

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

<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物件，子視圖之間有十個與裝置無關的單位空間。

VerticalStackLayout 顯示不同的子視圖並帶有間距截圖。

小提示

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

調整子視圖的位置和大小

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

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

小提示

除非有需要，否則不要設定 VerticalStackLayout 的 HorizontalOptions 屬性。 預設值允許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中的位置。 Start、Center、End 和 Fill 欄位用於定義 Label 物件在 VerticalStackLayout 內的對齊：

VerticalStackLayout 顯示對齊的子視圖截圖。

A VerticalStackLayout 只尊重子視圖中與佈局方向相反的對齊偏好。 因此，VerticalStackLayout 中的子視圖會將其HorizontalOptions屬性設為Label的其中一個對齊欄位：

Nest 垂直堆疊佈局物件

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

以下 XAML 展示了將HorizontalStackLayout物件巢狀在VerticalStackLayout中的範例：

<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" />
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Red"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Red"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Yellow"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Yellow"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
       <Border Stroke="Black"
               Padding="5">
           <HorizontalStackLayout Spacing="15">
               <Rectangle Fill="Blue"
                          HeightRequest="30"
                          WidthRequest="30" />
               <Label Text="Blue"
                      FontSize="18" />
           </HorizontalStackLayout>
       </Border>
    </VerticalStackLayout>
</ContentPage>

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

VerticalStackLayout 顯示巢狀的 HorizontalStackLayout 物件截圖。

這很重要

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

  • Last updated on