创建使用响应式设计的移动优化应用
在本练习中，您将使用 Microsoft Power Apps 基于 Contoso Coffee Machines 中的数据创建一个移动优化的单屏应用。 此实践任务有助于更轻松地理解如何使用自动布局容器，以及观察响应式设计在设备中的行为方式。
您将从 Power Apps 主页开始操作。 请按照以下步骤操作：
下载 App in a Day 文件并提取它们。 打开名为 Machine-Order-Data.xslx 的 Excel 文件。
转到 make.powerapps.com。 选择创建>从空白画布开始>响应式。 如果显示一个欢迎弹出窗口，请选择跳过。
请参考下图以获取有关后续几个步骤的帮助。 在命令栏中，选择设置按钮。 如果该按钮未显示，请在树视图面板中选择应用以显示它。
在设置弹出面板中，选择显示选项卡，然后向下滚动以确保调整为合适大小选项切换为关。 （这会将锁定纵横比切换为关。）
关闭设置弹出窗口。
通过在“树视图”窗格中选择 + 新建屏幕来创建新屏幕。 选择新屏幕的边栏布局。 通过双击屏幕名称 (Screen2)，然后键入“Catalog Screen”来将其命名为“Catalog Screen”。
创建另一个新屏幕；对于本屏幕，请使用成功模板。 将新屏幕命名为“Success Screen”。
通过单击树视图中的屏幕，选择屏幕右侧的省略号，然后选择删除来删除 Screen1。
接下来，选择 Catalog Screen 的边栏容器。 （您需要展开多个容器层才能找到边栏容器。）通过选择 + 插入，然后选择垂直库来添加垂直库，其中已选择 SidebarContainer1。
选择数据源窗格应自动打开。 如果未打开，请从命令栏中选择添加数据按钮，并且已在“树视图”窗格中选择库控件。
然后，找到并选择 OneDrive for Business 并创建连接。 （您可以使用“搜索输入”字段缩小搜索范围。）
屏幕右侧将显示选择 Excel 文件面板。 选择 Machine-Order-Data.xlsx 文件，然后选择机器表。 通过选择面板底部的连接来连接表。 您应该会在屏幕顶部看到一条通知；您可以点击 X 以将其关闭。
您可能需要更新库中显示的数据。 如果您的库如下图所示，请按照以下步骤操作。 如果显示了正确的字段，您可以直接继续执行下面的步骤 #17。
展开库，然后选择标题字段。 在编辑栏中，将标题文本标签的“Text”属性更改为
ThisItem.'Machine Name'。接下来，选择副标题字段。 在编辑栏中，将副标题文本标签的“Text”属性更改为
ThisItem.Price。然后，选择图像字段。 在编辑栏中，将图像控件的“Image”属性更改为
ThisItem.Photo。在树视图中，选择边栏容器旁边的下拉列表以折叠其内容。
选择屏幕右侧名为 MainContainer2 的主容器。
选择加号 (+) 图标（或命令栏中的“插入”按钮）以插入编辑窗体。 选择机器表作为数据源。
在右侧的“属性”面板中，选择“数据源”下的编辑字段选项。
在字段面板中，选择添加字段，然后通过按此顺序选中每个字段名称旁边的框来添加以下字段：Photo、Machine ID、Machine Name、Color、Description、Feature, Price、Machine Type、Machine Type ID、Avg. Cups/Week 和 Avg. Espressos/Week。 然后，选择底部的添加按钮。
关闭字段面板。
请注意，字段是按照您选择的顺序插入到窗体中的。
Form1 仍处于选中状态时，在屏幕左上角的属性下拉菜单（位于“树视图”标头上方）中，选择 Item 属性，然后在公式 (fx) 字段中，输入：
Gallery1.Selected。 （如果您的库未命名为 Gallery1，请使用您的实际库名称。）最后，在窗体仍处于选中状态时，将 Fill 属性设置为：
Color.LightSteelBlue。接下来，您将添加到标头容器中。 选择 HeaderContainer2 控件（在本练习中，如果控件不同，则使用实际标头控件的名称）并使用加号 (+) 图标插入文本标签控件。 使用属性下拉菜单和编辑栏调整文本标签的属性，如下所示：
Text：“Contoso Coffee Catalog”
Size：从 13 更改为 20
Height：从 40 更改为 Parent.Height
Width：从 150 更改为 200
使用命令栏中的对齐下拉菜单（位于颜色按钮的左侧；或者，您可以查找右侧属性面板中的文本对齐选项），将对齐从左对齐更改为两端对齐。
接下来，选择文本标签外部的标头容器以取消选择文本标签控件。 将图像控件插入到 HeaderContainer2，并按如下方式调整属性：
Image：User().Image
Height：Parent.Height
您可以通过将地球图标插入 HeaderContainer2 中来创建连接图标。 按如下方式调整属性：
Height：20
Width：20
Color：
If(Connection.Connected, Color.Green, Color.LightSteelBlue)接下来，您可以将标头容器项右对齐。 若要执行此操作，请在“树视图”中选择 HeaderContainer2，并查找右侧的“属性”面板。 找到两端对齐(水平) 选项。 第三个选项是结束（将鼠标悬停在图标上可以看到该选项）。 将其选中。
最后，您可以向标头容器添加一些背景颜色。 将 Fill 属性调整为：
Color.LightSteelBlue。选择窗体所在的 MainContainer2。 插入具有以下属性的按钮控件：
Text：“保存”
Width：
Parent.WidthOnSelect：
SubmitForm(Form1)选择 MainContainer2 内的窗体，并将 OnSuccess 属性调整为：
Navigate('Success Screen')。从树视图面板中，选择 Success Screen。
选择检查图标 (iconCheck1)，然后将 OnSelect 属性更新为：
Back()进入预览模式。 通过选择“手机”下拉列表将显示调整为 iPhone 12。 观察布局如何跨设备和方向进行调整。
如果您想要使用或稍后重新访问，请保存您的应用。
您现在已经创建了一个可跨平台使用的响应式应用。