【PowerApps】用自定义组件做一个功能完备的左边栏

众所周知，Power Apps是支持自定义组件的。

这样的话对于一些比较常用的功能我们可以将其封装为一个组件，今天的话我们来封装一个左侧边栏的组件。

首先自然是进入到“组件”一栏，新建一个组件，最好重命名一下，我就直接命名成“左边栏”了。

在我们的左边栏里放一个容器，容器里随便放一个可以代表菜单的图标，作为边栏的头部，这个头部后边要可以实现修改高度和填充色，这样的话用户就可以根据自己应用的样式来将这个侧边栏的样式修改的更能融入自己的应用。

为了实现我们所的修改效果，我们要为这个组件添加两个属性，菜单头的颜色和高度

点击新的自定义属性，然后配置好各项属性即可，注意别忘了改数据类型。

建好属性之后，我们把组件属性和组件中的控件对应起来。

这样的话用户修改组件的属性，组件就可以产生相应的变化了。

之后我们添加一个可以让用户自己设置菜单中选项的属性，我们选择“表格”数据类型。

然后我们配置一下这个属性的默认值，以后用户使用时，只需要像下图这样，往这个属性中传入一个表格类型的数据，就可以修改菜单选项的图标、名称、链接以及选项的排序。

然后往我们的侧边栏中加入一个空白垂直库，用来显示我们的菜单选项。

这个库的数据源就设置为我们的“菜单项”属性的值。

然后在我们的空白垂直库里加一个图标和一个文本标签，将它们的值设置为我们“菜单项”属性中的MenuLabel（名称）和MenuIcon（图标）。

然后我们搞一个按钮放在库中。

把这个按钮的大小调到能覆盖整个项，然后把这个按钮的填充色全部改为透明。

再把这个按钮的点击事件设置为跳转到“菜单项”属性中的MenuScreenNavigate（该项跳转到那个页面）。这样我们点击菜单项时其实是点击了这个按钮，随后这个按钮就会根据我们配置的“菜单项”属性的值来跳转页面。

接下来我们配置菜单的显隐，首先我们加一个显示菜单的属性，默认值为false，注意这个属性要打开“改变值时触发OnReset事件”的设置。

然后配置我们组件的OnReset事件，可以理解为当页面刷新的时候将“显示菜单”属性的值赋给一个变量。

用这个变量来控制库的显隐。

设置这个菜单图标的点击事件——对控制库显隐的那个变量取反。

这样配置完了之后，我们除了可以实现点击菜单图标来展开/收起菜单，还可以直接在组件属性这里控制菜单默认的显隐状态，后边我们把菜单图标隐藏后，还可以实现将侧边栏常驻在页面中的效果。

然后我们要实现当菜单收起后，自动将宽度收窄的功能。因为我们这个菜单到时候肯定是要置于整个应用的最顶层的，如果我们不把菜单收窄，那么就会影响到我们页面中其他控件的使用。

首先我们添加一个设置菜单宽度的属性。

这还没完，因为我们组件的宽度属性中是识别不到控制库显隐的那个变量的，所以我们无法直接对组件的宽度属性配置表达式。

所以我们需要建一个输出属性，利用这个属性来计算菜单宽度。

将这个输出属性的默认值设置成这样，当菜单时显示状态的时候，菜单的宽度就是“设置菜单宽度”属性的值，否则菜单的宽度就跟上边那个菜单图标一样宽。

然后再把组件宽度设置成这个输出属性的值，典中典Power Apps开发中的曲线救国。

这样做完后，菜单被折叠起来后将会被收成这么小，这样就不用太担心影响其他控件使用的问题了。

但注意，我们这样设置以后，就只能通过“设置菜单宽度”属性来改菜单宽度了，否则就会破坏自动收窄的功能了。

随后我们再做一些细节上的设置，比如加入修改菜单项的颜色和间距的属性、修改菜单的背景色的属性什么的。

然后我们就可以开始使用这个自定义组件了，直接把我们这个组件放到表单中，可以看到我们这个组件默认的菜单头的高度和颜色跟我们的表单不是很搭。

这时只需要修改组件属性，把菜单头高度、

菜单头颜色、

以及菜单图标的颜色一改

直接让我们的组件完美融入表单的样式。

如果需要更改菜单项，直接删改菜单项属性即可。

---

欢迎加vx交流：vAfi_FeiFei