创建使用响应式设计的移动优化应用

已完成

在本练习中,我们将会基于 Contoso 咖啡机的数据创建一个移动优化单屏应用。 本练习的目的是让您体验使用自动布局容器构建应用,并直接向您展示响应式应用的运行方式。 我们创建了一个全新的应用,因此请前往 Power Apps 主页并按照以下步骤操作。

  1. 下载 Excel 电子表格 CoffeeMachineData.xlsx。 选择该链接,然后选择下载原始文件按钮下载文件。 下载完成后,继续执行下一步。

  2. 选择创建>空白应用>平板电脑。 为您的应用命名,然后按创建

  3. 请参考下面的图表,了解后续几个步骤的帮助,按照步骤顺序编号。 在命令栏中,选择设置按钮。 (您可能需要在树视图面板中选择应用才能显示它。)

    按照步骤 3 至 7 和 9 的顺序编号的图像。该图像显示应用设置面板以及命令栏和树视图。

  4. 设置弹出面板中,选择显示选项卡,然后向下滚动并关闭调整为合适大小选项(此操作会将锁定纵横比自动切换为)。

  5. 关闭设置弹出窗口。

  6. 为您的应用创建一个带有边栏布局的新屏幕。 将其命名为“Catalog Screen”。

  7. 模板>成功中创建新屏幕。 将其命名为“Success Screen”。

  8. 删除 Screen1

  9. 接下来,从命令栏中选择添加数据按钮。 然后找到/选择 OneDrive for Business

  10. 在屏幕右侧的选择 Excel 文件面板下,选择您的 CoffeeMachineData.xlsx 文件,然后选择 CoffeeMachines 表。 通过选择面板底部的连接来连接表。

  11. 选择屏幕左侧名为 SidebarContainer1 的水平容器。 请参考下图了解后续几个步骤。

    按照步骤 11 至 13 的顺序编号的屏幕截图。

  12. 选择容器中的加号 (+) 图标,将垂直库插入 SidebarContainer1 中,然后选择 CoffeeMachines 作为数据源。 将 Fill 属性设置为 Color.LightSteelBlue。

  13. 接下来,我们将在“Catalog Screen”中插入一个窗体。 选择位于应用画布右侧的 MainContainer1。 选择加号 (+) 图标(或命令栏中的插入按钮)以插入编辑窗体。 在屏幕右侧的属性面板中,选择 CoffeeMachines 作为数据源

  14. 还是在“属性”面板中,选择“数据源”下的编辑字段选项。

  15. 字段面板中,选择添加字段并通过选中“选择字段”弹出窗口中每个字段名称旁边的框来添加所有字段。 然后选择底部的添加按钮。

  16. 关闭字段面板。

  17. Form1 仍处于选中状态时,在屏幕左上角的属性下拉菜单中,选择 Item 属性,然后在公式 (fx) 字段中,输入:Gallery1.Selected

  18. 最后,还是在您的窗体上,将 Fill 属性设置为:Color.LightSteelBlue

  19. 接下来,我们添加到标题容器中。 选择 HeaderContainer 控件并使用加号 (+) 图标插入文本标签控件,并按如下方式调整下拉列表中的属性:

    Text:“Contoso Coffee Catalog”

    Size:将 13 改为 20

    Height:将 40 更改为 Parent.Height

    Width:将 150 改为 200

  20. 使用命令栏中的对齐按钮(位于颜色按钮的左侧;或者,您可以查找右侧属性面板中的文本对齐选项),将对齐从左对齐改为两端对齐

  21. 接下来,在 HeaderContainer1 中插入图像控件,并按如下方式调整属性:

    Image:User().Image

    Height:Parent.Height

  22. 让我们通过将地球图标插入 HeaderContainer1 中来创建连接图标。 按如下方式调整属性:

    Height:20

    Width:20

    Color:If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  23. 接下来,我们来将 HeaderContainer 项右对齐。 若要执行此操作,请在右侧的“属性”面板中查找两端对齐(水平)选项。 第三个选项是结束。 选择该选项。

  24. 最后,让我们向标头容器添加一些背景颜色。 将 Fill 属性设置为 Color.LightSteelBlue

  25. 选择窗体所在的 MainContainer1。 插入具有以下属性的按钮控件:

    Text:“保存”

    Width:Parent.Width

    OnSelect:SubmitForm(Form1)

  26. 选择 MainContainer1 内的窗体,并将 OnSuccess 属性调整为:Navigate(Screen3)

  27. 树视图面板中,选择 Success Screen

  28. 选择检查图标 (iconCheck1),并将 OnSelect 属性更新为:

    Back()

  29. 将应用置于预览模式。 通过选择“手机”下拉列表将显示调整为 iPhone 12。 您是否注意到控件显示是如何变化的? 尝试一些其他平板电脑和手机的切换方向,看看屏幕如何变化。

现在,我们简单的响应式应用可以在任意平台上使用。 干得好!