Aunque es posible crear una página mediante el método de arrastrar y soltar widgets, las propiedades de diseño pueden acelerarlo en gran medida. Ofrecen control inmediato y preciso sobre el tamaño y la posición del widget.
La propiedad de diseño
Los widgets de panel tienen una propiedad layout en su grupo de propiedades principal que define cómo se organizan los widgets secundarios. La propiedad tiene tres valores posibles:
- Fijo: organiza los widgets secundarios según los bordes del panel.
- Horizontal: organiza los widgets secundarios uno al lado del otro, en una línea horizontal.
- Vertical: organiza los widgets secundarios por encima y por debajo de cada uno, en una línea vertical.
La opción fija ubica a los secundarios de manera absoluta en referencia al panel principal. Las opciones horizontal y vertical organizan a los widgets de manera relativa, a la derecha o a la izquierda y por encima o por debajo de otros widgets en el panel. Los widgets de posición relativa fluyen con los widgets que los rodean. De hecho, se dice que los widgets que se ubican de esa manera están en flujo.
Propiedades de diseño
Todos los widgets tienen un grupo de propiedades de Diseño que determina su tamaño y su posición. El contenido del grupo de Diseño cambia según la propiedad layout del panel principal de un widget.
Propiedades de Diseño de panel fijo
Los widgets en paneles fijos tienen propiedades de diseño que establecen su tamaño y posición en relación con los bordes del panel. Las propiedades exactas que se muestran varían según el tipo de widget y tus selecciones, pero todas se dividen en cuatro tipos básicos:
| Tipo | Descripción | Propiedades |
|---|---|---|
| Posición | Las propiedades de posición determinan la distancia a la que debe estar un widget de los bordes del widget principal. Las casillas de verificación que estén al lado de las propiedades de posición las inhabilitan. Si inhabilitas la última propiedad en un eje, App Maker habilita de forma automática la propiedad opuesta. | top, bottom, left, right |
| Tamaño absoluto | Las propiedades de tamaño absoluto determinan el tamaño del widget, excepto cuando esté habilitada la propiedad de tamaño automático correspondiente. Las casillas de verificación que estén al lado de las propiedades de tamaño las inhabilitan. Si inhabilitas una propiedad de tamaño absoluto, el tamaño del widget se determina por las propiedades de posición de ese eje. | width, height |
| Tamaño automático | Las propiedades de tamaño automático escalan el tamaño de un widget de forma automática según su contenido. Esta propiedad solo está disponible para algunos tipos de widgets y solo si no inhabilitaste la propiedad de tamaño absoluto correspondiente. | autoWidth, autoHeight |
| Restricciones de tamaño | Las propiedades de restricción de tamaño establecen restricciones de tamaño mínimo y máximo en ejes de tamaño absoluto y de tamaño automático. Ingresa un valor a fin de establecer el mayor o menor tamaño permitido para una dimensión. | minWidth, maxWidth, minHeight, maxHeight |
Propiedades de Diseño de panel de flujo
Los widgets en paneles verticales y horizontales también tienen propiedades de Diseño que controlan su tamaño y posición, aunque las opciones para controlar la posición son más limitadas que en los paneles fijos. Las propiedades del panel de flujo se organizan en dos columnas: horizontal y vertical. Cada columna controla su respectivo eje.
| Tipo | Descripción | Propiedades |
|---|---|---|
| Tamaño | El tamaño controla cómo se configura el tamaño del widget para cada eje. Selecciona entre fixed, fit to content y fill parent. |
size |
| Tamaño absoluto | Las propiedades de tamaño absoluto determinan el tamaño del widget, cuando sus propiedades de size son fixed. |
width, height |
| Restricciones de tamaño | Las propiedades de restricción establecen restricciones de tamaño mínimo y máximo cuando las propiedades de size del widget son fit to content o fill parent. |
minWidth, maxWidth, minHeight, maxHeight |
| Alineación | La alineación controla la posición de los ejes sin flujo del panel. Determina la alineación vertical del widget en paneles horizontales y la alineación horizontal en los verticales. | align |
Espaciado
Usa el espaciado para controlar el margen y el relleno de los widgets individuales.
| Tipo | Descripción | Propiedades |
|---|---|---|
| Margen | Define la cantidad de espacio entre los bordes del widget y los objetos cercanos en la página. | margin top, margin bottom, margin left, margin right
|
| Relleno | Controla la cantidad de espacio entre el contenido de un widget y sus bordes. | padding top, padding bottom, padding left, padding right
|
Propiedades de flujo
Al contrario de los paneles fijos, la mayoría del posicionamiento de widgets en paneles de flujo sucede a nivel de panel. Para posicionar widgets en flujo, usa las propiedades en el grupo de Flujo del panel principal:
| Propiedad | Descripción |
|---|---|
wrap |
Esta propiedad controla cómo el panel organiza los widgets que de otra manera serían más anchos que sus ejes de flujo. |
justify |
Esta propiedad controla cómo el panel organiza los widgets junto con sus ejes de flujo. |
alignChidren |
Esta propiedad controla cómo el panel organiza los widgets junto con sus ejes sin flujo. |
wrapAlign |
Esta propiedad controla cómo el panel organiza los widgets que unen, cuando la propiedad wrap está habilitada. |
Propiedades de tamaño
El grupo de propiedades de tamaño enumera todas las propiedades de tamaño del grupo de Diseño como propiedades normales. Esto les permite a los datos vincular las propiedades para alterar sus valores de manera dinámica. Las propiedades de este grupo se pueden editar en simultáneo y te permiten establecer valores que pueden estar en conflicto. Por ejemplo, puedes establecer los valores left, right y width para números incompatibles. App Maker no garantiza el comportamiento coherente para las propiedades de tamaño conflictivas.
Descripción
La pestaña Descripción ubicada a la derecha del recuadro, te permite ocultar 
o bloquear 
los widgets. Los widgets bloqueados no se pueden seleccionar en el recuadro y eso evita que los muevas por accidente. Los widgets ocultos no se procesan en el recuadro, lo que te permite interactuar con los widgets que, de otra manera, estarían debajo de ellos. Los widgets ocultos también se muestran en el entorno de ejecución de tu aplicación. Para reposicionar o editar un widget que está oculto o bloqueado, selecciona su nombre de la pestaña Descripción.