Power Apps 响应式布局基础概念

时间：2023-09-23 15:36:02 | 来源：网站运营

时间：2023-09-23 15:36:02 来源：网站运营

Power Apps 响应式布局基础概念：什么是布局容器




布局容器是 Power Apps 画布应用在 20年11月 推出的一个布局控件。通过布局容器可以根据容器的大小自动调整控件的大小，从而实现响应式布局，节省了手动定位控件位置的时间。

如何使用布局容器




首先需要在编辑应用的文件-设置中将【调整为适合页面】给关闭，







之后回到画布应用编辑界面，点击左侧的插入选项卡，展开布局可以看到其中有3个容器控件，分别是【水平容器】，【垂直容器】和【容器】







让我们将【水平容器】拖到画布中。







接下来可以往水平容器中添加其他控件。

比如添加三个按钮。







接下来让我们切换到树状视图，可以看到被添加的三个按钮都被插入到了容器控件下方。







我们看一下容器控件中有哪些可以配置的属性。

【方向】：用来控制容器中元素的排列方式，因为当前是水平布局，所以容器中的按钮就是横向排列，如果我们将【方向】改为垂直，容器中的控件将垂直排列。（这和我们直接在插入选项卡中插入【垂直布局】容器的效果一样 ）







我们将容器控件改为水平布局，之后适当拉大一下容器的宽度。

可以看到容器中的控件都是在左上角对齐的。







这些对齐方式就是通过【两端对齐（水平）】和【对齐（垂直）】属性进行的控制。

当我们将水平和垂直都设置为居中时，按钮就会居中在容器中。







或者可以设置两端对齐 ，可以看到容器中的按钮会随着容器本身的宽度变化，依然保持着三等分的水平位置。







将垂直对齐改为【拉伸】后，容器中控件的高度会随着容器本身高度而变化，一直保持着撑满整个高度。







【间隔】用来定义容器中控件的间隔距离，如果设置为两端对齐，那这个间隔就无效了，因为系统会自动来设置间隔。







【溢出】用来定义在容器中宽度过小，导致容器中控件宽度超过容器宽度时，是显示滚动条，还是隐藏多余部分。







但如果我们此时勾选了【换行】，当控件超出容器宽度时会自动换到下一行。







以上这些就是在容器中的基本属性配置，除此之外在容器中的控件也会有一些特殊的地方，

我们选中容器中的一个按钮，可以看到一个【在容器中对齐】的属性，该属性会配置控件的对齐方式，默认是【由容器设置】







但如果我们进行了自定义，比如把其中一个设置为【拉伸】，那他就会脱离容器本身的设置，单独应用自定义的对齐方式。（前提要把容器的换行关上）







下方还可以看到一个【灵活宽度】配置，如果将其打开，该控件的宽度会占据被分配在容器中的所有宽度。







如果我们在容器中对多个控件开启了【灵活宽度】后，可以通过【填充部分】来定义指定控件所占的比例。比如将三个按钮都开启灵活宽度，此时再把第一个按钮的填充部分设置为 4 ，那就相当于 第一个按钮占 4个宽度位，第二个和第三个分别占1个宽度位。

也就是说第一个按钮会占整个容器宽度的6分之4。







新的屏幕模板




除此之外，在我们尝试新建屏幕时，会多出3个新的屏幕模板。

这些屏幕模板就是 Power Apps 通过布局控件去定义的页面







比如我们点击【页面、主要部分、页脚】

此时新建的屏幕会整体有一个水平布局容器，并在该容器下方嵌套了3个容器。







并且最外围的容器宽度是 Parent.Width ，高度是 Parent.Height 然后容器的水平布局也是拉伸，这表示我的屏幕有多大，该容器就会有多大，容器中的控件也会随着屏幕的大小发生变化。这就是响应式布局，可以根据设备屏幕大小，自动改变界面的样式。







而在该容器下方的 HeaderContainer 中，我们可以发现该容器的高度被固定为了 75 。这个高度是不会随着屏幕大小而改变的。







FooterContainer 同样将高度定义为了 75 .

此时 MainSectionContainer 的高度被定义为灵活高度后，就相当于中间区域会随着屏幕高度发生变化，但是上下两个部分永远留了 75 高度。







在响应式布局中添加控件




介绍完容器的属性，和新增的响应式屏幕模板后，我们来看一下如何在响应式屏幕中添加控件。

首先在 Header 中添加一个文本标签。







之后更改 Header容器的对齐，将其改为居中对齐。







并给 Header 容器添加一个背景色。







之后将文本标签控件的灵活高度打开，文本对齐设置为居中对齐。







设置下文本内容，颜色和字号。







此时我们运行应用，画布会撑满整个屏幕







如果浏览器屏幕缩小，画布中的内容也会同步缩小。







我们在 Footer 中同样可以添加两个标签，设置文本并配置样式后，将 Footer 容器的对齐方式改为两端对齐，此时应用的底部也会实现响应式的布局，根据屏幕宽度不同，两个文字始终定位在屏幕底部左右两端。







在 Main容器中添加一个高度灵活的库控件，并添加表单窗体控件后即可实现一个最简单的响应式应用。