Power Apps 画布应用 入门教程 第二十章 导航组件

?这是组件系列的第二篇文章，在上一章中我们介绍了组件和组件库的概念，并创建了一个简单的Header Compoent 。在本篇文章中我们将一起完成一个非常通用的左侧导航组件，允许用户在屏幕中给组件传值从而实现动态导航配置，最终效果如下图所示：

创建左侧导航组件

打开我们之前的组件库（或者你也可以创建一个新的组件库）。

新建一个 LeftNavigation 组件。

我希望这次做的导航组件是响应式的，可以同时适应移动端和PC端布局。

所以组件的宽度和高度就非常重要。

首先组件高度，这里采用和屏幕高度一样的公式，通过【Max】从当前应用的高度和应用最小高度中取一个最大值来作为组件的高度。这就相当于应用有多高，导航组件就有多高。

而组件的宽度，因为是左侧导航组件，那么宽度肯定不会和应用的宽度一样。

我们这里可以将组件宽度设置为应用的20% 也就是五分之一。

之后我们通过组件的【Fill】属性给整个组件改一个浅灰色背景。

为了更直观的查看组件在应用中的样子，我们可以将组件插入到屏幕。

可以发现目前左侧导航组件就是一个浅灰色的背景，然后占屏幕宽度20%，高度100% 的一个组件。

接下来回到组件中，继续完成组件创建。

首先添加一个图标，给他放到左上角然后按照下图设置大小和填充值。

我希望在用户点击这个汉堡图标时，可以增加导航组件的宽度，让其可以显示更多的详细内容，从而实现一个展开和折叠导航的效果。

为此我们需要先创建一个变量，让用户点击icon 时，变量设置为当前的反值，如果当前是 true , 点击后就设置为 false 。如果当前是 false 点击后就设置为 true 。

同时我希望导航菜单的宽度可以返回到屏幕当中，这需要创建一个输出属性。

选中当前组件，在属性面板中新建一个自定义属性，并按照下图进行配置。

之后我们在组件中设置这个【MenuWidh】，当 varOpenMenu 等于 true 时，也就是用户点击 Icon 时将组件宽度设置为应用的20%，否则设置为 70 ，这个70就是 Icon 的宽度。

配置完 MenuWidth 属性后，我们将其赋值给组件的 Width ，此时因为没有点击ICON，所以 varOpenMenu 是false应用入门，那么导航组件的宽度此时就是70.

这时候我们运行应用，点击组件中的汉堡图标，导航的宽度会自动变为应用宽度的5分之一，再点一次就会收回宽度重新变为固定的 70 .

增加导航按钮

我们如果希望能够动态的显示导航栏中的导航按钮，则需要通过库控件来对导航区域进行布局。因为只有这样才可以根据库控件中的数据源来动态配置导航内容。

在组件中插入一个垂直空白库，调整宽度和位置，使其处于汉堡图标下方。

为了让库控件的宽度始终和组件宽度保持一致，我们需要将它的 Width 设置为 Parent.Width ，这样随着我们展开和回收导航菜单，下方的库控件也会随着变化。

设置完宽度后，我们需要让库控件的高度也变成自适应的，可以根据组件的高度自动变化。

只需要将它的 Height 设置为组件的高度 - 图标高度即可。

下一步就是给库控件中添加其他控件来实现导航的样式。

首先插入一个矩形框图标，调整下库的大小和位置，使其看起来像下图这样。

接下来再插入一个图标，将其高度设置为库控件模板高度，同时将位置宽度和填充按照下图进行配置 .

导航中除了图标还需要文本内容，但是文本内容只有导航展开的时候才会显示。

所以我们添加文本标签后，需要将它的X设置为0 ，左填充设置为 70，Y设置为0，其他配置按照下图设置。

但此时我们会发现加上文字后，导航组件的宽度就不够了，文字都没法完全显示，所以我们要增加以下导航的宽度。

配置动态导航结构

目前我们的导航内容是固定的，接下来可以通过配置库控件的 Items 属性，将其设置为一个动态的输入属性即可实现我们所需要的效果。

切换到组件的属性面板，新建自定义属性。

新建一个叫做 NavItems 的输入属性，同时将数据类型设置为表格。因为库控件中需要表格作为数据源配置。

之后配置 NavItems 的数据格式，我们在导航栏组件中实际会需要用到三个字段，分别是导航文字 Title ，要导航到的屏幕 Screen 以及导航的图标 Icon 。

这里由于我们在组件内，所以没法直接引用其他屏幕，只能暂时输入App.ActiveScreen ，等到最后在屏幕中引用组件时给组件的自定义属性赋值就好了。

接下来把配置好的 NavItems 赋值给库控件的 Items 属性，让导航栏以自定义属性为依据进行动态显示。同时将图标的 Icon 赋值为ThisItem.Icon , 将标签文本赋值为ThisItem.Title

并且设置库控件中三个元素的点击行为，在点击时跳转到 ThisItem.Screen

这时一个带有跳转屏幕功能的导航组件就初步完成了。

在屏幕中应用导航组件

我们切换到屏幕中，分别创建三个屏幕，并将导航组件插入到这三个屏幕当中。

接下来就是给屏幕组件赋值，但由于我们当前是在组件库中，没有 App.OnStart 行为，所以可以添加一个按钮，在按钮点击时将导航数据生成并存储到集合 colNav 中。

之后将三个屏幕当中的导航组件自定义属性 NavItems 都赋值为 coNav 。

运行应用点击按钮后，将会自动出现三个导航，可以通过导航在三个页面之间来回切换。

但是在点击导航的时候会发现，有时候虽然页面切换了，但是明明没有点击汉堡Icon ，导航栏依然会展开。

这是因为我们没有在跳转到新页面之前重置变量，因此我们需要在点击行为中先将变量设置为false 。

优化导航组件

另外我们还要优化下组件，让导航栏中突出显示当前所在屏幕。

这个非常简单就能实现，只需要利用之前添加的矩形图标，通过 If 进行条件判断，当 App.ActiveScreen 等于当前导航的屏幕时，显示该矩形图标。

最终效果如下图所示

总结

本篇文章带大家完成了一个通用的左侧导航组件，其中利用了库控件和组件的自定义属性实现了动态导航结构的配置，从而根据页面中传递的参数动态配置导航。

（编辑：晋中站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!