使用控件修改其他控件的属性

  • 6 分钟

使用控件时，可以基于另一个控件的属性修改特定控件的运作方式。 该功能使用户可以根据输入看到体验的变化。

例如，您的应用可能有一个下拉菜单，允许用户选择小、中或大号字体。 根据此设置，应用可以动态改变整个应用中的字体大小。

显示小号字体的下拉菜单和显示 8 号字体的文本标签的屏幕截图。

显示大号字体的同一下拉菜单和显示 24 号字体的同一文本标签的屏幕截图。

您可以基于用户的选择对字体颜色、填充颜色、控件位置或显示还是隐藏控件应用类似的逻辑。 例如，如果用户选中“您是新客户吗？”复选框，屏幕中会显示输入新客户的字段。

未选中询问“您是新客户吗？”复选框的屏幕截图，下方显示空白部分。

选中询问“您是新客户吗？”复选框的屏幕截图，其中显示了名称和姓氏输入字段。

使用输入来调整控件的位置

我们使用以下示例了解控件在画布上的位置，以及如何使用用户输入对其进行修改。 首先进行简要介绍，控件在画布上的位置基于以下两个属性：X 和 Y 属性。

  • X - 控件左边缘与屏幕左边缘之间的距离。

  • Y - 控件顶边缘与屏幕顶边缘之间的距离。

请记住，X 和 Y 属性适用于除屏幕以外的所有控件。 现在转到您的应用，让我们通过实践来学习。

  1. 首先，我们从树视图面板中选择 + 新建屏幕，然后选择空白，为您的应用创建一个新屏幕。

  2. 接下来插入一个下拉列表控件。 选择 + 插入按钮并在搜索字段中输入下拉，然后选择下拉。

  3. 将下拉列表上的 Items 属性从 DropDownSample 更改为以下值：

    Table({Position:"Top"},{Position:"Middle"},{Position:"Bottom"})

    这样可创建一个记录表，包含名为位置的一列，有三条记录，分别为顶部、底部 和中部。 如果您按住 Alt 键同时选择下拉列表控件，将看到显示这些值。

    显示值“顶部”、“中部”和“底部”的下拉列表控件的屏幕截图。

  4. 接下来，我们将添加一个可以在屏幕上动态重新定位的控件。 再次从功能区中选择 + 插入，在搜索字段中输入飞机，然后选择飞机图标。 将飞机图标拖到屏幕中间。

  5. 现在，让我们根据下拉列表控件将飞机图标显示在屏幕上的不同高度。 为此，请选择飞机图标，然后找到 Y 属性。 请注意，它当前具有静态数值。 将 Y 属性的值更改为以下内容：

    Switch(Dropdown1.SelectedText.Value,"Top",0,"Middle",Screen1.Height/2,"Bottom",Screen1.Height/1-Self.Height)

    注意

    您的下拉列表控件的名称可能不是 Dropdown1；请确保将 Dropdown1 替换为您的控件的具体名称。

    Power Apps 中 Y 属性的屏幕截图。

  6. 为了获得一点乐趣（并测试您的公式），请将您的应用置于预览模式。 现在，从下拉菜单中选择每个位置。 请注意，当您更改下拉值时，飞机图标会调整其“高度”（或 Y 坐标）！

解释

我们能够完成飞机图标的移动，因为 Y 属性只是一个数值。 不过，并非所有数字都有效，因此我们必须提供能够在屏幕上显示图标的数字。

基于下拉列表控件的位置值，我们使用了一个 Switch 函数，基于用户输入为 Y 分配不同的值。 零位于顶部，屏幕的整个高度位于底部。 我们使用了屏幕控件的 Height 属性以涵盖使用此应用的任何平台的情况。

我们还对于“底部”值使用了飞机图标 (Self.Height) 的 Height 属性，以便可以在屏幕底部看到飞机图标，否则它将超出我们的可视屏幕。

可以更改控件中的属性来修改其他控件的行为方式。 这提供了塑造用户体验的绝佳方法。 不用关闭练习应用，在下一个模块中，我们将了解如何通过应用条件格式来增强您的应用。