Crear disposicions dinàmiques en aplicacions de llenç
Abans de crear una aplicació del llenç al Power Apps, especifiqueu si voleu adaptar l'aplicació per a un telèfon o una tauleta. Aquesta opció determina la mida i la forma del llenç en el qual crearem l'aplicació.
Després de fer aquesta elecció, podeu fer algunes eleccions més si seleccioneu Configuració > Pantalla. Podeu triar una orientació vertical o horitzontal i la mida de la pantalla (només de tauleta). També podeu bloquejar o desbloquejar la relació d'aspecte i admetre la rotació dels dispositius (o no).
Aquestes opcions són la base de cada altra elecció que feu quan dissenyeu disposicions de pantalla. Si l'aplicació s'executa en un dispositiu d'una altra mida o al web, tota la disposició s'ajusta a la pantalla on s'està executant l'aplicació. Si una aplicació dissenyada per a un telèfon s'executa en una finestra del navegador gran, per exemple, l'aplicació canvia de mida per compensar i es veu de grans dimensions per a l'espai. L'aplicació no pot aprofitar els píxels addicionals mostrant més controls o més contingut.
Si creeu un disseny dinàmic, els controls poden respondre a diferents dispositius o mides de finestra i fer que diverses experiències semblin més naturals. Per aconseguir un disseny dinàmic, ajusteu algunes opcions de configuració i escriviu expressions per a tota l'aplicació.
Desactivar Ajusta a la mida
Podeu configurar cada pantalla de manera que la seva disposició s'adapti a l'espai real en el qual l'aplicació s'executa.
Per activar la capacitat de resposta, desactiveu la configuració Ajusta a la mida de l'aplicació, que està activada per defecte. Quan desactiveu aquest paràmetre, també desactiveu Bloca la relació d'aspecte perquè ja no esteu dissenyant per a una forma de pantalla específica. (Encara podeu especificar si l'aplicació admet la rotació dels dispositius.)
Per fer que la vostra aplicació sigui dinàmica, heu d'adoptar passos addicionals, però aquest canvi és el primer per fer possible el dinamisme.
Entendre les dimensions de l'aplicació i de la pantalla
Per tal que les disposicions de l'aplicació responguin als canvis a la pantalla, escriureu fórmules que utilitzen les propietats Width i Height de la pantalla. Per mostrar aquestes propietats, obriu una aplicació al Power Apps Studio i, a continuació, seleccioneu una pantalla. Les fórmules per defecte d'aquestes propietats es mostren a la pestanya Avançat de la subfinestra de la dreta.
Amplada = Max(App.Width, App.DesignWidth)
Alçada = Max(App.Height, App.DesignHeight)
Aquestes fórmules fan referència a les propietats Width, Height, DesignWidth i DesignHeight de l'aplicació. Les propietats Width i Height de l'aplicació corresponen a les dimensions del dispositiu o de la finestra del navegador en què s'executa l'aplicació. Si l'usuari canvia la mida de la finestra del navegador (o es gira el dispositiu si s'ha desactivat Bloca l'orientació), els valors d'aquestes propietats canvien dinàmicament. Les fórmules de les propietats Width i Height de la pantalla es tornen a avaluar quan aquests valors canvien.
Les propietats DesignWidth i DesignHeight provenen de les dimensions que indiqueu a la subfinestra Pantalla a Configuració. Per exemple, si seleccioneu la disposició del telèfon a l'orientació vertical, DesignWidth és 640 i DesignHeight és 1136.
Com que s'utilitzen a les fórmules per a les propietats Width i Height de la pantalla, podeu pensar en DesignWidth i DesignHeight com a dimensions mínimes per a les quals dissenyareu l'aplicació. Si l'àrea real disponible per a l'aplicació és encara més petita que aquestes dimensions mínimes, les fórmules per a les propietats Width i Height de la pantalla asseguren que els seus valors no es facin més petits que els mínims. En aquest cas, l'usuari s'ha de desplaçar per visualitzar tots els continguts de la pantalla.
Després d'establir DesignWidth i DesignHeight de l'aplicació, no haureu de canviar (en la majoria de casos) les fórmules per defecte per a les propietats Width i Height de cada pantalla. Més endavant, en aquest tema es discuteixen els casos en què podríeu voler personalitzar aquestes fórmules.
Utilitzar fórmules per a la disposició dinàmica
Per crear un disseny dinàmic, localitzeu i dimensioneu cada control mitjançant fórmules en comptes de valors de coordenades absoluts (constants). Aquestes fórmules expressen la posició i la mida de cada control en termes de la mida de pantalla general o en relació amb altres controls a la pantalla.
Important
Després d'escriure fórmules per a les propietats X, Y, Width i Height d'un control, les fórmules se sobreescriuran amb valors constants si posteriorment arrossegueu el control a l'editor del llenç. Quan comenceu a utilitzar fórmules per aconseguir una disposició dinàmica, haureu d'evitar l'arrossegament dels controls.
En el cas més senzill, un control omple una pantalla sencera. Per crear aquest efecte, definiu les propietats del control en aquests valors:
| Propietat | Valor |
|---|---|
| X | 0 |
| Y | 0 |
| Amplada | Parent.Width |
| Alçada | Parent.Height |
Aquestes fórmules utilitzen l'operador Parent. Per a un control col·locat directament en una pantalla, Parent es refereix a la pantalla. Amb aquests valors de propietat, el control apareix a la cantonada superior esquerra de la pantalla (0, 0) i té les mateixes propietats Width i Height que la pantalla.
Més endavant, en aquest tema, aplicareu aquests principis (i l'operador Principal) per posicionar els controls dins d'altres contenidors, com ara galeries, controls de grup i components.
Com a alternativa, el control només pot emplenar la meitat superior de la pantalla. Per crear aquest efecte, definiu la propietat Height a Parent.Height /2 i deixeu sense canvis les altres fórmules.
Si voleu que un segon control ompli la meitat inferior de la mateixa pantalla, podeu seguir com a mínim altres dos enfocaments per crear-ne les fórmules. Per simplificar, podeu dur a terme aquest enfocament:
| Control | Propietat | Fórmula |
|---|---|---|
| Superior | X | 0 |
| Superior | Y | 0 |
| Superior | Amplada | Parent.Width |
| Superior | Alçada | Parent.Height / 2 |
| Inferior | X | 0 |
| Inferior | Y | Parent.Height / 2 |
| Inferior | Amplària | Parent.Width |
| Inferior | Alçada | Parent.Height / 2 |
Aquesta configuració assoliria l'efecte que voleu, però caldria editar cada fórmula si heu canviat d'opinió sobre les mides relatives dels controls. Per exemple, pot ser que decidiu que el primer control només hauria d'ocupar la part superior del terç de la pantalla i que el control inferior ompli els dos terços inferiors.
Per crear aquest efecte, haureu d'actualitzar la propietat Height del control Superior i les propietats Y i Height del control Inferior. En lloc d'això, considereu la possibilitat d'escriure les fórmules per al control Inferior en termes del control Superior (i en si mateix), com en aquest exemple:
| Control | Propietat | Fórmula |
|---|---|---|
| Superior | X | 0 |
| Superior | Y | 0 |
| Superior | Amplada | Parent.Width |
| Superior | Alçada | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Y | Upper.Y + Upper.Height |
| Lower | Amplària | Parent.Width |
| Inferior | Alçada | Parent.Height - Lower.Y |
Amb aquestes fórmules al seu lloc, només heu de canviar la propietat Height del control Superior per expressar una fracció diferent de l'alçada de la pantalla. El control Inferior es mou i canvia de mida automàticament per tenir en compte el canvi.
Podeu utilitzar aquests patrons de fórmules per expressar relacions de disposició habituals entre un control, amb el nom C, i el seu control principal o secundari, anomenat D.
| Relació entre C i el seu element principal | Propietat | Fórmula | Il·lustració |
|---|---|---|---|
| C emplena l'amplada de l'element principal, amb un marge N | X | N |
 |
| Amplària | Parent.Width - (N * 2) |
||
| C emplena l'alçada de l'element principal, amb un marge N | Y | N |
 |
| Alçada | Parent.Height - (N * 2) |
||
| C alineat amb la vora dreta de l'element principal, amb un marge N | X | Parent.Width - (C.Width + N) |
 |
| C alineat amb la vora inferior de l'element principal, amb un marge N | Y | Parent.Height - (C.Height + N) |
 |
| C centrat horitzontalment en un element principal | X | (Parent.Width - C.Width) / 2 |
 |
| C centrat verticalment en un element principal | Y | (Parent.Height - C.Height) / 2 |
 |
| Relació entre C i D | Propietat | Fórmula | Il·lustració |
|---|---|---|---|
| C alineat horitzontalment amb D i la mateixa amplada que D | X | D.X |
 |
| Amplària | D.Width |
||
| C alineat verticalment amb D i la mateixa alçada que D | Y | D.Y |
 |
| Alçada | D.Height |
||
| La vora dreta de C alineada amb la vora dreta de D | X | D.X + D.Width - C.Width |
 |
| La vora inferior de C alineada amb la vora inferior de D | Y | D.Y + D.Height - C.Height |
 |
| C centrat horitzontalment en relació amb D | X | D.X + (D.Width - C.Width) / 2 |
 |
| C centrat verticalment en relació amb D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C col·locat a la dreta de D amb una espai N | X | D.X + D.Width + N |
 |
| C col·locat a sota de D amb una espai N | Y | D.Y + D.Height + N |
 |
| C omple l'espai entre D i la vora dreta de l'element principal | X | D.X + D.Width |
 |
| Amplària | Parent.Width - C.X |
||
| C omple l'espai entre D i la vora inferior de l'element principal | Y | D.Y + D.Height |
 |
| Alçada | Parent.Height - C.Y |
Disposició jeràrquica
A mesura que creeu pantalles que contenen més controls, esdevindrà més fàcil (o fins i tot necessari) col·locar controls relatius a un control principal, en comptes de en relació amb la pantalla o un control secundari. Si organitzeu els vostres controls en una estructura jeràrquica, podeu fer que les fórmules siguin més fàcils d'escriure i mantenir.
Galeries
Si utilitzeu una galeria a l'aplicació, haureu de configurar els controls dins de la plantilla de la galeria. Podeu posicionar aquests controls escrivint fórmules que utilitzin l'operador Parent, que es referirà a la plantilla de galeria. A les fórmules dels controls d'una plantilla de galeria, utilitzeu les propietats Parent.TemplateHeight i Parent.TemplateWidth; no utilitzeu Parent.Width i Parent.Height, que es refereixen a la mida general de la galeria.
Control de contenidor
Podeu utilitzar el control de contenidor de disposició com a control principal.
Considereu l'exemple d'una capçalera a la part superior d'una pantalla. És habitual tenir una capçalera amb un títol i diverses icones amb les quals els usuaris puguin interactuar. Podeu crear una capçalera mitjançant el control Contenidor, que contingui un control Etiqueta i dos controls Icona:
Definiu les propietats d'aquests controls a aquests valors:
| Propietat | Capçalera | Menú | Tanca | Càrrec |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Amplada | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Alçada | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Per al control Capçalera, Parent es refereix a la pantalla. Per als altres, Parent es refereix al control Capçalera.
Després d'haver escrit aquestes fórmules, podeu ajustar la mida o la posició del control Capçalera canviant les fórmules per a les seves propietats. Les mides i les posicions dels controls secundaris s'ajustaran automàticament en conseqüència.
Controls de contenidor per a la disposició automàtica
Podeu utilitzar una característica, els controls de contenidor de disposició automàtica per dissenyar automàticament els components secundaris. Aquests contenidors determinen la posició dels components secundaris per tal que no hàgiu de definir X, Y per a un component dins del contenidor. Al mateix temps, distribueixen l'espai disponible als seus components secundaris basant-se en la configuració i determinen l'alineació vertical i horitzontal dels components secundaris. Més informació: Controls de contenidor de disposició automàtica
Components
Si utilitzeu una altra funció, anomenada Components, podeu crear blocs de creació i reutilitzar-los a tota l'aplicació. Igual que amb el control Contenidor, els controls que col·loqueu dins d'un component han de basar les fórmules de posició i mida en Parent.Width i Parent.Height, que es refereixen a la mida del component. Més informació: Crear un component.
Adaptar la disposició per a la mida del dispositiu i l'orientació
Fins al moment, heu après a utilitzar fórmules per canviar la mida d'un control en resposta a l'espai disponible, mantenint els controls alineats entre si. Però pot ser que us interessi o hàgiu de fer canvis de disseny més substancials en resposta a diferents mides i orientacions de dispositius. Quan un dispositiu es gira de l'orientació vertical a horitzontal, per exemple, pot ser que us interessi canviar d'una disposició vertical a una d'horitzontal. En un dispositiu més gran, podeu presentar més contingut o reorganitzar-lo per proporcionar un disseny més atractiu. En un dispositiu més petit, pot ser que hàgiu de separar el contingut de diverses pantalles.
Orientació del dispositiu
Les fórmules per defecte de les propietats Width i Height d'una pantalla, com aquest tema ha descrit abans, no proporcionaran necessàriament una bona experiència si un usuari fa girar un dispositiu. Per exemple, una aplicació dissenyada per a un telèfon en orientació vertical té un DesignWidth de 640 i un DesignHeight de 1136. La mateixa aplicació en un telèfon amb orientació horitzontal tindrà aquests valors de propietat:
- La propietat Width de la pantalla està definida a
Max(App.Width, App.DesignWidth). La propietat Width de l'aplicació (1136) és més gran que DesignWidth (640), de manera que la fórmula avalua 1136. - La propietat Height de la pantalla està definida a
Max(App.Height, App.DesignHeight). La propietat Height de l'aplicació (640) és més petita que DesignHeight (1136), de manera que la fórmula avalua 1136.
Amb una propietat Height de la pantalla de 1136 i una alçada de dispositiu (en aquesta orientació) de 640, l'usuari ha de desplaçar la pantalla verticalment per mostrar tots els seus continguts, que podria no ser l'experiència que voleu.
Per adaptar les propietats Width i Height de la pantalla a l'orientació del dispositiu, podeu utilitzar aquestes fórmules:
Amplada = Max(App.Width, If(App.Width < App.Height, App.DesignWidth, App.DesignHeight))
Alçada = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Aquestes fórmules canvien els valors DesignWidth i DesignHeight de l'aplicació, en funció de si l'amplada de l'aparell és menor que la seva alçada (orientació vertical) o més que l'alçada (orientació horitzontal).
Després d'ajustar les fórmules Width i Height de la pantalla, pot ser que també vulgueu reorganitzar els controls de la pantalla per utilitzar millor l'espai disponible. Per exemple, si cadascun dels dos controls ocupa la meitat de la pantalla, podeu apilar-los verticalment però ordenar-los un al costat de l'altre horitzontalment.
Podeu utilitzar la propietat Orientation de la pantalla per determinar si la pantalla s'orienta verticalment o horitzontalment.
Nota
En l'orientació horitzontal, els controls Superior i Inferior apareixen com a controls de l'esquerra i la dreta.
| Control | Propietat | Fórmula |
|---|---|---|
| Superior | X | 0 |
| Superior | Y | 0 |
| Superior | Amplada | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Superior | Alçada | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Lower | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Lower | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Lower | Amplària | Parent.Width - Lower.X |
| Inferior | Alçada | Parent.Height - Lower.Y |
Mides de pantalla i punts d'interrupció
Podeu ajustar la disposició en funció de la mida del dispositiu. La propietat Size de la pantalla classifica la mida de dispositiu actual. La mida és un nombre enter positiu; el tipus de ScreenSize proporciona constants amb nom per ajudar-vos a facilitar la lectura. En aquesta taula es presenten les constants:
| Constant | Valor | Tipus de dispositiu típic (mitjançant la configuració de l'aplicació per defecte) |
|---|---|---|
| ScreenSize.Small | 1 | Telèfon |
| ScreenSize.Medium | 2 | Tauleta, sostinguda verticalment |
| ScreenSize.Large | 3 | Tauleta, sostinguda horitzontalment |
| ScreenSize.ExtraLarge | 4 | Ordinador de sobretaula |
Utilitzeu aquestes mides per prendre decisions sobre la disposició de l'aplicació. Per exemple, si voleu que un control s'amagui en un dispositiu de mida de telèfon però sigui visible altrament, podeu definir la propietat Visible d'un control a aquesta fórmula:
Parent.Size >= ScreenSize.Medium
Aquesta fórmula s'avalua com a certa quan la mida és mitjana o gran i falsa en cas contrari.
Si voleu que un control ocupi una fracció diferent de l'amplada de la pantalla segons la mida de la pantalla, definiu la propietat Width del control en aquesta fórmula:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Aquesta fórmula defineix l'amplada de control a la meitat de l'amplada de la pantalla en una petita pantalla, tres desenes parts de l'amplada de la pantalla en una pantalla mitjana, i un quart de l'amplada de la pantalla a totes les altres pantalles.
Punts d'interrupció personalitzats
La propietat Size de la pantalla es calcula comparant la propietat Width de la pantalla als valors de la propietat SizeBreakpoints de l'aplicació. Aquesta propietat és una taula d'una sola columna de números que indiquen els punts d'interrupció de l'amplada que separen les mides de pantalla amb nom:
En una aplicació creada per a una tauleta o el web, el valor per defecte de la propietat SizeBreakpoints de l'aplicació és [600, 900, 1200]. En una aplicació creada per a telèfons, el valor és [1200, 1800, 2400]. (Els valors de les aplicacions de telèfon es doblen perquè aquestes aplicacions utilitzen coordenades que són efectivament el doble de les coordenades utilitzades en altres aplicacions.)
Podeu personalitzar els punts d'interrupció de l'aplicació canviant els valors de la propietat SizeBreakpoints de l'aplicació. Seleccioneu Aplicació a la visualització d'arbre, seleccioneu SizeBreakpoints a la llista de propietats i, a continuació, editeu els valors a la barra de fórmules. Podeu crear tants punts d'interrupció com necessiteu a l'aplicació, però només les mides 1 a 4 corresponen a mides de pantalla amb nom. A les fórmules, podeu referir-vos a mides més enllà d'ExtraLarge pels seus valors numèrics (5, 6 i així successivament).
També podeu especificar menys punts d'interrupció. Per exemple, pot ser que la vostra aplicació només necessiti tres mides (dos punts d'interrupció), per la qual cosa les possibles mides de pantalla seran Small, Medium i Large.
Limitacions conegudes
El llenç de creació no respon a les fórmules de mida creades. Per provar el comportament dinàmic, deseu i publiqueu l'aplicació i, a continuació, obriu-la en dispositius o finestres del navegador de diverses mides i orientacions.
Si escriviu expressions o fórmules a les propietats X, Y, Width i Height d'un control, se sobreescriuran aquestes expressions o fórmules si arrossegueu més endavant el control a una ubicació diferent o canvieu la mida del control arrossegant-ne la vora.
Nota
Ens podeu dir quines són les vostres preferències d'idioma per a la documentació? Responeu una breu enquesta. (tingueu en compte que l'idioma de l'enquesta és l'anglès)
Trigareu uns set minuts a completar l'enquesta. No es recopilen dades personals (declaració de privadesa).