指定檢視的大小

設計在多部裝置之間保持一致的使用者介面並不容易，因為裝置的大小可能不同，且具有不同的像素密度。 請考慮可供使用的不同裝置：行動裝置、平板電腦、桌上型電腦等。 我們如何建立在每部裝置上看起來類似的使用者介面？

.NET Multi-platform App UI (MAUI) 提供版面配置面板，以協助您建置一致的使用者介面。 版面配置面板負責調整其子項目檢視的大小和位置。 在本單元中，您會了解版面配置系統在 .NET MAUI 中的運作方式。 特別是，我們會探討預設如何調整檢視的大小，以及在執行階段如何要求檢視的特定大小和位置。

什麼是版面配置面板？

版面配置面板是一種 .NET MAUI 容器，可保存子檢視的集合，並判斷其大小和位置。 當應用程式大小變更時，版面配置面板即會自動重新計算；例如，當使用者輪替裝置時。

.NET MAUI 有多個可供您選擇的版面配置面板。 每個面板都會以不同方式管理自己的子檢視。 下圖顯示一些最常見選項概觀的概念。

• StackLayout：以單一資料列或資料行排列其子檢視。 除了 StackLayout 以外，當您不需要變更方向時，還有一個最佳化的 VerticalStackLayout 和 HorizontalStackLayout。
• AbsoluteLayout: 使用 x 和 y 座標排列其子項目檢視。
• Grid: 在從資料列和資料行交集建立的儲存格中排列其子項目檢視。
• FlexLayout：將子檢視排列為像是 StackLayout，但是如果檢視無法容納在單一資料列或資料行，您可以將其換行。

建置 .NET MAUI 頁面的一般流程是建立版面配置面板，然後將子檢視新增至其中。 當您將檢視新增至版面配置時，可能會影響它的大小和位置。 不過，該面板根據其內部版面配置演算法有最終決定權。

在您查看如何要求檢視的特定大小之前，請看看版面配置系統預設調整檢視大小的方式。

檢視的預設大小

如果您沒有指定檢視的大小，它會自動增長為足以容納其內容的大小。 例如，請考慮此 Extensible Application Markup Language (XAML)：

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center" 
    FontSize="40"/>

此範例定義標籤以在銀色背景上顯示文字 Hello。 因為您沒有指定標籤的大小，所以會自動調整大小以符合字組 Hello。 下圖顯示在 Android 裝置上呈現的標籤:

指定檢視的大小

當您建置 UI 時，通常會想要控制檢視的大小。 例如，假設您正在建置登入頁面，且希望 [登入] 按鈕正好是螢幕寬度的一半。 如果使用了檢視的預設大小，則按鈕只會是「登入」文字的大小。 其大小不夠大，因此您需要自行指定大小。

View 基底類別會定義兩個影響檢視大小的屬性：WidthRequest 和 HeightRequest。 WidthRequest 可讓您指定寬度，而 HeightRequest 可讓您指定高度。 這兩個屬性的類型都是 double。

以下範例示範如何在 XAML 中指定標籤的寬度和高度：

<Label
    Text="Hello"
    BackgroundColor="Silver"
    VerticalOptions="Center"
    HorizontalOptions="Center"
    WidthRequest="100"
    HeightRequest="300"
    FontSize="40"/>

結果如下所示：

值得注意的一件事是這些屬性的名稱。 這兩個屬性都包含文字 要求。 這個字表示版面配置面板在執行階段可能不會採用這些屬性。 版面配置面板會在其大小計算期間讀取這些值，並嘗試在可能的情況下容納要求。 如果沒有足夠的空間，版面配置面板可以忽略這些值。

大小單位

當您設定 WidthRequest 和 HeightRequest 時，您會使用常值，例如 100。 在 .NET MAUI 層級，這些值沒有單位。 它們不是點或像素， 而只是類型為 double 的值。 .NET MAUI 會在執行階段將這些值傳遞至基礎作業系統。 此作業系統可提供判斷數字含義所需的內容：

• 在 iOS 上，值稱為「點」。
• 在 Android 上，它們是「密度獨立像素」。

檢視所呈現的大小

因為版面配置面板必須負責判斷檢視的大小，所以您無法使用 WidthRequest 和 HeightRequest 來指出執行階段的實際大小。 例如，假設您針對標籤將 WidthRequest 設定為 100，但面板沒有足夠的空間來滿足該要求。 因此，面板提供給標籤的寬度為 80。 此時，如果您檢查 WidthRequest 屬性的值，即使呈現的值是 100，它仍然會顯示 80。

為了解決這個問題，View 基底類別會定義兩個稱為 Width 和 Height 的其他屬性。 這些屬性的類型都是 double，代表檢視所呈現的寬度和高度。 每當您擷取檢視的大小時，請使用 Width 和 Height 屬性。

指定檢視的位置

您還需要設定檢視的位置。 例如，您應該記得，在登入頁面範例中，您想要將登入按鈕的大小調整為螢幕寬度一半。 因為登入按鈕的寬度不是整個螢幕，所以有一些空間能夠予以四處移動。 您可以將其放置在螢幕的左側、右側或中心。

View 基底類別具有兩個您可用來設定檢視位置的屬性：VerticalOptions 和 HorizontalOptions。 這些設定會影響將檢視放置在版面配置面板為其所配置矩形中的方式。 您可以指定將檢視對齊矩形四個邊的其中一邊。 或者，您會想要它佔用整個矩形。

為 VerticalOptions 或 HorizontalOptions 指定值比設定大小更具有挑戰性，因為它們的類型為 LayoutOptions。

什麼是 LayoutOptions 類型？

LayoutOptions 是一種 C# 類型，可封裝兩個配置喜好設定：Alignment 和 Expands。 這兩個屬性都與位置相關，但它們彼此無關。 類型的定義看起來像這樣：

public struct LayoutOptions
{
    public LayoutAlignment Alignment { get; set; }
    public bool Expands { get; set; }
    ...
}

接下來，我們會更仔細地查看 Alignment，因為它是最常見的直覺式配置選項。

什麼是 LayoutAlignment 列舉？

LayoutAlignment 是一種列舉，其中包含四個值：Start、Center、End 及 Fill。 您可以使用這些值，來控制如何將子檢視放置在其版面配置面板提供給它的矩形內。 例如，考慮下列程式碼和 Android 螢幕擷取畫面：

<StackLayout>
    <Label Text="Start" HorizontalOptions="Start" BackgroundColor="Silver" FontSize="40" />
    <Label Text="Center" HorizontalOptions="Center" BackgroundColor="Silver"  FontSize="40" />
    <Label Text="End" HorizontalOptions="End" BackgroundColor="Silver"  FontSize="40"/>
    <Label Text="Fill" HorizontalOptions="Fill" BackgroundColor="Silver"  FontSize="40"/>
</StackLayout>

此範例會使用垂直的 StackLayout，讓每個子檢視都有一個資料列。 HorizontalOptions 可決定檢視在其資料列中的位置。

什麼是 Expands？

LayoutOptions 結構的第二個屬性是 Expands。 Expands 屬性是 Xamarin.Forms 中的 bool，允許 StackLayout 中的檢視要求額外空間 (如果有的話)。 此屬性現在已淘汰，而且不再用於 .NET MAUI。 稍後，我們會探索如何在 Grid 版面配置上的單元中達到相同的展開類型。