Power Apps自定义组件

了解Power Apps Components

首先我们先了解什么是组件，组件可以理解为可重用的 Power Apps 画布应用控件的集合，每当我们希望让一些控件可以在不同应用或者屏幕中重复使用的时候，就可以创建组件。
比如说导航栏，我们每个页面都要复用。标题栏，我们大多数页面也都需要用到标题。

场景假设

Ok,现在我们来动手实操一下。
打开我们的Power Apps页面,给定一个App名称，创建一个平板布局的画布应用。

我们默认情况下会在Screens进行开发，现在我们来假设一个场景，我们有三个Screen，然后我们每个界面都需要一个标题（背景色灰色，字体加粗，字号20.。。。）等一系列的格式，我们要怎么做？不可能一个界面一个界面去配置吧太浪费时间。这个时候我们就用到了组件。

资源准备

这里我会创建三个空白的Screen代表三个界面。分别重命名为“概览”，“添加”，“修改”；

现在我们开始定义组件来完成上述的条件。
我们Screens界面算准备完成了，转到Components界面。我们来创建一个公用的组件。点击New component

我们将组件重命名为Tab。

这里我们插入一个Label，这里我将label背景设置成了灰色。然后我们可以手动给他拉长按照上面的格式给他设置.

然后我们回到我们的Screens界面，开始应用我们的组件。

我们选中概览页面，点击插入
找到自定义。展开之后我们可以看到我们在组件库中自定义的组件Tab，然后在其他两个页面也做同样的操作。

我们会发现一个问题就是无论怎么拉拽label他都不会变长。好我们回到组件库中（Components）中。找到左侧属性栏中的宽度（Width）属性。然后我们改为Parent.Width


我们再回到界面，发现已经撑满了。

现在我们来继续下一步，我们想要在不同的页面显示不同的内容应该怎么做呢，通常情况下我们label修改内容只需要找到控件的Text属性修改内容即可。但是我们会发现自定义组件找不到Text属性的，（他并不知道你这个自定义的组件是一个label，他会把你的一些扩展属性清除掉），所以我们要在给他自定义一个属性，用于存放标题内容。

我们转到组件界面，然后选中组件右侧有自定义属性，我们自定义属性名为HearderText，属性类型选择输入。其他不变点击创建。

自定义属性类型

自定义属性分为两种类型，输入和输出属性。

输入属性

如果将属性设置为输入属性，意味着我们可以将屏幕中的数据传递到组件中，比如在首页我们就可以通过输入属性传递一个文字给Header组件，这样Header组件中标签的文本内容就可以根据屏幕中传递的数据动态进行设置。

输出属性

输出属性与输入相反，它可以将组件当中的数据返回到调用的屏幕当中。
ok,我们回来继续解决我们的问题。
为了满足当前的需求我们需要按照下图配置创建一个输入属性 Header Text。
并将数据类型设置为文本，因为我们要向组件传递一个文本类型的数据。
我们创建的是组件的属性，我们怎么去控制里面label的Text属性呢，ok,我们继续选中Label，找到Text属性，给他绑定为我们组建的新建属性，如下图：

我们返回Screens界面，选组我们插入的组件。在属性里面找到Header Text，如下图所示。

然后改为我们需要的标题值：

这样我们一个基础的自定义组件就创建好啦。（关注我，下期继续自定义导航栏。）