Power Apps更新了一系列被称为**"现代控件"**新的控件,这些控件有着新的显示效果,同时为我们提供了许多新功能,今天我们就尝试使用这些新控件来做一个功能完备的表单。
要使用现代控件,我们需要先在设置中打开现代控件。

之后我们开始搭建应用。
首先是页头,新的现代控件为我们提供了一个新的做页头的页头控件。

在这个新组建中我们可以直接上传我们公司的logo,以及该控件会自动为我们显示当前登录人的头像。

以前我们要实现这么一个页头还得自己手搓,现在直接拉一个控件就能用了。
之后是表控件。

该控件为我们提供了调整列宽和滚动条的功能,之前使用库的时候,由于垂直库没有水平滚动条,要显示比较多的字段的时候还需要我们手搓一个水平滚动条的显示效果,现在终于可以直接用了,除了不能直接在表上编辑字段外,感觉还是比一般的"库"和"数据表"更方便且泛用一点。

这个表控件还有分页功能,一页显示25条数据,数据量比较大的时候就会自动分页。
而且这个控件还具有一种特殊的响应式效果。


我们可以在这里设置表的样式,默认的Reflow就是响应式的样式效果,List only就是始终保持桌面端那样表格的样式,Gallery only就是始终保持移动端那样库的样式。

现在空间还为我们提供了一个选项卡的控件。

我们为这个选项卡的"项"属性(Item)提供一个数组,选项卡即可将数组中的每一个元素作为选项卡标签名显示出来。

当选项数量较多,超出最大宽度后,多余的选项将自动被折叠起来

我在这里使用选项卡来切换列表、新表单和查看表单的页面,只需要在切换选项卡的时候给一个变量赋值。

我这里同时还配置了窗体控件的状态,新建表单的时候需要new一个表单,查看表单的时候view即可。
然后根据这个变量来切换表控件(Table)和窗体控件(Form)的显隐即可


没有让表控件和窗体控件直接判断选项卡选中的值来切换显隐,是因为这样做的话我总感觉在查看表单和新建表单之间切换的时候会有比较大的延迟。
表格上边这几个按钮也可以根据这个变量以及窗体控件的状态来切换显隐。





之后为各个按钮加上对应的功能即可,那四个筛选器按钮就设置一个变量,表控件的数据源就按照这个变量来过滤(Filter)数据,提交就是SubmitForm,编辑就是EditForm,取消编辑就是ViewForm,删除就是Remove,清空表单就是先ResetForm再NewForm。
这个表控件还有一个小细节需要我们配置,就是当我们在大屏幕桌面端访问应用的时候,表单会出现大片空白

而在小屏幕移动端访问应用时又会出现像是控件超出边界的显示效果。

第一个问题我们可以通过打开表单内所有控件的"宽度适应"功能来解决。


而第二个问题其实就是窗体控件的最小宽度闹得。

我们把窗体控件的最小宽度改成其父容器的最小宽度即可。


欢迎加vx交流:vAfi_FeiFei