【Power Apps】响应式布局与布局容器

2024-03-14 01:36
文章标签 布局 容器 响应 power apps

本文主要是介绍【Power Apps】响应式布局与布局容器,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

做响应式布局之前要先把这里关掉呦。

这里我可能要先简单说一下什么是响应式布局,说白了就是咱们做出来的应用的界面可以根据当前窗口的大小来自适应地调整内部组件的大小、位置等属性,这样我们只需要做一套页面,就可以既在桌面端使用,也可以在各种移动端使用,不会发生由于应用界面不适应屏幕大小而出现严重的显示问题的情况。

同时,我们在做前端页面的时候最令人头疼的莫过于对前端各个组件位置的设置了,如果还要用上响应式布局,让手机端显示手机端的样式,桌面端显示桌面端的样式,那可以说是非常令人头疼了,所以现在在常规的前端开发中,也只会对不那么复杂的网页做响应式布局的效果,对复杂页面还是会单独做一个移动端页面。

而在Power Apps中,微软官方为我们提供了三种布局容器,可以直接帮我们解决布局的问题,不过我们在做响应式布局的时候主要用两种。

第一种布局容器是垂直容器,顾名思义,所有放到这种容器中的控件都将在容器中垂直排列。

第二种是水平容器,就是所有放到这种容器中的控件都将在容器中水平排列。

在这两种容器中,我们只能调整容器中控件的顺序,比如哪个控件更靠右,或者哪个控件更靠上,而无法随意改动控件的位置及其大小,毕竟这两个容器是强制把控件按横向/纵向的规则排好队的。

不过我们可以调整容器中所有控件的对齐方式和控件间的间隔

容器内的控件在开启灵活高度/宽度后,可以自动按比例调整自己在容器中的占位,垂直容器调整的就是控件在垂直方向上的占位,水平容器调整的就是控件在水平方向上的占位。

我们可以看到,这个两个子容器的父容器是个水平容器,在这两个子容器都开启灵活宽度后,我们可以设置右边的子容器占7成位置,左边的子容器占3成位置。

如果容器内的控件是一个开启灵活高度/宽度,而另一个没有开,那么没有开灵活高度/宽度的那个控件仍然是由“高度”或“宽度”属性来控制高度或宽度。

另一个开启了灵活高度/宽度的控件将自动占满余下的全部空间。

说白了就是容器会先把没有开启灵活高度/宽度的控件所占的空间减去,然后剩下的空间由开启了灵活高度/宽度的控件来按比例分。

这样使得我们的布局可以跟随窗口大小的改变而改变。

所以我们在设计Power Apps页面的时候,可以试着多采用布局容器来搭建页面,更方便且高效。

不过我们搭建响应式布局的时候,肯定还要实现一些适用于不同屏幕的布局自动变化的效果,比如可能在一个应用中,我们会把左边栏做成列表,右边栏做成展示详情和做数据修改的表单,而当我们在移动端打开应用的时候,应用将只会显示左边栏的列表,点击列表中的项后,右边栏才会显示。

这种情况下不需要我们亲自来做屏幕/页面大小的判断,微软已经给我们提供了一个属性用来获取当前屏幕大小,就是屏幕的Size属性。

我们只需要判断一下当前屏幕的Size属性,再配合一些其他变量和辅助控件,来更改指定控件的显示或隐藏,即可实现针对不同屏幕来展示不同的显示效果。

桌面端左右边栏都显示。

到手机上了,我们默认只显示左边栏,右边栏隐藏,但可以在这两个边栏之间切换。

当然,还有一些控件,如库(Gallery)和窗体(Form),可能需要单独设置一下一行中显示项目的数量随着页面大小变化而变化的效果。

我们这里以一个垂直库为例。

这种效果我们就不太好用屏幕的Size属性来搞了,毕竟这种效果需要实时地根据页面大小的改变而同步改变,所以我们需要根据库的父容器的“宽度”属性(Parent.Width)来计算出库的“整合计数”属性的值。

首先我们要确定我们库里的项,就是下图↓箭头指的那部分

确定这部分宽度的最小值,这个我们跟及项目需求和咱们对于页面的样式设计来自行决定即可,我这里觉得每一项宽度最小为315就可以了,这样的话我就可以用库的父容器的宽度值来除我这个315,然后取整,就可以得出以当前页面宽度,库中一行能放下多少个项了。

把这个值填进整合计数中即可。

---

欢迎加vx交流:vAfi_FeiFei

这篇关于【Power Apps】响应式布局与布局容器的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/806842

相关文章

SpringBoot结合Docker进行容器化处理指南

《SpringBoot结合Docker进行容器化处理指南》在当今快速发展的软件工程领域,SpringBoot和Docker已经成为现代Java开发者的必备工具,本文将深入讲解如何将一个SpringBo... 目录前言一、为什么选择 Spring Bootjavascript + docker1. 快速部署与

Spring IoC 容器的使用详解(最新整理)

《SpringIoC容器的使用详解(最新整理)》文章介绍了Spring框架中的应用分层思想与IoC容器原理,通过分层解耦业务逻辑、数据访问等模块,IoC容器利用@Component注解管理Bean... 目录1. 应用分层2. IoC 的介绍3. IoC 容器的使用3.1. bean 的存储3.2. 方法注

c++中的set容器介绍及操作大全

《c++中的set容器介绍及操作大全》:本文主要介绍c++中的set容器介绍及操作大全,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录​​一、核心特性​​️ ​​二、基本操作​​​​1. 初始化与赋值​​​​2. 增删查操作​​​​3. 遍历方

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

SpringIOC容器Bean初始化和销毁回调方式

《SpringIOC容器Bean初始化和销毁回调方式》:本文主要介绍SpringIOC容器Bean初始化和销毁回调方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录前言1.@Bean指定初始化和销毁方法2.实现接口3.使用jsR250总结前言Spring Bea

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

如何高效移除C++关联容器中的元素

《如何高效移除C++关联容器中的元素》关联容器和顺序容器有着很大不同,关联容器中的元素是按照关键字来保存和访问的,而顺序容器中的元素是按它们在容器中的位置来顺序保存和访问的,本文介绍了如何高效移除C+... 目录一、简介二、移除给定位置的元素三、移除与特定键值等价的元素四、移除满足特android定条件的元

springboot filter实现请求响应全链路拦截

《springbootfilter实现请求响应全链路拦截》这篇文章主要为大家详细介绍了SpringBoot如何结合Filter同时拦截请求和响应,从而实现​​日志采集自动化,感兴趣的小伙伴可以跟随小... 目录一、为什么你需要这个过滤器?​​​二、核心实现:一个Filter搞定双向数据流​​​​三、完整代码

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML