练习 - 应用导航练习

已完成

本模块即将结束，让我们运用您在引导式练习中所学的知识。

在本示例中，您将继续在 Contoso Coffee Machines 应用中配置屏幕转换。 如果您使用的是其他多屏幕应用，则可以按照类似步骤操作。

注意

输入公式时，最好直接在编辑 (fx) 栏中键入公式。 避免从其他来源复制粘贴，因为单引号和双引号在 Power Apps 中可能无法正确翻译。

1. 登录到 Power Apps 主页并在编辑模式下打开 Contoso Coffee Machines 应用。

2. 在主页上，选择查看目录按钮（在下面的示例中为 Button2）。 在其 OnSelect 属性中，将：

   Navigate('Catalog Screen')

   替换为：

   Navigate('Catalog Screen',ScreenTransition.Cover)

   

3. 在主页中，选择 Admin Screen 按钮。 在其 OnSelect 公式中，将：

   Navigate('Admin Screen')

   更改为：

   Navigate('Admin Screen',ScreenTransition.Fade)

4. 预览应用。 选择目录和管理按钮来观察转换。 然后，使用后退按钮返回到主屏幕。

5. 切换回编辑模式。 在 Admin Screen 上，选择用作后退按钮的箭头图标。 将其 OnSelect 属性：

   Back()

   更新为：

   Back(ScreenTransition.UnCoverRight)

6. 再次预览应用。 选择 Admin Screen 按钮，然后选择后退按钮。 注意返回转换中的差异。

7. 在编辑模式下，插入新屏幕：New screen>Templates>Success。 将其重命名为 Success Screen。

8. 在 Catalog Screen 上，从树视图中选择窗体控件。

9. 将窗体的 OnSuccess 属性设置为：

   Navigate(‘Success Screen’,ScreenTransition.Fade)

10. 在树视图中导航到 Success Screen，然后插入计时器控件。

11. 设置这些计时器控件属性：

    • AutoStart：true

    • Duration：4000

    • OnTimerEnd：Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • Visible：false

    

12. 返回到 Catalog Screen 并预览应用。 在窗体中进行更改并选择保存更改。

    应用应显示 Success Screen 四秒钟，然后返回到 Catalog Screen。

13. 退出预览模式并返回到 Home Screen。 现在，添加下拉导航菜单。

14. 插入一个下拉列表控件，并将其放置在标头矩形的左上角区域下方。

15. 在下拉列表上方添加一个文本标签控件，并将其 Text 属性设置为：

    Screen Navigation

    将其 Color 属性设置为：

    Color.White

16. 选择 Dropdown 控件并设置其属性：

    • Default：""

    • Items：["", "Catalog Screen", "Admin Screen"]

17. 设置其 OnChange 属性：

    Switch(
        Self.SelectedText.Value,
        "Catalog",
        Navigate(
            'Catalog Screen',
            ScreenTransition.Cover
        ),
        "Admin",
        Navigate(
            'Admin Screen',
            ScreenTransition.Cover
        )
    );
    Reset(Self)
    

    

18. 再次预览应用。 测试下拉列表以确认屏幕之间的导航。

19. 返回到编辑模式，选择 Catalog Screen。 复制 (Ctrl+C) 并粘贴 (Ctrl+V) 后退图标。 将重复图标移至标头矩形的右上角。

20. 将重复的图标更改为主页图标。

21. 将主页图标的 OnSelect 属性设置为：

    Navigate('Home Screen', ScreenTransition.CoverRight)

22. 预览应用。 在 Catalog Screen 上，确认选择主页图标会将您导航回 Home Screen。

您已成功在应用中配置导航功能：

• Navigate 和 Back 函数与屏幕转换。
• 使用 OnSuccess 提交窗体时显示的 Success Screen。
• 通过 OnTimerEnd 在延迟后导航的计时器。
• 使用 OnChange 进行导航的下拉菜单。
• 用于返回到主屏幕的主页图标。

接下来，您将完成知识检查。