Power Apps 建立響應式佈局

霖雨 發表於 2022-01-28

  前言

  我們都知道Power Apps作為低程式碼平臺,最大的優勢就是各個裝置之間的相容性,尤其是自帶的響應式佈局,非常好用。

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

  正文

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

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

Power Apps 建立響應式佈局

  2.設定Power Apps的顯示,預設如下圖:

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

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

Power Apps 建立響應式佈局

  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.然後在頁面上新增一個控制元件,標識這個頁面大小,後續使用頁面大小變數的時候,都是用這個控制元件的值,如下圖:

Power Apps 建立響應式佈局

  5.使用佈局控制元件,會讓我們操作起來,會更加簡便,如下圖:

  Tips:因為涉及的細節非常多,建議大家自己科普一下佈局控制元件怎麼用,可能不是一下就能明白的。

Power Apps 建立響應式佈局

  6.佈局中的注意事項,換行和靈活高度要開啟(靈活高度開啟以後,豎向佈局控制元件的高度,也需要根據螢幕大小動態變化),如下圖:

Power Apps 建立響應式佈局

  7.接下來是控制元件的配置,首先開啟靈活寬度,讓控制元件可以自適應;然後,設定LayoutMinWidth為響應式寬,如下圖:

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

Power Apps 建立響應式佈局

  8.最後,設定外層豎向佈局控制元件的動態高度,上面已經提到了,如下圖:

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

Power Apps 建立響應式佈局

  9.演示效果:

  1)螢幕寬度為4的時候,如下圖:

Power Apps 建立響應式佈局

  2)螢幕寬度為2的時候,控制元件變成兩行,如下圖:

Power Apps 建立響應式佈局

  結束語

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

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