在畫布應用程式中建立回應式配置

發行項
03/16/2023

在 Power Apps 中組建畫布應用程式之前，您可以指明是否為手機或平板電腦自訂應用程式。此選擇會判定您將組建應用程式的畫布大小和圖形。

做出該選擇後，如果您選擇設定 > 顯示，則可以進行更多選擇。您可以選擇縱向或橫向方向及畫面控制項大小 (僅限平板電腦)。您也可以鎖定或解除鎖定縱橫比，並支援裝置旋轉 (或不支援)。

這些選擇會成為您設計畫面控制項版面配置時所做的每個其他選擇。如果您的應用程式在不同大小的裝置或網頁上執行，整個版面配置會調整為符合執行應用程式的畫面控制項。例如，如果為手機設計的應用程式在大型瀏覽器視窗執行，則應用程式會縮放到可補償並看起來空間超大。應用程式無法透過顯示更多控制項或更多內容利用額外畫素。

如果您建立回應式配置，控制項就能回應不同的裝置或視窗大小，讓各種體驗感覺更自然。若要達到回應式配置等級，您可以調整某些設定並在整個應用程式中撰寫運算式。

停用縮放到適當大小

您可以組態每個畫面控制項，讓其版面配置適應執行應用程式的實際空間。

您可以將應用程式的 Scale to fit 設定啟動回應能力，其預設值為開啟。當您關閉此項設定時，同時您也會關閉 Lock aspect ratio 因為您已不再為特定畫面控制項圖形設計。 (您仍然可以指明您的應用程式是否支援裝置旋轉。)

停用縮放到適當大小設定。

若要讓您的應用程式具備回應能力，您必須進行額外步驟，但是此項變更是實現回應能力的第一步。

瞭解應用程式與畫面控制項尺寸

若要讓您的應用程式版面配置回應畫面控制項尺寸的變更，您可以撰寫使用畫面控制項的 Width 和 Height 屬性的公式。若要顯示這些屬性，請在 Power Apps Studio 中打開應用程式，然後選取畫面控制項。這些屬性的預設公式會出現在右側窗格的 Advanced 索引標籤上。

寬度 = Max(App.Width, App.DesignWidth)

高度 = Max(App.Height, App.DesignHeight)

這些公式是指應用程式的 Width、Height、DesignWidth 和 DesignHeight 屬性。應用程式的 Width 和 Height 屬性對應您的應用程式執行的裝置或瀏覽器視窗的尺寸。如果使用者調整瀏覽器視窗大小 (或者如果您已經關閉 Lock orientation，則旋轉裝置)，這些屬性值會動態變更。當這些值變更時，畫面控制項的 Width 和 Height 屬性中的公式會重新評估。

DesignWidth 和 DesignHeight 屬性來自您在設定的顯示窗格中指定的尺寸。例如，如果您在直向方向選取手機版面配置，DesignWidth 為 640，而 DesignHeight 為 1136。

一如您用於畫面控制項的 Width 和 Height 屬性的公式，您可以將 DesignWidth 和 DesignHeight 視為您預計設計應用程式的最小尺寸。如果應用程式的實際區域甚至小於這些最小尺寸，則畫面控制項的 Width 和 Height 屬性的公式必須確保其值不會變得小於最小值。在那種情況下，使用者必須捲動檢視畫面控制項的所有內容。

待您新建應用程式的 DesignWidth 和 DesignHeight 之後，(大多數情況) 需要變更每個畫面控制項 Width 和 Height 屬性的預設公式。稍後本主題將討論您可能想要自訂這些公式的案例。

使用公式進行動態版面配置

若要建立回應式設計，您可以使用公式定位和調整每個控制項大小，而不是絕對 (常數) 座標值。這些公式會按照整體畫面大小或畫面控制項上的其他相對控制項表達每個控制項的位置和大小。

重要

待您為控制項的 X、Y、Width 和 Height 屬性撰寫公式之後，如果您後續在畫布編輯器中拖曳此控制項，您的公式將會被常數值覆寫。當您開始使用公式實現動態版面配置時，您應該避免拖曳控制項。

在最簡單的案例中，一個控制項會填滿整個畫面控制項。若要建立此效果，請將控制項的屬性設定為下列值：

屬性	值
X	`0`
Y	`0`
寬度	`Parent.Width`
高度	`Parent.Height`

這些公式使用 Parent 運算子。至於直接放在畫面控制項上的控制項，Parent 係指畫面控制項。藉由這些屬性值，控制項會出現在畫面的左上角 (0, 0) 上，且 Width 和 Height 會與畫面控制項相同。

稍後在本主題中，您將套用這些原則 (和 Parent 運算子) 將控制項定位在其他容器 (如資源庫、群組控制項和元件) 中。

或者控制項只能填滿畫面控制項上半部。若要建立此效果，請將 Height 屬性設定為 Parnet.Height / 2，其他公式保留不變。

如果您想讓第二個控制項填滿相同畫面控制項的下半部，您可以採取至少兩種方法組構其公式。簡便起見，您可以採用這個方法：

控制	屬性	公式
較高的	X	`0`
較高的	Y	`0`
較高的	寬度	`Parent.Width`
較高的	高度	`Parent.Height / 2`
下索布文	X	`0`
下索布文	Y	`Parent.Height / 2`
下索布文	寬度	`Parent.Width`
下索布文	高度	`Parent.Height / 2`

上部和下部控制項。

此項組態會達到您想要的效果，但是如果您變更對控制項相對大小的想法，就必須編輯每項公式。例如，您可能決定頂端控制項只應佔用畫面控制項頂端三分之一的面積，底端控制項則填滿較低部的三分之二面積。

若要建立該效果，您必須更新 Upper 控制項的 Height 屬性及 Lower 控制項的 Y 和 Height 屬性。相反地，請考慮根據 Upper 控制項 (及本身) 撰寫 Lower 控制項公式，如下列範例所示：

控制	屬性	公式
較高的	X	`0`
較高的	Y	`0`
較高的	寬度	`Parent.Width`
較高的	高度	`Parent.Height / 3`
Lower	X	`0`
Lower	Y	`Upper.Y + Upper.Height`
Lower	寬度	`Parent.Width`
下索布文	高度	`Parent.Height - Lower.Y`

上部和下部控制項相對大小調整。

藉由這些就緒的公式，您只需變更 Upper 控制項的 Height 屬性表達畫面控制項高度的不同分數。 Lower 控制項會自動移動並因應變更進行大小調整。

您可以使用這些公式型態表達名為 C 的控制項與其父代或同代控制項，名為 D 之間常見的版面配置關係。

C 與其父代之間的關係	屬性	公式
C 以 N 的邊距填滿父代的寬度	X	`N`
	寬度	`Parent.Width - (N * 2)`
C 以 N 的邊距填滿父代的高度	Y	`N`
	高度	`Parent.Height - (N * 2)`
C 與父代右邊緣對齊，且邊距為 N	X	`Parent.Width - (C.Width + N)`
C 與父代底邊緣對齊，且邊距為 N	Y	`Parent.Height - (C.Height + N)`
C 在父代水平居中	X	`(Parent.Width - C.Width) / 2`
C 在父代垂直居中	Y	`(Parent.Height - C.Height) / 2`

C 與 D 之間的關係	屬性	公式
C 與 D 水平對齊，寬度與 D 相同	X	`D.X`
	寬度	`D.Width`
C 與 D 垂直對齊，高度與 D 相同	Y	`D.Y`
	高度	`D.Height`
C 的右邊緣與 D 的右邊緣對齊	X	`D.X + D.Width - C.Width`
C 的底邊緣與 D 的底邊緣對齊	Y	`D.Y + D.Height - C.Height`
C 相對於 D 水平居中	X	`D.X + (D.Width - C.Width) / 2`
C 相對於 D 垂直居中	Y	`D.Y + (D.Height - C.Height) /2`
C 位於 D 右邊，間隙為 N	X	`D.X + D.Width + N`
C 位於 D 之下，間隙為 N	Y	`D.Y + D.Height + N`
C 填滿 D 與父代右邊緣之間的空間	X	`D.X + D.Width`
	寬度	`Parent.Width - C.X`
C 填滿 D 與父代底邊緣之間的空間	Y	`D.Y + D.Height`
	高度	`Parent.Height - C.Y`

階層式版面配置

若您建構包含更多控制項的畫面控制項時，將控制項相對於父代控制項定位將變得更加方便 (或甚至有必要)，而不是相對於畫面控制項或同代控制項。透過將您的控制項排入階層式結構，您可以讓您的公式更易於寫入和維護。

資源庫

如果您在應用程式中使用資源庫，您將需要在資源庫範本中配置控制項版面。您可以藉由寫入使用父代運算子的公式定位這些控制項 (過程中將參閱資源庫範本)。在資源庫範本的控制項公式中，使用 Parent.TemplateHeight 和 Parent.TemplateWidth 屬性；請勿使用 Parent.Width 和 Parent.Height，過程中參閱資源庫的總大小。

顯示範本寬度和高度的垂直資源庫。

容器控制項

您可以使用版面配置容器控制項，做為上層控制項。

請考慮畫面控制項上方的標題範例。標題內含標頭和若干圖示，讓您的使用者可以與您互動，是常見的情況。您可以使用容器控制項建構此類標題，其中包含標籤控制項和兩個圖示控制項：

使用群組的標題範例。

將這些控制項的屬性設定為下列值：

屬性	頁首	功能表	關閉	標題
X	`0`	`0`	`Parent.Width - Close.Width`	`Menu.X + Menu.Width`
Y	`0`	`0`	`0`	`0`
寬度	`Parent.Width`	`Parent.Height`	`Parent.Height`	`Close.X - Title.X`
高度	`64`	`Parent.Height`	`Parent.Height`	`Parent.Height`

關於 Header 控制項，Parent 參照畫面控制項。關於其他，Parent 參照 Header 控制項。

寫入這些公式之後，您就可以變更其屬性的公式，調整 Header 控制項的大小或位置。子代控制項的大小和位置會自動進行相應調整。

自動配置容器控制項

您可以使用一個功能，自動配置容器控制項來自動配置子元件。這些容器會判斷子元件的位置，因此您不需要設定容器中元件的 X 和 Y 座標。它也可以根據設定將可用空間分配至其子元件，並判斷子元件的垂直和水平對齊方式。其他資訊：自動配置容器控制項

元件

如果您使用另一項名為元件的功能，您可以組建構成要素，並在整個應用程式中重複使用它們。如同容器控制項一樣，您放置在元件內的控制項應根據 Parent.Width 和 Parent.Height 的位置和大小公式參照元件大小。其他資訊：建立元件。

適應裝置大小和方向的版面配置

目前為止，您已學會如何使用公式變更每個控制項的大小，以因應可用空間，同時保持控制項彼此之間的對齊狀態。但是，您可能想要對不同的裝置大小和方向進行較大的版面配置變更。例如，當裝置從直向旋轉到橫向方向時，您可能會想從垂直版面配置切換到水平版面配置。在較大裝置上，您可以呈現更多內容或重新排列它，以提供更具吸引力的版面配置。在較小裝置上，您可能需要將內容分割成多個畫面控制項。

裝置方向

針對畫面控制項的 Width 和 Height 屬性的預設公式，如前文所述，不見得非要在使用者旋轉裝置時提供良好的經驗。例如，採直向為手機設計的應用程式，其 DesignWidth 為 640及 DesignHeight 為 1136。在同一支手機上，相同的應用程式在橫向將有下列屬性值：

畫面控制項的 Width 屬性設定為 Max(App.Width, App.DesignWidth)。應用程式的 Width (1136) 大於其 DesignWidth (640)，因此公式評估為 1136。
畫面控制項的 Height 屬性設定為 Max(App.Height, App.DesignHeight)。應用程式的 Height (640) 小於其 DesignHeight (1136)，因此公式評估為 1136。

若畫面控制項的 Height 為 1136，且裝置高度 (以此方向) 為 640，則使用者必須垂直捲動畫面來顯示所有內容，這可能不是您想要的經驗。

若要將畫面控制項的 Width 和 Height 屬性調整為裝置方向，您可以使用這些公式：

寬度 = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))

高度 = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

這些公式會根據裝置的寬度是否小於其高度 (直向) 或大於高度 (橫向)，交換應用程式的 DesignWidth 和 DesignHeight 值。

在您調整畫面控制項的 Width 與 Height 公式之後，您可能也會想要重新排列畫面控制項內的控制項，以便更有效使用可用空間。例如，如果兩個控制項的每個都佔據畫面控制項的一半面積，您可以垂直地將它們堆疊成直向，但是將它們橫向並排排列。

您可以使用畫面控制項的 Orientation 屬性來判定畫面控制項是垂直方向或水平方向。

注意

在橫向方向上，Upper 和 Lower 控制項顯示為左和右控制項。

控制	屬性	公式
較高的	X	`0`
較高的	Y	`0`
較高的	寬度	`If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2)`
較高的	高度	`If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height)`
Lower	X	`If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width)`
Lower	Y	`If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0)`
Lower	寬度	`Parent.Width - Lower.X`
下索布文	高度	`Parent.Height - Lower.Y`

用來適應直向方向的運算式。

用來適應橫向方向的運算式。

畫面控制項大小和中斷點

您可以根據裝置的大小調整您的版面配置。畫面控制項的 Size 屬性會將目前的裝置大小進行分類。大小是正數；ScreenSize 類型提供命名竹旳常數協助您易讀能力。此表列出常數：

常數	值	典型的裝置類型 (使用預設應用程式設定)
ScreenSize.Small	1	電話
ScreenSize.Medium	2	平板電腦，垂直豎立
ScreenSize.Large	3	平板電腦，水平橫放
ScreenSize.ExtraLarge	4	桌面電腦

使用這些大小作出有關您的應用程式版面配置的決策。例如，如果您想要控制項隱藏在手機大小的裝置上但是看不到，您可以將控制項的 Visible 屬性設定為以下公式：

Parent.Size >= ScreenSize.Medium

當大小為中等或較大且不是 false 時，此公式會評估為 true。

如果您想要控制項依據畫面大小佔據畫面控制項的不同佔比，請將控制項的 Width 屬性設定為以下公式：

Parent.Width *
Switch(
    Parent.Size,
    ScreenSize.Small, 0.5,
    ScreenSize.Medium, 0.3,
    0.25
)

此公式會將控制項的寬度設定為小畫面寬度的一半、中等畫面寬度的十分之三，及所有其他畫面寬度的四分之一。

自訂中斷點

藉由比較畫面控制項的 Width 屬性和應用程式的 SizeBreakpoints 屬性值計算畫面控制項的 Size 屬性。此屬性是指出分開命名畫面控制項大小的寬度中斷點數目的單欄資料表：

在為平板電腦或網站建立的應用程式中，應用程式的 SizeBreakpoints 屬性中的預設值為 [600, 900, 1200]。在為手機建立的應用程式中，值為 [1200, 1800, 2400]。 (手機應用程式值會加倍，因為這類應用程式使用能有效加倍其他應用程式所用座標的座標。)

App.SizeBreakpoints 屬性的預設值。

您可以變更應用程式的 SizeBreakpoints 屬性中的值來自訂您的應用程式的中斷點。在樹狀結構視圖中選取 App，並在屬性清單中選取 SizeBreakpoints，然後編輯公式列中的值。您可以根據應用程式的需求數量建立中斷點，但只有大小為 1 到 4 的中斷點才能對應到命名的畫面控制項大小。在公式中，您可以參照數值超過 ExtraLarge 的大小 (5, 6 等)。

您也可以指明較少的中斷點。例如，您的應用程式可能只需要三種大小 (兩個中斷點)，因此可能的畫面控制項大小將為小、中和大。

已知限制

製作畫布不回應建立的大小調整公式。若要測試反應式行為，請儲存並發佈您的應用程式，然後在裝置或不同大小和方向的瀏覽器視窗中打開它。

如果您在控制項的 X、Y、Width，和 Height 屬性中寫入運算式或公式，如果您稍後將控制項拖曳到不同位置或藉由拖曳其邊框來調整控制項大小，就會覆寫這些運算式或公式。

注意

是否能請您告知您偏好的慣用文件語言？請填寫問卷。 (請注意，本問卷為英文版)

完成問卷大約需要七分鐘。本問卷將不會收集個人資料 (隱私權聲明)。