共用方式為

建置回應式畫布應用程式

響應能力是指應用程序自動對齊不同屏幕尺寸和外形尺寸以合理使用可用屏幕空間的能力，從而在每個設備、外形尺寸和屏幕尺寸中提供出色的 UI 和用戶體驗。

回應能力可讓應用程式的不同元素指定如何進行:

  • 隨著螢幕尺寸的變化而拉伸或調整大小。

  • 隨著螢幕尺寸的變化而保持或變更位置。

為什麼要建立響應式應用程式

最終使用者可以從不同的裝置存取您的應用程式，例如手機、平板電腦、筆記型電腦和桌上型電腦，這些裝置具有大型顯示器、不同的螢幕大小和不同數量的像素。

為了確保應用程式在每個外形尺寸和裝置上的良好使用者體驗和可用性，必須採用響應式設計原則來設計應用程式。 即使該應用程序僅打算在網絡瀏覽器或手機上使用，用戶設備屏幕尺寸也可能不同，因此使用響應式原則設計應用程序是個好主意。

使用回應性原則設計應用程式

在開始設計應用程式的 UI 之前，您需要考慮以下幾個方面：

  • 您想要支援哪些外形尺寸或裝置。

  • 應用程式在每種外形規格上的外觀應該如何？

  • 應用程式的哪些元素需要拉伸或調整大小？

  • 元素在某些外形規格上是否會隱藏？

  • 應用程式在某些外形規格中的行為是否不同？

收集完所有這些需求後，您應該開始考慮如何使用 Power Apps 中提供的回應式工具在單一應用程式中建立這些不同的 UI 配置。

在開始使用回應式版面配置之前，您必須執行下列動作：

  1. 前往 Power Apps。

  2. 開啟您要使用回應式版面配置的應用程式。

  3. 前往設定>顯示以停用縮放適合尺寸、鎖定長寬比和鎖定方向，然後選擇套用。

    設定停用鎖定方向。

響應式版面配置

新增畫面並從「 版面配置」 標籤中選取適當的選項，即可建立下列回應式版面配置：

螢幕佈局。

備註

新的響應式佈局適用於應用程序格式，但新的屏幕模板僅適用於 平板電腦 格式。

Split-screen

分割畫面佈局有兩個部分，每個部分佔據桌面上螢幕寬度的 50%。 在行動裝置上，這些部分一個接一個地放置，每個部分佔據整個螢幕寬度。

側邊欄配置在左側具有固定寬度的側邊欄。 主體是由固定高度的標頭所組成，而主要區段則佔用畫面其他部分的寬度。 依預設，範本在行動裝置上具有相同的行為，但建議根據行動體驗所需的UI模式進行一些自訂。

運用容器進行操作

容器是所有響應式設計的構建塊。 容器可以是垂直或水平方向的 自動佈局容器 ，也可以是固定佈局容器，未來將支援條件約束。

以下是使用容器建置應用程式 UI 的一些秘訣：

  • 務必在容器中創建形成 UI 表格的 UI 元素。

  • 允許容器擁有自己的回應式屬性和設定，以指定容器在不同螢幕大小上的位置或調整大小。

  • 可讓您變更其子元件相對於回應性的配置方式。

選擇容器的兩種版面配置模式之一：手動版面配置或自動版面配置 （水平或垂直）

自動版面配置容器

兩個控制項 Horizontal container 和 Vertical container 可用來自動配置子元件。 這些容器會決定子元件的位置，因此您永遠不需要為容器內的元件設定 X、Y。 此外，它可以根據設定將可用空間分配給其子元件，並確定子元件的垂直和水平對齊方式。

何時使用自動排版容器

您可以在下列情境中使用自動配置容器:

  • UI 必須回應螢幕大小或外形尺寸變更。
  • 根據畫面大小或外形規格變更，有多個需要調整大小或進行移動的子元件。
  • 當您需要垂直或水平堆疊項目時（無論其大小如何）。
  • 當您需要在螢幕上均勻排列項目時。

自動版面配置容器的範例

若要建立回應式螢幕：

  1. 建立包含平板電腦配置的空白畫布應用程式。

  2. 選取 設定>[顯示] 並停用 [縮放以適合]、[ 鎖定長寬比] 和 [鎖定方向] ，然後選取 [套用]。

  3. 現在，從左側邊欄窗格中的 插入，在 配置 索引標籤下，選取水平容器。

    插入容器。

  4. 最頂層的容器必須調整大小，才能透過這些屬性來容納整個空間。 調整時大小會與畫面相同。

    1. X = 0
    2. Y= 0
    3. 寬度 = 上層寬度
    4. 高度 = 上層。 高度

  5. 現在，從 [插入] 窗格中，將兩個 [垂直] 容器 新增至 [水平] 容器。

    新增垂直容器。

  6. 若要製作容器，請填滿完整的垂直空間，選取 Container1 並將屬性設定 Align (vertical) 為 Stretch。

    對齊拉伸。

  7. 若要在內容之間分割畫面，請使用兩個子容器上的屬性 Fill portions 。 左側容器將佔用螢幕空間的 1/4。

    1. 選取 [容器2]。 您會看到該 Flexible width 屬性已開啟。 將 設定 Fill portions 為 1。
    2. 選取 [容器3]。 您會看到該 Flexible width 屬性已開啟。 將 設定 Fill portions 為 3。

  8. 選取 [容器2]。 在編輯列中設定 Fill = RGBA(56, 96, 178, 1) 屬性。 將 Align (horizontal) 設定為 Stretch。

  9. 添加幾個按鈕來創建菜單。 視需要重新命名按鈕。

    新增按鈕。

  10. 選取 [容器 3 ] 並新增 [水平] 容器，然後關閉屬性 Flexible height 。 設定 Height 為 100。 將 Align (vertical) 設定為 Stretch。

  11. 將一些 圖示 新增至 Container4。 使用圖示屬性來變更圖示，使其不同於原本圖示。

    新增圖示。

  12. 選取 [容器4]。 將 Justify (horizontal) 屬性設定為 End。 將 Align (vertical) 設定為 Center。 設定 Gap 為 40 可在圖示之間建立空間。

  13. 選取 [容器3]。 將 Align (horizontal) 設定為 Stretch。 將 Vertical Overflow 設定為 Scroll。

  14. 添加不同的 標籤、 輸入、 媒體 ，直到它們延伸到容器之外。 將矩形的顏色變更為不同。 您將看到一個捲軸來存取看不見的內容。

    添加不同的輸入。

  15. 選取 [預覽] 或 F5。 變更瀏覽器視窗的大小，以查看應用程式如何適應不同的螢幕大小。

已知問題

  • 配置容器內容的某些組合不相容，或可能產生不想要的輸出，例如：

    • 如果已啟用容器的 Wrap 屬性， Align 則會在子控制項上忽略屬性設定。
    • 如果容器的 Wrap 屬性已停用，且容器的主軸溢位設定為 Scroll （水平容器的水平溢位或垂直容器的垂直溢位），建議將屬性設定 Justify 為 Start 或 Space Between。
    • 當容器太小而無法顯示所有控制項時，中心 或 結束 選項可能會讓子控制項無法存取，即使該 Overflow 屬性已設為 捲動 也一樣。

  • 您無法在畫布應用程式上調整控制項的大小或重新定位，因為在版面配置容器中已停用拖放控制項。 而是使用版面配置容器屬性，取得想要的大小和位置。 控制順序可以透過 樹狀結構視圖或使用方向鍵作為快速鍵來變更。

  • 版面配置容器目前不支援 [資料表]、[ 圖表] 和 [新增圖片] 控制項。

  • 子控制項的部分配置容器屬性是隱藏的。 隱藏屬性仍可透過編輯列或進階面板存取。 但是，如果設定在這些位置，這些屬性也會被忽略。

  • 當控制項移至版面配置容器時 （例如，複製或貼上控制項時），它們會依其在 [樹狀結構] 檢視中的順序插入容器中。

另請參閱

建立回應式版面配置

  • Last updated on