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、平板、手機端可以無縫切換，橫屏豎屏無縫切換，真的很酷的~