随屏幕尺寸的变化拉伸或调整大小。

随屏幕尺寸的变化保持或改变位置。

为何要构建响应式应用

最终用户可以从不同的设备（如具有大显示器、不同屏幕尺寸和变化像素的手机、平板电脑、笔记本电脑和台式机）访问您的应用。

为了确保应用在每种外形规格和设备上都能够提供出色的用户体验和可用性，使用响应式设计原则设计应用是必不可少的。 即使打算仅在 Web 浏览器或移动电话上使用应用，用户设备的屏幕尺寸也可能不同，因此，使用响应原则设计应用是一个好主意。

使用响应原则设计应用

在开始为您的应用设计 UI 之前，您需要考虑以下几个方面：

您想要支持哪些外形规格或设备。

应用在每种外形规格中的外观如何？

应用的哪些元素需要拉伸或调整大小？

元素是否在某些外形规格中隐藏？

应用在某些外形规格中是否有不同的行为？

收集了所有这些要求之后，您应该开始考虑如何使用 Power Apps 中提供的响应工具在单个应用程序中创建这些不同的 UI 布局。

在开始使用响应式布局之前，您需要执行以下操作：

转至 Power Apps 。

打开要使用响应式布局的应用。

转到 设置 > 显示 以禁用 调整为合适大小 、 锁定纵横比 和 锁定方向 并选择 应用 。

响应式布局

以下响应式布局可以通过添加新屏幕，然后从 布局 选项卡选择适当的选项来创建：

分屏布局有两个部分，在台式机上每个部分占据屏幕宽度的 50%。 在移动设备上，两个部分彼此上下放置，每个部分占据整个屏幕宽度。

边栏布局在左侧有一个固定宽度边栏。 主体由固定高度标头组成，主要部分占据屏幕的其余宽度。 默认情况下，模板在移动设备上具有相同的行为，但是建议根据移动体验所需的 UI 模式进行一些自定义。

容器是所有响应式设计的构建基块。 容器可以是垂直或水平方向的 自动布局容器 ，也可以是固定布局容器，将来会支持约束。

以下是使用容器构建应用 UI 的一些提示：

始终在容器内创建构成 UI 表的 UI 元素。

允许容器具有自己的响应属性和设置，以指定如何在不同的屏幕尺寸上放置或调整大小。

允许您更改其子组件与响应能力有关的布局方式。

为容器选择两种布局模式之一：手动布局或自动布局（水平或垂直）

自动布局容器

两个控件 水平容器 和 垂直容器 可以用来自动安排子组件。 这些容器确定子组件的位置，让您永远不必为容器内的组件设置 X、Y。 而且，它可以根据设置将可用空间分配给其子组件，并确定子组件的垂直和水平对齐方式。

何时使用自动布局容器

您可以在以下情况下使用自动布局容器：

使用 平板电脑 布局创建 空白画布应用 。

选择 设置 > 显示 ，禁用 调整为合适大小 、 锁定纵横比 和 锁定方向 并选择 应用 。

现在从左边栏中的 插入 窗格，在 布局 选项卡下，选择 水平容器 。

要在内容之间划分屏幕，在两个子容器上使用 Fill portions 属性。 左侧容器将占据屏幕空间的 1/4。

选择 Container2 。 在编辑栏中设置 Fill = RGBA(56, 96, 178, 1) 属性。 将 Align (horizontal) 设置为 Stretch 。

添加几个按钮来创建菜单。 根据需要重命名按钮。

选择 Container3 ，添加水平容器并关闭 Flexible height 属性。 将 Height 设置为 100。 将 Align (vertical) 设置为 Stretch 。

向 Container4 中添加一些 图标 。 将图标更改为与图标属性不同。

选择 Container4 。 将 Justify (horizontal) 属性设置为 End 。 将 Align (vertical) 设置为 Center 。 将 Gap 设置为 40，创建图标之间的间距。

选择 Container3 。 将 Align (horizontal) 设置为 Stretch 。 将 Vertical Overflow 设置为 Scroll 。

添加不同的 标签 、 输入 、 媒体 ，直到它们超出容器。 将矩形颜色更改为不同的颜色。 您会看到一个用于访问未显示内容的滚动条。

您无法在画布应用上调整控件的大小或重新定位，因为拖放控件在布局容器中已禁用。 而应使用布局容器属性来实现所需的大小和定位。 控件顺序可以通过 树视图 或使用箭头键作为快捷方式来更改。

布局容器中当前不支持 数据表 、 图表 和 添加图片 控件。

某些布局容器属性对子控件是隐藏的。 隐藏的属性仍可通过编辑栏或从高级面板访问。 但是，这些属性将被忽略，即使它们已在这些位置设置。

将控件移到布局容器中时（例如，在复制或粘贴控件时），它们会按照在 树视图 中的顺序插入到容器中。

创建响应式布局

您能告诉我们您的文档语言首选项吗？ 进行简短调查。 （请注意，此调查是英文版调查）

此调查大约需要七分钟。 不会收集个人数据（ 隐私声明 ）。

提交和查看相关反馈