Nota
L'accés a aquesta pàgina requereix autorització. Podeu provar d'iniciar la sessió o de canviar els directoris.
L'accés a aquesta pàgina requereix autorització. Podeu provar de canviar els directoris.
Abans de crear una aplicació canvas a Power Apps, especifica si vols adaptar l'aplicació per a un telèfon o una tauleta. Aquesta elecció determina la mida i la forma del llenç sobre el qual construeixes la teva aplicació.
Després de fer aquesta elecció, podeu fer algunes opcions més si seleccioneu Configuració>de visualització. 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 responsiu, ajustes algunes configuracions i escrius expressions a tota l'aplicació.
Desactivar Ajusta a la mida
Pots configurar cada control de pantalla perquè la seva disposició s'adapti a l'espai real on s'executa l'aplicació.
Per activar la capacitat de resposta, desactiveu la configuració Escala per ajustar-se de l'aplicació , que està activada per omissió. Quan desactives aquesta configuració, també desactives Bloquejar la relació d'aspecte perquè ja no estàs 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.
Entén les dimensions de la pantalla de l'aplicació i del dispositiu
Per fer que els dissenys de la teva aplicació responguin als canvis en les dimensions de la pantalla del dispositiu o del navegador web, escriuràs fórmules que utilitzin les propietats d'Amplada i Alçada de la pantalla. Per mostrar aquestes propietats, obre una aplicació a Power Apps Studio i després selecciona un control de pantalla. Les fórmules per defecte d'aquestes propietats apareixen a la pestanya Avançat de la subfinestra dreta.
Amplada = Max(App.Width, App.MinScreenWidth)
Altura = Max(App.Height, App.MinScreenHeight)
Aquestes fórmules fan referència a les propietats d'Amplada, Alçada, Amplada de Pantalla Mínima i AlçadaPantalla Mínima de l'aplicació. Les propietats Width i Height de l'aplicació corresponen a les dimensions de la finestra del dispositiu o del navegador en què s'executa l'aplicació. Si l'usuari canvia la mida de la finestra del navegador (o gira el dispositiu si heu desactivat l'orientació de bloqueig), els valors d'aquestes propietats canvien dinàmicament. Les fórmules de les propietats d'amplada i alçada del control de pantalla es reavaluen quan aquests valors canvien.
Els valors de les propietats App.Width i App.Height provenen de les dimensions que especifiques al panell de Visualització de Configuració. Per exemple, si selecciones la mida horitzontal "16:9 per defecte", App.Width és 1366, i App.Height és 768.
Com que s'utilitzen en les fórmules de les propietats d'amplada i alçada del control de pantalla, MinScreenWidth i MinScreenHeight són les dimensions mínimes per a les quals dissenyaràs l'aplicació. Si l'àrea real disponible per a la teva aplicació és encara més petita que aquestes dimensions mínimes, les fórmules per a les propietats d'Amplada i Alçada del control de pantalla asseguren que els seus valors no siguin més petits que els mínims. En aquest cas, l'usuari ha de desplaçar-se per veure tot el contingut del disseny. Les propietats MinScreenWidth i MinScreenHeight es poden configurar a lesPropietats>Avançades de l'Objecte> de l'Aplicació.
Després d'establir MinScreenWidth i MinScreenHeight de la teva aplicació, no caldrà (en la majoria de casos) canviar les fórmules per defecte per a les propietats d'Amplada i Alçada de cada control de 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 total de la pantalla o en relació amb altres controls de la pantalla actual.
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 arrossegueu posteriorment el control a l'editor de 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 |
| Altura | Parent.Height |
Aquestes fórmules utilitzen l'operador Parent . Per a qualsevol control col·locat directament en una pantalla, Pare fa referència a la pantalla. Amb aquests valors de propietat, el control apareix a la cantonada superior esquerra de la pantalla (0, 0) i té la mateixa amplada i alçada que la pantalla.
Més endavant en aquest tema, aplicareu aquests principis (i l'operador Parent ) als controls de posició 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 les altres fórmules sense canvis.
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 | Altura | Parent.Height / 2 |
| Abaixar | X | 0 |
| Abaixar | Y | Parent.Height / 2 |
| Abaixar | Amplada | Parent.Width |
| Abaixar | Altura | 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 Upper i les propietats Y i Height del control Lower . En lloc d'això, considereu escriure les fórmules per al control Lower en termes del control Upper (i ell mateix), com en aquest exemple:
| Control | Propietat | Fórmula |
|---|---|---|
| Superior | X | 0 |
| Superior | Y | 0 |
| Superior | Amplada | Parent.Width |
| Superior | Altura | Parent.Height / 3 |
| Abaixar | X | 0 |
| Abaixar | Y | Upper.Y + Upper.Height |
| Abaixar | Amplada | Parent.Width |
| Abaixar | Altura | Parent.Height - Lower.Y |
Amb aquestes fórmules al seu lloc, només cal canviar la propietat Height del control Upper 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ó comunes entre un control, anomenat C, i el seu control principal o germà, anomenat D.
| Relació entre C i el seu element principal | Propietat | Fórmula | Il·lustració |
|---|---|---|---|
| C omple l'amplada del pare, amb un marge de N | X | N |
|
| Amplada | Parent.Width - (N * 2) |
||
| C omple l'alçada del pare, amb un marge de N | Y | N |
|
| Altura | Parent.Height - (N * 2) |
||
| C alineat amb la vora dreta del pare, amb un marge de N | X | Parent.Width - (C.Width + N) |
|
| C alineat amb la vora inferior del pare, amb un marge de N | Y | Parent.Height - (C.Height + N) |
|
| C centrat horitzontalment sobre el pare | X | (Parent.Width - C.Width) / 2 |
|
| C centrat verticalment sobre el pare | Y | (Parent.Height - C.Height) / 2 |
|
| Relació entre C i D | Propietat | Fórmula | Il·lustració |
|---|---|---|---|
| C alineat horitzontalment amb D i de la mateixa amplada que D | X | D.X |
|
| Amplada | D.Width |
||
| C alineada verticalment amb D i la mateixa alçada que D | Y | D.Y |
|
| Altura | D.Height |
||
| Vora dreta de C alineada amb la vora dreta de D | X | D.X + D.Width - C.Width |
|
| Vora inferior de C alineada amb la vora inferior de D | Y | D.Y + D.Height - C.Height |
|
| C centrat horitzontalment respecte a D | X | D.X + (D.Width - C.Width) / 2 |
|
| C centrat verticalment respecte a D | Y | D.Y + (D.Height - C.Height) /2 |
|
| C posicionat a la dreta de D amb un espai de N | X | D.X + D.Width + N |
|
| C col·locat per sota D amb un espai de N | Y | D.Y + D.Height + N |
|
| C omple l'espai entre D i la vora dreta del pare | X | D.X + D.Width |
|
| Amplada | Parent.Width - C.X |
||
| C omple l'espai entre D i la vora inferior del pare | Y | D.Y + D.Height |
|
| Altura | 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 farà referència a la plantilla de la galeria. A les fórmules dels controls dins d'una plantilla de galeria, feu servir les propietats Parent.TemplateHeight i Parent.TemplateWidth ; no feu servir Parent.Width i Parent.Height, que fan referència a la mida general de la galeria.
Control de contenidor
Podeu utilitzar el control contenidor Layout 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 construir aquesta capçalera mitjançant el control Contenidor , que conté un control Label i dos controls Icon :
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 |
| Altura | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Per al control de 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 de 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 fan referència 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 per a les propietats Width i Height d'una pantalla, com s'ha descrit anteriorment en aquest tema, no proporcionaran necessàriament una bona experiència si un usuari gira un dispositiu. Per exemple, una aplicació dissenyada per a un telèfon en orientació vertical té un DesignWidth de 640 i unDesignHeight 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 en
Max(App.Width, App.DesignWidth). L'amplada (1136) de l'aplicació és més gran que la seva amplada de disseny (640), de manera que la fórmula s'avalua com a 1136. - La propietat Height de la pantalla està definida en
Max(App.Height, App.DesignHeight). L'alçada (640) de l'aplicació és més petita que la seva alçada designa (1136), de manera que la fórmula s'avalua com a 1136.
Amb una alçada de pantalla de 1136 i una alçada del dispositiu (en aquesta orientació) de 640, l'usuari ha de desplaçar-se per la pantalla verticalment per mostrar tot el seu contingut, que pot no ser l'experiència que voleu.
Per adaptar les propietats Amplada i Alçada 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))
Altura = Max(App.Height, If(App.Width < App.Height, App.DesignHeight, App.DesignWidth))
Aquestes fórmules intercanvien els valors DesignWidth i DesignHeight de l'aplicació, en funció de si l'amplada del dispositiu és menor que la seva alçada (orientació vertical) o superior a la seva alçada (orientació horitzontal).
Després d'ajustar les fórmules d'amplada i alçada de la pantalla, és possible que també vulguis 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 està orientada verticalment o horitzontalment.
Nota
En orientació horitzontal, els controls superior i inferior apareixen com a controls esquerra i dreta.
| Control | Propietat | Fórmula |
|---|---|---|
| Superior | X | 0 |
| Superior | Y | 0 |
| Superior | Amplada | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| Superior | Altura | If(Parent.Orientation = Layout.Vertical, Parent.Height / 2, Parent.Height) |
| Abaixar | X | If(Parent.Orientation = Layout.Vertical, 0, Upper.X + Upper.Width) |
| Abaixar | Y | If(Parent.Orientation = Layout.Vertical, Upper.Y + Upper.Height, 0) |
| Abaixar | Amplada | Parent.Width - Lower.X |
| Abaixar | Altura | 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 actual del dispositiu. 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 | El número de 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'amagi en un dispositiu de la mida d'un telèfon però sigui visible en cas contrari, podeu definir la propietat Visible del control en aquesta fórmula:
Parent.Size >= ScreenSize.Medium
Aquesta fórmula s'avalua com a certa quan la mida és mitjana o més gran i falsa en cas contrari.
Si voleu que un control ocupi una fracció diferent de l'amplada de la pantalla en funció de 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 amb els 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 tauletes o 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 MidaPunts d'interrupció 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, sobreescriureu aquestes expressions o fórmules si arrossegueu el control a una ubicació diferent o canvieu la mida del control arrossegant-ne la vora.