创建使用响应式设计的移动优化应用
在本练习中，我们将会基于 Contoso 咖啡机的数据创建一个移动优化单屏应用。 本练习的目的是让您体验使用自动布局容器构建应用，并直接向您展示响应式应用的运行方式。 我们创建了一个全新的应用，因此请前往 Power Apps 主页并按照以下步骤操作。
下载 Excel 电子表格 CoffeeMachineData.xlsx。 选择该链接，然后选择下载原始文件按钮以下载文件。 下载完成后，继续执行下一步。
转到 make.powerapps.com。 选择创建>空白应用>空白画布应用>平板电脑。 为您的应用命名，然后按创建。
请参考下面的图表，了解后续几个步骤的帮助，按照步骤顺序编号。 在命令栏中，选择设置按钮。 （您可能需要在树视图面板中选择应用才能显示它。）
在设置弹出面板中，选择显示选项卡，然后向下滚动并关闭调整为合适大小选项（此操作会将锁定纵横比自动切换为关）。
关闭设置弹出窗口。
为您的应用创建一个带有边栏布局的新屏幕。 将其命名为“Catalog Screen”。
从模板>成功中创建新屏幕。 将其命名为“Success Screen”。
删除 Screen1。
接下来，从命令栏中选择添加数据按钮。 然后找到/选择 OneDrive for Business。
在屏幕右侧的选择 Excel 文件面板下，选择您的 CoffeeMachineData.xlsx 文件，然后选择 CoffeeMachines 表。 通过选择面板底部的连接来连接表。
选择屏幕左侧名为 SidebarContainer1 的水平容器。 请参考下图了解后续几个步骤。
选择容器中的加号 (+) 图标，将垂直库插入 SidebarContainer1 中，然后选择 CoffeeMachines 作为数据源。 将 Fill 属性设置为 Color.LightSteelBlue。
接下来，我们将在“Catalog Screen”中插入一个窗体。 选择位于应用画布右侧的 MainContainer1。 选择加号 (+) 图标（或命令栏中的插入按钮）以插入编辑窗体。 在屏幕右侧的属性面板中，选择 CoffeeMachines 作为数据源。
还是在“属性”面板中，选择“数据源”下的编辑字段选项。
在字段面板中，选择添加字段并通过选中“选择字段”弹出窗口中每个字段名称旁边的框来添加所有字段。 然后选择底部的添加按钮。
关闭字段面板。
当 Form1 仍处于选中状态时，在屏幕左上角的属性下拉菜单中，选择 Item 属性，然后在公式 (fx) 字段中，输入：Gallery1.Selected
最后，还是在您的窗体上，将 Fill 属性设置为：Color.LightSteelBlue
接下来，我们添加到标题容器中。 选择 HeaderContainer 控件并使用加号 (+) 图标插入文本标签控件，并按如下方式调整下拉列表中的属性：
Text：“Contoso Coffee Catalog”
Size：从 13 更改为 20
Height：从 40 更改为 Parent.Height
Width：从 150 更改为 200
使用命令栏中的对齐按钮（位于颜色按钮的左侧；或者，您可以查找右侧属性面板中的文本对齐选项），将对齐从左对齐改为两端对齐。
接下来，在 HeaderContainer1 中插入图像控件，并按如下方式调整属性：
Image：User().Image
Height：Parent.Height
让我们通过将地球图标插入 HeaderContainer1 中来创建连接图标。 按如下方式调整属性：
Height：20
Width：20
Color：If(Connection.Connected, Color.Green, Color.LightSteelBlue)
接下来，我们将 HeaderContainer 项右对齐。 若要执行此操作，请在树视图中选择 HeaderContainer1，在右侧的“属性”面板中查找两端对齐(水平)选项。 第三个选项是结束。 选择该选项。
最后，让我们向标头容器添加一些背景颜色。 将 Fill 属性设置为 Color.LightSteelBlue
选择窗体所在的 MainContainer1。 插入具有以下属性的按钮控件：
Text：“保存”
Width：Parent.Width
OnSelect：SubmitForm(Form1)
选择 MainContainer1 内的窗体，并将 OnSuccess 属性调整为：Navigate('Success Screen')
从树视图面板中，选择 Success Screen。
选择检查图标 (iconCheck1)，并将 OnSelect 属性更新为：
Back()将应用置于预览模式。 通过选择“手机”下拉列表将显示调整为 iPhone 12。 您是否注意到控件显示是如何变化的？ 尝试一些其他平板电脑和手机的切换方向，看看屏幕如何变化。
现在，我们简单的响应式应用可以在任意平台上使用。 干得好！