Power Apps 創建響應式布局

• 2022 年 1 月 28 日
• 筆記
• power apps

　　前言

　　我們都知道Power Apps作為低程式碼平台，最大的優勢就是各個設備之間的兼容性，尤其是自帶的響應式布局，非常好用。

　　這不，我們就為大家分享一下，如何使用Power Apps畫布應用，創建響應式布局。

　　正文

　　1.創建響應式布局之前，先要了解一個概念，就是螢幕尺寸和斷點，我們看一眼下面的圖片：

　　Tips：這個應該不需要太多解釋，我們看值和後面的描述，一看就懂，後面我們為大家介紹如何使用

　　2.設置Power Apps的顯示，默認如下圖：

　　Tips：這個要說一下，就是調整為合適頁面需要關閉，允許螢幕和控制項填充可用空間，這樣才能做到響應式布局。

　　同時，下面的鎖定橫縱臂會自動關掉。

　　3.設置螢幕的寬度和高度，如下：

　　Tips：這樣的設置，是為了讓頁面填充滿設備，不要兩邊留白或者上下留白。

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

　　4.然後在頁面上添加一個控制項，標識這個頁面大小，後續使用頁面大小變數的時候，都是用這個控制項的值，如下圖：

　　5.使用布局控制項，會讓我們操作起來，會更加簡便，如下圖：

　　Tips：因為涉及的細節非常多，建議大家自己科普一下布局控制項怎麼用，可能不是一下就能明白的。

　　6.布局中的注意事項，換行和靈活高度要開啟（靈活高度開啟以後，豎向布局控制項的高度，也需要根據螢幕大小動態變化），如下圖：

　　7.接下來是控制項的配置，首先開啟靈活寬度，讓控制項可以自適應；然後，設置LayoutMinWidth為響應式寬，如下圖：

Switch(
    lb_ScreenSize.Text,
    "1",
    Parent.Width,
    "2",
    Parent.Width,
    Parent.Width / 2
)

　　8.最後，設置外層豎向布局控制項的動態高度，上面已經提到了，如下圖：

　　Tips：大家看到我這裡的高度是寫死的，真正做項目千萬不要這樣，需要用行去乘以行高進行計算。

　　9.演示效果：

　　1）螢幕寬度為4的時候，如下圖：

　　2）螢幕寬度為2的時候，控制項變成兩行，如下圖：

　　結束語

　　我們這裡只是演示一個Demo，大家千萬別以為Power Apps的布局就這麼Low，其實真的配置好，還是需要很多小心思的，也是真的能做的響應式布局。

　　這裡的響應式布局，在PC、平板、手機端可以無縫切換，橫屏豎屏無縫切換，真的很酷的~