Crear deseños receptivos en aplicacións de lenzo
Antes de crear unha aplicación de lenzo en Power Apps, especifique se desexa adaptar a aplicación a un teléfono ou unha tableta. Esta elección determina o tamaño e a forma do lenzo sobre o que vai crear a súa aplicación.
Despois de facer esa elección, pode escoller algunhas opcións máis se selecciona Configuración > Mostrar. Pode escoller a orientación vertical ou horizontal e o tamaño da pantalla (só tabletas). Tamén pode bloquear ou desbloquear a relación de aspecto e admitir a rotación do dispositivo (ou non).
Esas opcións subxacen a calquera outra opción que faga mentres fai os deseños da pantalla. Se a aplicación funciona nun dispositivo dun tamaño diferente ou na web, o deseño completo cambia para adaptarse á pantalla onde está executando a aplicación. Se unha aplicación deseñada para un teléfono execútase nunha ventá grande do navegador, por exemplo, a aplicación cambiará de tamaño a modo de compensación e terá un tamaño excesivo para o seu espazo. A aplicación non pode aproveitar os píxeles adicionais amosando máis controis ou máis contido.
Se crea un deseño con capacidade de resposta, os controis poden responder a diferentes dispositivos ou tamaños de xanelas, facendo que as experiencias se parezan máis naturais. Para obter un deseño con capacidade de resposta, axuste algunhas configuracións e escriba expresións en toda a aplicación.
Desactivar Axustar tamaño
Pode configurar cada pantalla para que o seu deseño se adapte ao espazo real no que se está executando a aplicación.
Active a capacidade de resposta desactivando a configuración Axustar tamaño da aplicación, que está activada de xeito predeterminado. Ao desactivar esta configuración, tamén desactiva Bloquear relación de aspecto porque xa non está deseñando para unha forma de pantalla específica. (Aínda pode especificar se a aplicación admite a rotación do dispositivo).
Para que a aplicación teña capacidade de resposta, debes dar pasos adicionais, pero este cambio é o primeiro paso para facer posible a capacidade de resposta.
Comprender as dimensións da aplicación e da pantalla
Para que os esquemas da aplicación respondan aos cambios das dimensións da pantalla, escribirá fórmulas que empreguen as propiedades Width e Height da pantalla. Para mostrar estas propiedades, abra unha aplicación en Power Apps Studio e logo seleccione unha pantalla. As fórmulas predeterminadas para estas propiedades aparecen no separador Avanzado do panel da dereita.
Largura = Max(App.Width, App.DesignWidth)
Altura = Max(App.Height, App.DesignHeight)
Estas fórmulas fan referencia ás propiedades Width, Height, DesignWidth e DesignHeight da aplicación. As propiedades Width e Height da aplicación corresponden ás dimensións do dispositivo ou da ventá do navegador no que está executando a aplicación. Se o usuario redimensiona a xanela do navegador (ou xira o dispositivo se apagou Bloquear orientación), os valores destas propiedades cambian dinamicamente. As fórmulas das propiedades Width e Height da pantalla vólvense avaliar cando estes valores cambian.
As propiedades DesignWidth e DesignHeight proveñen das dimensións que especifica no panel Mostrar da Configuración. Por exemplo, se selecciona a disposición do teléfono en orientación vertical, DesignWidth será 640 e DesignHeight será 1136.
Como se empregan nas fórmulas para as propiedades Width e Height da pantalla, pode pensar en DesignWidth e DesignHeight como as dimensións mínimas para as que deseñará a aplicación. Se a área real dispoñible da súa aplicación é aínda menor que estas dimensións mínimas, as fórmulas para as propiedades Width e Height da pantalla garanten que os seus valores non sexan menores que os mínimos. Nese caso, o usuario debe desprazarse para ver todo o contido da pantalla.
Despois de establecer o Anchodedeseño e a Alturadedeseño da aplicación, non (na maioría dos casos) necesitará cambiar as fórmulas predeterminadas das propiedades Width e Height de cada pantalla. Máis tarde, neste tema analizaranse casos nos que pode personalizar estas fórmulas.
Usar fórmulas para un deseño dinámico
Para crear un deseño con capacidade de resposta, localice e asigne tamaño a cada control empregando fórmulas no canto de valores absolutos (constantes) de coordenadas. Estas fórmulas expresan a posición e tamaño de cada control en termos de tamaño xeral da pantalla ou en relación a outros controis da pantalla.
Importante
Despois de escribir fórmulas para as propiedades X, Y, Width e Height dun control, as súas fórmulas serán substituídas por valores constantes se posteriormente arrastra o control no editor de lenzo. Cando comece a usar fórmulas para lograr un deseño dinámico, deberá evitar arrastrar os controis.
No caso máis sinxelo, un control enche unha pantalla completa. Para crear este efecto, estableza as propiedades do control nestes valores:
| Propiedade | Valor |
|---|---|
| X | 0 |
| Y | 0 |
| Largura | Parent.Width |
| Altura | Parent.Height |
Estas fórmulas usan o operador Principal. Para os controis colocados directamente nunha pantalla, Principal fai referencia á pantalla. Con estes valores de propiedade, o control aparece na esquina superior esquerda da pantalla (0, 0) e ten o mesmo Ancho e Altura que a pantalla.
Máis tarde neste tema, aplicará estes principios (e o operador Principal) para situar os controis dentro doutros recipientes, como galerías, controis de grupos e compoñentes.
Como alternativa, o control só pode encher a metade superior da pantalla. Para crear este efecto, defina a propiedade Height en Parent.Height / 2 e deixe as outras fórmulas sen cambios.
Se desexa un segundo control para encher a metade inferior da mesma pantalla, pode tomar polo menos outros dous enfoques para construír as súas fórmulas. Para simplificar, pode levar a cabo este enfoque:
| Control | Propiedade | Fórmula |
|---|---|---|
| superior | X | 0 |
| superior | Y | 0 |
| superior | Largura | Parent.Width |
| superior | Altura | Parent.Height / 2 |
| Baixo | X | 0 |
| Baixo | Y | Parent.Height / 2 |
| Baixo | Largura | Parent.Width |
| Baixo | Altura | Parent.Height / 2 |
Esta configuración conseguiría o efecto que desexe, pero tería que editar cada fórmula se cambiou de opinión sobre os tamaños relativos dos controis. Por exemplo, pode decidir que o control superior debería ocupar só un terzo superior da pantalla, co control inferior enchendo os dous terzos inferiores.
Para crear ese efecto, tería que actualizar a propiedade Height do control Superior e as propiedades Y e Height do control Inferior. En vez diso, considere escribir as fórmulas para o control Inferior en termos de control Superior (e a si mesmo), como neste exemplo:
| Control | Propiedade | Fórmula |
|---|---|---|
| superior | X | 0 |
| superior | Y | 0 |
| superior | Largura | Parent.Width |
| superior | Altura | Parent.Height / 3 |
| Lower | X | 0 |
| Lower | Y | Upper.Y + Upper.Height |
| Lower | Largura | Parent.Width |
| Baixo | Altura | Parent.Height - Lower.Y |
Con estas fórmulas establecidas, só precisa cambiar a propiedade Height do control Superior para expresar unha fracción diferente da altura da pantalla. O control Inferior móvese e cambia de tamaño automaticamente para dar conta do cambio.
Pode usar estes padróns de fórmulas para expresar relacións comúns de deseño entre un control, chamado C, e o seu control principal ou asociado, chamado D.
| Relación entre C e o seu elemento principal | Propiedade | Fórmula | Ilustración |
|---|---|---|---|
| C enche o ancho do elemento principal, cunha marxe de N | X | N |
 |
| Largura | Parent.Width - (N * 2) |
||
| C enche a altura do elemento principal, cunha marxe de N | Y | N |
 |
| Altura | Parent.Height - (N * 2) |
||
| C aliñado co bordo dereito do elemento principal, cunha marxe de N | X | Parent.Width - (C.Width + N) |
 |
| C aliñado co bordo inferior do elemento principal, cunha marxe de N | Y | Parent.Height - (C.Height + N) |
 |
| C centrado horizontalmente no elemento principal | X | (Parent.Width - C.Width) / 2 |
 |
| C centrado verticalmente no elemento principal | Y | (Parent.Height - C.Height) / 2 |
 |
| Relación entre C e D | Propiedade | Fórmula | Ilustración |
|---|---|---|---|
| C aliñado horizontalmente con D e o mesmo ancho que D | X | D.X |
 |
| Largura | D.Width |
||
| C aliñado verticalmente con D e a mesma altura que D | Y | D.Y |
 |
| Altura | D.Height |
||
| Bordo dereito de C aliñado co bordo dereito de D | X | D.X + D.Width - C.Width |
 |
| Bordo inferior de C aliñado co bordo inferior de D | Y | D.Y + D.Height - C.Height |
 |
| C centrado horizontalmente en relación a D | X | D.X + (D.Width - C.Width) / 2 |
 |
| C centrado verticalmente en relación a D | Y | D.Y + (D.Height - C.Height) /2 |
 |
| C colocado á dereita de D cunha fenda de N | X | D.X + D.Width + N |
 |
| C situado debaixo de D cunha fenda de N | Y | D.Y + D.Height + N |
 |
| C enche o espazo entre D e bordo dereito do elemento principal | X | D.X + D.Width |
 |
| Largura | Parent.Width - C.X |
||
| C enche o espazo entre D e bordo inferior do elemento principal | Y | D.Y + D.Height |
 |
| Altura | Parent.Height - C.Y |
Deseño xerárquico
A medida que constrúe pantallas que conteñen máis controis, será máis cómodo (ou incluso necesario) posicionar os controis relativos a un control principal, máis que en relación á pantalla ou un control secundario. Organizando os seus controis nunha estrutura xerárquica, pode facer que as súas fórmulas sexan máis fáciles de escribir e manter.
Galerías
Se emprega unha galería na súa aplicación, necesitará establecer controis dentro do modelo da galería. Pode situar estes controis escribindo fórmulas que usan o operador Principal, que fará referencia ao modelo da galería. Nas fórmulas sobre controis dentro dun modelo de galería, use as propiedades Parent.TemplateHeight e Parent.TemplateWidth; non use Parent.Width e Parent.Height, que fan referencia ao tamaño global da galería.
Control do recipiente
Podes usar o control Contedor de deseño, como control principal.
Considere o exemplo dunha cabeceira na parte superior dunha pantalla. É común ter unha cabeceira cun título e varias iconas coas que os seus usuarios poidan interactuar. Pode construír unha cabeceira mediante o control Recipiente, que contén un control Etiqueta e dous controis de Icona:
Estableza as propiedades para estes controis nestes valores:
| Propiedade | Cabeceira | Menú | Pechar | Cargo |
|---|---|---|---|---|
| X | 0 |
0 |
Parent.Width - Close.Width |
Menu.X + Menu.Width |
| Y | 0 |
0 |
0 |
0 |
| Largura | Parent.Width |
Parent.Height |
Parent.Height |
Close.X - Title.X |
| Altura | 64 |
Parent.Height |
Parent.Height |
Parent.Height |
Para o control Cabeceira, Parent fai referencia á pantalla. Para os outros, Parent fai referencia ao control Cabeceira.
Despois de escribir estas fórmulas, pode axustar o tamaño ou posición do control Cabeceira cambiando as fórmulas das súas propiedades. Os tamaños e as posicións dos controis secundarios axustaranse automaticamente de maneira correspondente.
Controis de contedores de deseño automático
Podes utilizar unha función, os controis do contedor de deseño automático para distribuír automaticamente os compoñentes secundarios. Estes contedores determinan a posición dos compoñentes secundarios para que nunca teña que establecer X, Y para un compoñente dentro do contedor. Ademais, pode distribuír o espazo dispoñible aos seus compoñentes secundarios en función da configuración, así como determinar o aliñamento vertical e horizontal dos compoñentes secundarios. Máis información: Controis de contedores de deseño automático
Compoñentes
Se usas outra función, chamada Components, podes construír bloques de construción e reutilizalos en toda a túa aplicación. Como ocorre co control Recipiente, os controis que coloca dentro dun compoñente deben basear as súas fórmulas de posición e tamaño en Parent.Width e Parent.Height, que fan referencia ao tamaño do compoñente. Máis información: Crear un compoñente.
Adaptación do deseño para o tamaño e a orientación do dispositivo
Ata o de agora, aprendeu como usar fórmulas para cambiar o tamaño de cada control en resposta ao espazo dispoñible, mantendo os controis aliñados entre si. Pero é posible que desexe ou que faga cambios máis importantes no deseño en resposta a diferentes tamaños e orientacións do dispositivo. Cando se xira un dispositivo da orientación vertical á horizontal, por exemplo, pode cambiar dunha disposición vertical a unha horizontal. Nun dispositivo máis grande, pode presentar máis contido ou reorganizalo para ofrecer unha disposición máis atractiva. Nun dispositivo máis pequeno, é posible que teña que dividir o contido en varias pantallas.
Orientación do dispositivo
As fórmulas predeterminadas para as propiedades Width e Height dunha pantalla, como este tema descrito anteriormente, non necesariamente proporcionarán unha boa experiencia se un usuario xira un dispositivo. Por exemplo, unha aplicación deseñada para un teléfono con orientación vertical ten un Anchodedeseño de 640 e unha Alturadedeseño de 1136. A mesma aplicación nun teléfono con orientación horizontal terá estes valores de propiedade:
- A propiedade Width da pantalla está definida en
Max(App.Width, App.DesignWidth). O Ancho da aplicación (1136) é superior ao seu Anchodedeseño (640), polo que a fórmula avalíase en 1136. - A propiedade Height da pantalla está definida en
Max(App.Height, App.DesignHeight). O Altura da aplicación (640) é superior á súa Alturadedeseño (1136), polo que a fórmula avalíase en 1136.
Cunha Altura de pantalla de 1136 e unha altura do dispositivo (nesta orientación) de 640, o usuario debe desprazar a pantalla verticalmente para mostrar todo o seu contido, que pode non ser a experiencia que desexa.
Para adaptar as propiedades Width e Height da pantalla na orientación do dispositivo, pode usar estas fórmulas:
Largura = 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))
Estas fórmulas cambian os valores DesignWidth e DesignHeight da aplicación en función de se o ancho do dispositivo é inferior á súa altura (orientación vertical) ou superior á súa altura (orientación horizontal).
Despois de axustar as fórmulas Ancho e Altura da pantalla, tamén pode reorganizar os controis da pantalla para empregar mellor o espazo dispoñible. Por exemplo, se cada un dos dous controis ocupa a metade da pantalla, pode acumulalos verticalmente en vertical pero organizalos un ao lado do outro en horizontal.
Pode usar a propiedade Orientation da pantalla para determinar se a pantalla está orientada vertical ou horizontalmente.
Nota
En orientación horizontal, os controis Superior e Inferior aparecen como controis dereito e esquerdo.
| Control | Propiedade | Fórmula |
|---|---|---|
| superior | X | 0 |
| superior | Y | 0 |
| superior | Largura | If(Parent.Orientation = Layout.Vertical, Parent.Width, Parent.Width / 2) |
| superior | Altura | 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 | Largura | Parent.Width - Lower.X |
| Baixo | Altura | Parent.Height - Lower.Y |
Tamaños de pantalla e puntos de quebra
Pode axustar o seu deseño en función do tamaño do dispositivo. A propiedade Size da pantalla clasifica o tamaño actual do dispositivo. O tamaño é un número enteiro positivo; o tipo ScreenSize proporciona constantes nomeadas para axudar coa lexibilidade. Esta táboa enumera as constantes:
| Constante | Valor | Tipo de dispositivo típico (usando a configuración predeterminada da aplicación) |
|---|---|---|
| ScreenSize.Small | 1 | Número de teléfono |
| ScreenSize.Medium | 2 | Tableta, sostida verticalmente |
| ScreenSize.Large | 3 | Tableta, sostida horizontalmente |
| ScreenSize.ExtraLarge | 4 | Computador de escritorio |
Use estes tamaños para tomar decisións sobre o deseño da aplicación. Por exemplo, se desexa que un control estea oculto nun dispositivo do tamaño dun teléfono pero visible doutro xeito, pode configurar a propiedade Visible do control nesta fórmula:
Parent.Size >= ScreenSize.Medium
Esta fórmula avalíase en verdadeiro cando o tamaño é medio ou maior e falso en caso contrario.
Se desexa que un control ocupe unha fracción diferente do ancho da pantalla en función do tamaño da pantalla, configure a propiedade Width do control nesta fórmula:
Parent.Width *
Switch(
Parent.Size,
ScreenSize.Small, 0.5,
ScreenSize.Medium, 0.3,
0.25
)
Esta fórmula establece o ancho do control na metade do ancho da pantalla nunha pantalla pequena, tres décimas do ancho da pantalla nunha pantalla mediana e un cuarto do ancho da pantalla en todas as outras pantallas.
Puntos de quebra personalizados
A propiedade Size da pantalla calcúlase comparando a propiedade Ancho da pantalla nos valores da propiedade SizeBreakpoints da aplicación. Esta propiedade é unha táboa de números cunha única columna que indican os puntos de quebra de ancho que separan os tamaños de pantalla nomeados:
Nunha aplicación creada para tableta ou web, o valor predeterminado da propiedade SizeBreakpoints da aplicación son [600, 900, 1200]. Nunha aplicación creada para teléfonos, o valor é [1200, 1800, 2400]. (Os valores das aplicacións de teléfonos duplícanse porque estas aplicacións usan coordenadas que son o dobre efectivamente das coordenadas utilizadas noutras aplicacións).
Pode personalizar os puntos de quebra da aplicación cambiando os valores da propiedade SizeBreakpoints da aplicacións. Seleccione Aplicación na vista de árbore, seleccione SizeBreakpoints na lista de propiedades e logo edite os valores na barra de fórmulas. Pode crear tantos puntos de quebra como a aplicación precise, pero só os tamaños do 1 ao 4 corresponden aos tamaños da pantalla nomeados. Nas fórmulas, pode facer referencia a tamaños máis alá do Extragrande polos seus valores numéricos (5, 6, etc.).
Tamén pode especificar menos puntos de quebra. Por exemplo, a aplicación pode necesitar só tres tamaños (dous puntos de quebra), polo que os tamaños posibles da pantalla serán pequenos, medianos e grandes.
Limitacións coñecidas
O lenzo de creación non responde ás fórmulas de tamaño creadas. Para probar o comportamento receptivo, garde e publique a súa aplicación e logo ábraa en dispositivos ou en ventás do navegador de varios tamaños e orientacións.
Se escribe expresións ou fórmulas nas propiedades X, Y, Width e Height dun control, sobrescribirá esas expresións ou fórmulas se posteriormente arrastra o control a outra localización ou cambia o tamaño do control arrastrando o bordo.
Nota
Pode indicarnos as súas preferencias para o idioma da documentación? Realice unha enquisa breve. (teña en conta que esa enquisa está en inglés)
Esta enquisa durará sete minutos aproximadamente. Non se recompilarán datos persoais (declaración de privacidade).
Comentarios
Proximamente: Ao longo de 2024, retiraremos gradualmente GitHub Issues como mecanismo de comentarios sobre o contido e substituirémolo por un novo sistema de comentarios. Para obter máis información, consulte: https://aka.ms/ContentUserFeedback.
Enviar e ver os comentarios