练习 - 应用导航练习

30 分钟

本学习模块即将结束，下面，我们要在一个练习中汇总一下所有内容。

在下面的示例中，我们将继续向 Contoso 咖啡机应用添加屏幕切换功能，但您可以使用任意多屏幕应用。下面的步骤与我们在此学习路径中一直在构建的应用相对应。

注意

输入公式时，最好手动将其键入公式 (fx)，而不是使用复制/粘贴方法。单引号和双引号在 Power Apps 中的翻译结果不同。

登录 Power Apps 主页并打开 Contoso 咖啡机应用（在编辑模式下）。
在主页中，选择查看目录按钮。在 OnSelect 公式中，将 Navigate('Catalog Screen') 更改为：

Navigate('Catalog Screen',ScreenTransition.Cover)
在主页中，选择 Admin Screen 按钮。在 OnSelect 公式中，将 Navigate('Admin Screen') 更改为：

Navigate('Admin Screen',ScreenTransition.Fade)
将应用置于预览模式。选择“主屏幕”中的按钮以导航到相应的屏幕，并使用您的后退按钮导航回“主屏幕”，测试切换效果的观感如何。
为后退按钮添加切换效果。将应用重设为编辑模式，然后转到“Admin Screen”。
选择箭头图标（或您用作后退按钮的任意图标/按钮），然后将 OnSelect 的公式从 Back() 更改为：

Back(ScreenTransition.UnCoverRight)
返回“主屏幕”并将您的应用设为预览模式。选择 Admin Screen 按钮，然后选择后退箭头按钮。您是否注意到切换效果有什么差异？
返回编辑模式。依次选择新建屏幕>模板>成功，从而添加一个 Success Screen。
将屏幕重命名为 Success Screen。
转到“Catalog Screen”并选择您的 Form 控件。您可以从树视图面板中选择它。
在窗体的 OnSuccess 属性中，输入以下代码：

Navigate(‘Success Screen’,ScreenTransition.Fade)
现在，您已将 OnSuccess 添加到窗体中，请选择树视图面板上的 Success Screen，转到您的 success screen。
在“Success Screen”处插入一个 Timer 控件。
调整 Timer 控件的以下属性：
- AutoStart：true
- Duration：4000
- OnTimerEnd：Navigate(‘Catalog Screen’,ScreenTransition.Fade)
- Visible：false
要测试/查看 success screen 计时器的功能，请返回“Catalog Screen”并将您的应用设为预览模式。选择任意项目，并对窗体上的项目做出更改。
选择窗体底部的保存更改按钮。如果操作正确，应用将会显示“Success Screen”四秒，然后返回“Catalog Screen”，您可以在其中继续做出更改。
关闭预览模式，从树视图返回“主屏幕”。现在，我们将制作一个下拉导航菜单。
在“主屏幕”上插入一个 Dropdown 控件，并将其放置在标题矩形的左上角之下。
插入 Text label 控件并将 Text 属性更新为 Screen Navigation。将其放置在 Dropdown 控件的正上方。
选择您的 Dropdown 控件。将 Default 属性更改为：

""
不要离开 Dropdown 控件，将 Items 属性更新为：

["", "Catalog", "Admin"]

接下来，为 Dropdown 控件的 OnChange 属性输入以下公式：

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

将应用重设为预览/播放模式，然后测试 DropDown 的 OnChange 功能以导航到其他屏幕。
向“Catalog Screen”添加一个主页图标。将应用重设为编辑模式，然后选择 Catalog Screen。
选择“catalog screen”右上角的后退图标控件，使用 Ctrl+C 或通过右键单击并选择复制，将其复制下来。
粘贴所复制的后退图标 (Ctrl + V)，并将其重新放置到标题矩形的左上角。
选择所粘贴的后退图标，使用命令栏中的图标按钮并将图标更改为主页图标。
将 OnSelect 属性更改为：

Navigate('Home Screen', ScreenTransition.CoverRight)

现在，在成功保存对数据所做的更改后，就可以顺利返回“主页”了。
在 catalog screen 上，将应用置于预览模式。确保选择主页图标控件会将您转到“主屏幕”。

您已成功向应用添加一些导航功能：

Navigate 和 Back 函数的屏幕切换效果。
您使用窗体 OnSuccess 属性访问的 Success Screen。
使用 OnTimerEnd 属性返回“Catalog Screen”的 Timer 控件。
使用 OnChange 属性转到其他屏幕的 Dropdown 控件。
支持用户返回主屏幕的主页图标。

接下来，我们来完成知识检查。

继续

练习 - 应用导航练习

反馈