使用容器做響應式設計

Power Apps 入門

Luise Freese

Azure & Power Platform Architect

為何要響應式？

 

  • 同一個 app 可在 手機、平板、筆電 開啟
  • 固定版面在小螢幕會被裁切，在大螢幕會顯得空洞
  • 響應式＝版面會自適應

$$

手機、平板與筆電展示同一個 app 從單欄到多欄的自適應版面。

Power Apps 入門

現代版面容器

示意圖比較垂直與水平的 Layout 容器：子控制項分別為堆疊與並排。

 

  • 垂直版面容器：子項目自上而下堆疊
  • 水平版面容器：子項目由左到右排列
  • 現代控制項會隨可用空間流動
Power Apps 入門

可調寬高（Flexible）

 

  • FlexibleWidth 與 FlexibleHeight
  • On：控制項會延展填滿容器
  • Off：控制項維持固定大小

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps 入門

LayoutMinWidth 與 LayoutMinHeight

手機與平板示例：以 LayoutMinWidth 為斷點，從單欄切換為側欄加內容。

 

  • 容器需要足夠空間才能正確排版
  • LayoutMinWidth＝在重新排列前的最小寬度
  • 可觸發手機與平板的不同版面
Power Apps 入門

App 顯示設定

 

  • Settings → Display 設定方向與尺寸
  • App layout：Fixed 鎖定單一比例，Responsive 隨螢幕自適應
  • 請在多種尺寸下測試

$$

Power Apps Studio 設定視窗的 Display 分頁，顯示版面、方向與畫布大小選項

Power Apps 入門

預製版面

Power Apps Studio 新增畫面側邊面板的實際截圖：預設版面樣板包含 Blank、Split screen、Sidebar、Header and footer、Approval request、Welcome screen，各附小預覽框。

 

  • + New screen 內建預製版面樣板
  • Sidebar、Header and footer、Split screen，已支援響應式
  • 作為你第一個響應式 app 的建議起點
Power Apps 入門

你將完成什麼

$$

將控制項包進 Layout 容器 · 在不同 裝置尺寸 間切換 · 觀察 app 的回應

示意圖：app 在手機、平板、筆電上，圖庫版面隨螢幕大小而調整。

Power Apps 入門

一起來練習吧！

Power Apps 入門

Preparing Video For Download...