Power Apps 创建响应式布局

Posted 2022-12-15 霖雨

　　前言

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