使用容器实现响应式设计

Power Apps 入门

Luise Freese

Azure & Power Platform Architect

为何要响应式？

 

  • 同一应用在 手机、平板、笔记本 上打开
  • 固定布局在小屏会被裁切，大屏上显得空荡
  • 响应式 = 布局会自适应

$$

手机、平板和笔记本上同一应用从单列到多列自适应的效果。

Power Apps 入门

现代布局容器

示意图比较垂直与水平布局容器：前者子控件堆叠，后者并排。

 

  • 垂直布局容器，子项自上而下堆叠
  • 水平布局容器，子项自左向右排布
  • 现代控件会按可用空间流动
Power Apps 入门

可变宽高

 

  • FlexibleWidth 与 FlexibleHeight
  • 开时，控件拉伸以填满容器
  • 关时，控件保持固定尺寸

$$

Gallery1.FlexibleHeight = true    // stretches with screen
Gallery1.FlexibleWidth  = false   // stays at fixed reading width
Power Apps 入门

LayoutMinWidth 与 LayoutMinHeight

手机与平板示意，`LayoutMinWidth` 作为从单列切换到侧栏+内容的断点。

 

  • 容器需要足够空间才能正确排版
  • LayoutMinWidth = 重新排布前的最小宽度
  • 可为手机和平板触发不同布局
Power Apps 入门

应用显示设置

 

  • Settings → Display 设置方向与尺寸
  • App layout：Fixed 固定比例缩放，Responsive 随屏幕自适应
  • 请在多种尺寸下测试

$$

Power Apps Studio 的 Settings 对话框 Display 选项卡，展示布局、方向与画布大小。

Power Apps 入门

预设布局

Power Apps Studio 新建屏幕弹出面板实图，展示预设布局模板：Blank、Split screen、Sidebar、Header and footer、Approval request、Welcome screen，并附小预览。

 

  • + New screen 提供预构建布局模板
  • Sidebar、Header and footer、Split screen，已内置响应式
  • 构建首个响应式应用的推荐起点
Power Apps 入门

您将构建什么

$$

将控件包裹在布局容器中 · 切换设备尺寸 · 观察应用如何响应

应用在手机、平板、笔记本上的示意，图库布局随屏幕尺寸而自适应。

Power Apps 入门

让我们一起练习吧！

Power Apps 入门

Preparing Video For Download...