以 StackLayout 排列檢視

10 分鐘

以垂直或水平清單堆疊檢視是使用者介面的常見設計。請思考應用程式的一些常用頁面。範例包括登入、註冊，以及設定頁面。所有這些頁面通常包含堆疊的內容。在本單元中，您將學習如何使用 StackLayout 以及最佳化的 StackLayout 控制項 VerticalStackLayout 和 HorizontalStackLayout 在垂直或水平清單中排列檢視。

什麼是 StackLayout、VerticalStackLayout 和 HorizontalStackLayout？

StackLayout 是一種版面配置容器，可由左到右或由上到下組織其子檢視。方向是根據其 Orientation 屬性，預設值為由上到下。下圖顯示垂直 StackLayout 檢視的概念。

顯示螢幕中由上到下垂直堆疊四個區塊的圖例。

StackLayout 有一份繼承自其基底類別 Layout<T> 的 Children 清單。此清單會儲存檢視，這很有用，因為您在 .NET Multi-platform App UI (MAUI) 中使用的大部分 UI 元素都衍生自 View。版面配置面板也衍生自 View，這表示您可以在需要時使用巢狀面板。
當您知道方向不會改變時，VerticalStackLayout 和 HorizontalStackLayout 是要使用的首選版面配置，因為它們已針對效能進行了最佳化。

如何將檢視新增至 StackLayout

在 .NET MAUI 中，您可以在 C# 程式碼或 Extensible Application Markup Languag (XAML) 中，將檢視新增至 StackLayout。以下是使用程式碼新增的三個檢視範例：

<StackLayout x:Name="stack">
</StackLayout>

public partial class MainPage : ContentPage
{
    public MainPage()
    {
        InitializeComponent();

        var a = new BoxView { Color = Colors.Silver, HeightRequest = 40 };
        var b = new BoxView { Color = Colors.Blue, HeightRequest = 40 };
        var c = new BoxView { Color = Colors.Gray, HeightRequest = 40 };

        stack.Children.Add(a);
        stack.Children.Add(b);
        stack.Children.Add(c);
    }
}

您可以將檢視新增至 Children 集合，StackLayout 就會自動將檢視放置在垂直清單中。它在 Android 裝置上看起來像這樣：

顯示在 Android 裝置的營幕中，由上到下垂直堆疊三個方塊的螢幕擷取畫面。

若要在 XAML 中進行相同的操作，請將子系巢狀嵌入到 StackLayout 標籤內。 XAML 剖析器會自動將巢狀檢視新增至 Children 集合，因為 Children 是所有版面配置面板的 ContentProperty。以下範例是使用 XAML 新增至 StackLayout 的相同三個檢視：

<StackLayout>
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

在 StackLayout 中排序檢視的方式

Children 集合的檢視順序可決定其呈現時版面配置順序。如果是使用 XAML 新增的檢視，請使用文字順序。對於在程式碼中所新增的子項，您呼叫 Add 方法的順序會決定版面配置順序。

如何變更 StackLayout 中檢視之間的空間

在 StackLayout 的子系之間通常需要一些空間。 StackLayout 可讓您使用 Spacing 屬性來控制每個子系之間的空間。預設值是零個單位，但您可以將其設定為任適合您的值。以下是使用 XAML 將 Spacing 屬性設定為 30 的範例：

<StackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40" />
</StackLayout>

下列螢幕擷取畫面顯示 UI 呈現在 Android 上的方式：

顯示在 Android 裝置中，垂直堆疊三個方塊且彼此間距 30 的螢幕擷取畫面。

如何設定 StackLayout 的方向

StackLayout 可讓您以資料行或資料列排列子系。您可以設定其 Orientation 屬性來控制這個行為。到目前為止，我們只顯示了一個垂直 StackLayout。

Vertical 是預設值。是否將 Orientation 明確設定為 Vertical 是由您決定。某些程式設計人員偏好使用明確的設定，讓程式碼更加能夠自我記錄。

以下是使用 XAML 將 Orientation 設定為 Horizontal 的範例：

<StackLayout x:Name="stack" Orientation="Horizontal">
    <BoxView Color="Silver" WidthRequest="40"/>
    <BoxView Color="Blue" WidthRequest="40"/>
    <BoxView Color="Gray" WidthRequest="40"/>
</StackLayout>

注意

如上一個練習所述，StackPanel 的方向若改變，會導致其忽略每個 BoxView 的 HeightRequest 屬性。相反地，請設定 WidthRequest。下列螢幕擷取畫面顯示 UI 呈現在 Android 裝置上的方式：

顯示全螢幕垂直延展三個方塊，每個方塊從左至右水平堆疊的螢幕擷取畫面。

在 StackLayout 中設定檢視的 LayoutOptions

每個檢視都有 VerticalOptions 和 HorizontalOptions 屬性。您可以使用這些屬性來設定檢視在版面配置面板所提供的矩形顯示區域內的位置。

如先前所述，使用 StackLayout 時，LayoutOptions 的行為取決於 StackLayout 的 Orientation 屬性。 StackLayout 會以與其 Orientation 相反的方向使用 LayoutOptions 屬性。根據預設，堆疊配置中的元素不會在與堆疊配置之 Orientation 的相同方向上配置任何其他空間。在此預設情況下，為該方向指定位置不會變更元素的呈現。但是，當位置與擴充合併時，呈現會有所變更。

擴充呢？

回想一下先前的單元，LayoutOptions 結構包含一個名為 Expands 的 bool 屬性 (該屬性在 .NET MAUI 中現已淘汰)。當您設定 VerticalOptions 與 HorizontalOptions 時，您可能會注意到 StartAndExpand、CenterAndExpand、EndAndExpand 和 FillAndExpand 的 LayoutOptions。如果您將 LayoutOptions 設為這些 AndExpand 選項之一，則會忽略該選項，並使用 LayoutOptions 的第一個部分，例如 Start、Center、End 或 Fill。如果您從 Xamarin.Forms 移轉，則應從這些屬性中移除所有 AndExpand 屬性。在本課程模組的後面部分，我們將了解如何在了解 Grid 時達到類似的功能。

最佳化的 StackLayout

如先前所述，VerticalStackLayout 和 HorizontalStackLayout 是已預先定義了方向的最佳化 StackLayout 控制項。我們建議您盡可能使用這些控制項，以獲得最佳的版面配置效能。這些版面配置具有一般 StackLayout 所具有的 LayoutOptions 和 Spacing 功能。

<VerticalStackLayout Spacing="30">
    <BoxView Color="Silver" HeightRequest="40" />
    <BoxView Color="Blue" HeightRequest="40" />
    <BoxView Color="Gray" HeightRequest="40"/>
</VerticalStackLayout>

<HorizontalStackLayout Spacing="30">
    <BoxView Color="Silver" WidthRequest="40" />
    <BoxView Color="Blue" WidthRequest="40" />
    <BoxView Color="Gray" WidthRequest="40" />
</HorizontalStackLayout>