练习 - 为画布应用创建基础屏幕导航

已完成

本单元中,我们将继续使用 Contoso 咖啡机应用,因此请务必打开我们在此学习模块中继续构建的应用。

我们要添加一些应用屏幕导航,以便用户可以移动到应用的不同屏幕。 生成应用时,树视图顶部的屏幕是应用即将登陆的屏幕,除非您故意在应用的 StartScreen 公式中定义了其他屏幕。 在我们的示例中,与他人共享应用时,他们看到的第一个屏幕就是“Home screen”。

请按照以下步骤操作,向应用中添加一些导航:

  1. 转到应用的“Home Screen”并插入两个按钮控件。

  2. 将两个控件一上一下放置在屏幕中央,二者之间留有一些空间,这样我们的用户就不会意外点错控件。 注意 Power Apps 如何向您提供屏幕上的虚线引用,以帮助您相对于屏幕上的其他控件放置控件。 在本例中,请确保控件略微偏移,以便我们可以学习如何对齐控件。

  3. 按住 Shift 键,同时选中两个控件。 部分控件属性完全相同,对齐所选的两个控件非常容易。 在接下来的两个步骤中,使这两个控件保持选中状态。

  4. 从命令栏中选择对齐下拉控件,然后选择“左对齐”。 如果您没有在命令栏中看到对齐下拉控件,则可以右键单击(保持两个控件处于选中状态),随后,对齐选项下拉菜单会显示在弹出窗口中。

    注意

    对齐功能非常强大,可以让您一次快速排列多个控件。 另一个值得注意的强大功能是撤消功能,此功能也位于命令栏中返回按钮的右侧。

  5. 现在,查看右侧的“属性”面板,找到“Width”和“Height”属性。 这些是数字输入字段。 针对 Width 输入 250,针对 Height 输入 100

  6. 将顶部按钮的 Text 属性更改为“View Catalog”,将底部按钮的 Text 属性更改为“Admin Screen”。

    若要编辑 Text 属性,您可以双击屏幕上按钮的文本,可以转到编辑字段,也可以转到“属性”面板以更新文本。 请尝试所有这些方法,以确定哪种方法最适合您。

  7. 接下来,我们要添加第一批要启用屏幕导航的功能。 Navigate 函数包含一个必填参数,即应用要切换到的屏幕。 添加 Navigate 函数时,您可以在屏幕名称周围输入单引号,请记住,在编辑栏中键入名称时,Power Apps 会为您显示提示。 选择“查看目录”按钮,并将以下内容添加到 OnSelect 属性中:

    Navigate('Catalog Screen')

  8. 同样,选择名称为“Admin Screen”的按钮,然后在 OnSelect 属性中输入以下内容:

    Navigate('Admin Screen')

  9. 允许用户从主屏幕导航可能导致他们滞留在目标屏幕上,除非我们为他们提供返回到主屏幕的方法。 您已经了解过 Navigate 函数,可用于帮助用户返回主屏幕,但是 Power Apps 可以通过 Back 函数返回到用户使用的上一个屏幕。 转到 Catalog Screen 并添加按钮控件。

  10. 将新的按钮拖动到屏幕右下角,并将 Text 属性更新为“返回”。

  11. 现在,将新按钮的 OnSelect 属性更新为以下内容:

    Back()

    此公式会让用户返回到上一个屏幕。

  12. 转到 Admin Screen 并重复上述两个步骤。

  13. 现在,返回 Home Screen 并将应用置于预览模式。 尝试选择“查看目录”按钮,然后使用“返回”按钮返回主页。 对“Admin Screen”按钮执行同样的操作。

提示

仅当您先通过应用导航到该屏幕时,应用才会理解“返回”。 如果开始从“Catalog Screen”或“Admin Screen”预览应用,则 Power Apps 不会提供上下文,为您说明使用“Back”函数导航到哪个屏幕。 因此,预览应用时,请记住从 Home Screen 开始预览。

恭喜! 现在,您已向应用中添加了基本导航。 如果想要了解有关应用导航的更多信息,我们将在下一个学习模块中详细探讨。 在经过简短的知识检查后,请与我们继续学习如何让您的应用更上一层楼!