前言

  我们都知道Power Apps作为低代码平台,最大的优势就是各个设备之间的兼容性,尤其是自带的响应式布局,非常好用。

  这不,我们就为大家分享一下,如何使用Power Apps画布应用,创建响应式布局。

  正文

  1.创建响应式布局之前,先要了解一个概念,就是屏幕尺寸和断点,我们看一眼下面的图片:

  Tips:这个应该不需要太多解释,我们看值和后面的描述,一看就懂,后面我们为大家介绍如何使用

  2.设置Power Apps的显示,默认如下图:

  Tips:这个要说一下,就是调整为合适页面需要关闭,允许屏幕和控件填充可用空间,这样才能做到响应式布局。

  同时,下面的锁定横纵臂会自动关掉。

  3.设置屏幕的宽度和高度,如下:

  Tips:这样的设置,是为了让页面填充满设备,不要两边留白或者上下留白。

宽度 = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
高度 = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))

  4.然后在页面上添加一个控件,标识这个页面大小,后续使用页面大小变量的时候,都是用这个控件的值,如下图:

  5.使用布局控件,会让我们操作起来,会更加简便,如下图:

  Tips:因为涉及的细节非常多,建议大家自己科普一下布局控件怎么用,可能不是一下就能明白的。

  6.布局中的注意事项,换行和灵活高度要开启(灵活高度开启以后,竖向布局控件的高度,也需要根据屏幕大小动态变化),如下图:

  7.接下来是控件的配置,首先开启灵活宽度,让控件可以自适应;然后,设置LayoutMinWidth为响应式宽,如下图:

Switch(
lb_ScreenSize.Text,
"1",
Parent.Width,
"2",
Parent.Width,
Parent.Width / 2
)

  8.最后,设置外层竖向布局控件的动态高度,上面已经提到了,如下图:

  Tips:大家看到我这里的高度是写死的,真正做项目千万不要这样,需要用行去乘以行高进行计算。

  9.演示效果:

  1)屏幕宽度为4的时候,如下图:

  2)屏幕宽度为2的时候,控件变成两行,如下图:

  结束语

  我们这里只是演示一个Demo,大家千万别以为Power Apps的布局就这么Low,其实真的配置好,还是需要很多小心思的,也是真的能做的响应式布局。

  这里的响应式布局,在PC、平板、手机端可以无缝切换,横屏竖屏无缝切换,真的很酷的~

Power Apps 创建响应式布局的更多相关文章

  1. CSS:使用CSS媒体查询创建响应式布局

    现如今在Web前端领域,BootStrap是一个最流行的UI库,其12列的栅栏系统为响应式布局提供了一种对程序员来说很好操作的模式. 追究Bootstrap的内在原理,其实就是通过媒体查询来完成对不同 ...

  2. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  3. [UWP]XAML中的响应式布局技术

    响应式布局的概念是一个页面适配多个终端及不同分辨率.在针对特定屏幕宽度优化应用 UI 时,我们将此称为创建响应式设计.WPF设计之初响应式设计的概念并不流行,那时候大部分网页设计师都按着宽度960像素 ...

  4. 一步步开发自己的博客 .NET版 剧终篇(6、响应式布局 和 自定义样式)

    前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做 ...

  5. 关于css3媒体查询和响应式布局

    响应式设计 响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同.按照可用的屏幕属性,响应式设计提供了 UI 的最佳效果. 例如,如果网站布局上有一个占据 25% 的屏幕宽度的侧边 ...

  6. 使用 CSS 媒体查询创建响应式网站

    简介 现今每天都有更多的手机和平板电脑问市.消费者能够拥有可想象到的各种规格和形状的设备,但是网站开发人员却面临一个挑战:如何使他们的网站在传统浏览器.手机和平板电脑浏览器上有很好的效果,如何在各种大 ...

  7. css3media响应式布局

    响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的 普及,用"大势所趋"来形容也不为过.随着越来越多的设计师采用这个技术,我们不仅看到很 ...

  8. 【课程分享】ASP.NET MVC5&amp;微信公众平台整合开发实战(响应式布局、JQuery Mobile,Windows Azure、微信核心开发)

    对这个课程有兴趣的,能够联系我QQ2748165793 基础知识储备 ASP.NET MVC 5基础(6讲) 第一讲-初识ASP.NET MVC并搭建整合开发环境 第二讲-深入MVC开发模式 第三讲- ...

  9. 巧用 BootStrap --- 栅格系统(布局)轻松搞定网页响应式布局!

    摘要:Bootstrap 为我们提供了一套响应式.移动设备优先的流式栅格系统,合理的使用栅格系统将会使得网站页面布局变得更加简单,在设置了媒体查询之后,响应式网站也无需再单独写了.接下来我以Boots ...

随机推荐

  1. 【LeetCode】231. Power of Two 解题报告(Java & Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 二进制 位运算 判断是不是最大2的幂的因数 判断因子 ...

  2. 【LeetCode】166. Fraction to Recurring Decimal 解题报告(Python)

    [LeetCode]166. Fraction to Recurring Decimal 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingz ...

  3. 1336 - Sigma Function

    1336 - Sigma Function   PDF (English) Statistics Forum Time Limit: 2 second(s) Memory Limit: 32 MB S ...

  4. (数据科学学习手札133)利用geopandas绘制拓扑着色地图

    本文示例代码及文件已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 我们在绘制某些地图时,为了凸显出每个独立的 ...

  5. <数据结构>关键路径

    目录 AOV网和AOE网 AOV网 AOE网 定义 与AOV网的转化 AOE网中着重解决的两个问题 1.最长路径问题 2.关键活动问题 总结 最长路径 无正环的图 有向无环图的最短路径 其他情况 关键 ...

  6. 编写Java程序,使用ThreadLocal类,项目中创建账户类 Account,类中包括账户名称name、 ThreadLocal 类的引用变量amount,表示存款

    查看本章节 查看作业目录 需求说明: 某用户共有两张银行卡,账户名称相同,但卡号和余额不同.模拟用户使用这两张银行卡进行消费的过程,并打印出消费明细 实现思路: 项目中创建账户类 Account,类中 ...

  7. Swoole 中使用通道(Channel)实现协程间通讯(消息队列)

    通道 Coroutine\Channel 使用本地内存,不同的进程之间内存是隔离的. 只能在同一进程的不同协程内进行 push 和 pop 操作. Co::set(['hook_flags'=> ...

  8. Rainbond 对接 Istio 原理讲解和代码实现分析

    一.背景 现有的 ServiceMesh 框架有很多,如 Istio.linkerd等.对于用户而言,在测试环境下,需要达到的效果是快.开箱即用.但在生产环境下,可能又有熔断.延时注入等需求.那么单一 ...

  9. SQL Server数据库出现“无法访问数据库XXX(objectExplorer)”的解决办法

    数据库版本为2008R2,服务器异常重启并重新挂载iscsi后,数据库出现"无法访问数据库XXX(objectExplorer)"问题. 输入SQL命令查看数据库状态 1 sele ...

  10. react中使用immutable

    官方文档(https://immutable-js.github.io/immutable-js/docs/#/) 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Im ...