Power Apps 创建响应式布局

  前言

  我们都知道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、平板、手机端可以无缝切换,横屏竖屏无缝切换,真的很酷的~

上一篇:“数学口袋精灵”第二个Sprint计划(第三天)


下一篇:网站桌面端和手机端不同url的设置