Power Apps自定义导航栏

适用场景

假设一个场景，我们需要开发一个采购系统，然后上面有很多功能，我们可以通过导航栏来归类一些功能，比如我们采购一类，然后账单一类，系统审批一类。。。还可能有很多类，这时候我们开发的时候肯定也需要导航栏来跳转，那如果我们每个页面都一点一点开发，不仅麻烦而且还可能因为格式的不一致导致不美观。这个时候我们就可以自定义一个导航栏9作为一个组件，然后在每个页面中引用。

前置条件

准备一个微软账号，然后登录到微软Power Apps开发网站。

自定义步骤

创建一个应用，然后进入到我们的Power Apps里面，转到组件：
1.我们新建一个组件，因为我们不同的页面可能布局不一样可能会导致导航栏大小不一所以在组件里规定一下大小
2.这里我们把导航栏的高度设置为屏幕的最大高度，宽度为页面宽度的20%。


3.然后我们可以改变一下导航栏的背景颜色。

4，然后我们插入一个图标作为导航栏的展现与隐藏，将他的点击属性设置为如下图，其意思就是控制这个变量的true，false

5，然后我们新建一个属性，以便我们可以控制导航栏的宽度和看到导航行的宽度数值具体是多少。

6，然后我们可以根据刚刚的变量进行控制导航栏的宽度，下面的意思是，如果点击隐藏/展现图标之后，导航栏可以根据变量如果是true，则为页面宽度的16%，我上面提到的是20%，这个根据情况而定，可以根据需求变动，如果是False，则为90.

7.效果如下：


8.然后我们将组件的宽度设置为我们刚刚自定义的属性

9.然后我们可以插入一个空白垂直库来存放我们的菜单栏，把宽度设置为组建的宽度。

10.高度如下，我们衔接隐藏/展现图标。

11.如果我们不喜欢空白垂直库右侧的滑动条我们可以关闭

12.如下图

13.我们多个菜单栏需要一个表格来存储管理，但是已有的属性并不满足我们的需求，这里我们继续自定义一个表格的属性。

14.之后配置 NavItems 的数据格式，我们在导航栏组件中实际会需要用到三个字段，分别是导航文字 Title ，要导航到的屏幕 Screen 以及导航的图标 Icon 。
这里由于我们在组件内，所以没法直接引用其他屏幕，只能暂时输入App.ActiveScreen ，等到最后在屏幕中引用组件时给组件的自定义属性赋值就好了。

15，将垂直库的Items设置为我们刚刚的表格

16.
然后我们将几个图标的OnSelect设置 如下，方便跳转屏幕

17.为了美观我们可以设置一下矩形框，这样我们选中的时候才会有，不选中的就没有。

18.接下来我们就可以在屏幕中引用组件进行应用。我们三个参数中Screen后面的值为我们屏幕的名称。


三个界面都是一样的。

成品展示

审批界面

采购界面

账单界面

ok,做的有点丑不要在意，这里只是给大家做个实例更方便理解。