Introducción
En el editor del App Designer, puede configurar el layout de su app para crear diseños flexibles y personalizados. Esto incluye seleccionar el tipo de contenedor para la sección principal de la app, así como definir la cantidad de columnas y filas dentro de ella. Estas opciones de layout le permiten organizar y distribuir sus Controles de una manera única y versátil.
Tipos de contenedores
Contenido
Su app incluye una sección principal denominada Contenido, que contiene todas las filas y columnas donde se ubican los Controles.
Para configurar su layout, haga clic en la sección Contenido, seleccione la opción Layout y elija un tipo de layout para su app en la etiqueta Preajustes.
Puede configurar el layout de la sección Contenido con las siguientes opciones:
•Página web: El contenedor Sección permanece sin dividir y ocupa el 100 % del ancho de la app.
•Móvil: El contenedor Sección se divide en dos contenedores separados.
Diseño
También puede configurar el ancho del contenedor Contenido.
Para hacerlo, haga clic en la sección Contenido, seleccione la opción Diseño y elija el tipo de ancho deseado en la etiqueta Ancho.
Las opciones de ancho disponibles son:
•Completo: El contenedor Contenido no tiene relleno, lo que permite que los contenedores de Sección ocupen todo el ancho.
•Enmarcado: El contenedor Contenido incluye relleno, por lo que los contenedores de Sección no ocupan todo el ancho. Cuando esta opción está seleccionada, puede configurar la Alineación horizontal.
Sección
Un contenedor Sección se coloca dentro del contenedor Contenido. Contiene uno o más contenedores Fila:
•Si selecciona el layout Página web, el contenedor Contenido incluye 1 Sección.
•Si selecciona el layout Móvil, el contenedor Contenido incluye 2 Secciones.
Fila
Un contenedor Fila se encuentra dentro de una Sección. Contiene contenedores Columna.
Puede agregar o eliminar Filas según lo requiera su diseño. La cantidad de Columnas en cada Fila depende del layout seleccionado en la sección Contenido.
Columna
Los contenedores Columna se colocan dentro de las Filas. Estos contienen los Controles utilizados en su app.
Opciones de diseño
Los contenedores Sección, Fila y Columna comparten las mismas configuraciones de diseño, que puede ajustar en la pestaña Diseño de cada contenedor:
•Relleno: Elija el espaciado dentro del contenedor. Opciones: Sin espacio, Compacto, Normal, Amplio.
•Espacio vertical: Defina el espacio entre filas. Opciones: Sin espacio, Compacto, Normal, Amplio.
•Tamaño del borde: Defina el grosor del borde entre 0 y 5.
•Radio de borde: Establezca esquinas redondeadas usando valores en píxeles (px) o porcentajes (%). Puede configurar cada esquina de forma individual.
•Sombra de caja: Active o desactive la sombra de caja y configure su color, dirección, difuminado y expansión.
•Color de fondo: Elija un color de fondo para la sección a partir de las opciones predeterminadas disponibles, o utilice la herramienta Selector de color para definir un color personalizado. Para abrir el selector, haga clic en la primera caja de color que aparece debajo de la etiqueta Color de fondo.
•Color del borde: Seleccione un color de borde para la sección desde la paleta predeterminada, o defina uno propio utilizando la herramienta Selector de color. Haga clic en la primera caja de color debajo de la etiqueta Color del borde para abrir el selector.
Opciones únicas de diseño para Filas
El contenedor Fila incluye las mismas configuraciones de diseño mencionadas anteriormente, junto con las siguientes opciones adicionales:
•Ajustar altura: Permite que la fila ajuste automáticamente su altura según su contenido.
•Alineación vertical: Defina la posición vertical del contenido dentro de la fila.
Opciones únicas de diseño para Columnas
El contenedor Columna también incluye todas las configuraciones estándar de diseño, con las siguientes opciones adicionales:
•Alineación horizontal: Defina cómo se alinea el contenido dentro de la columna.
•Ancho de columna: Determina cuánto espacio ocupa una columna dentro de una fila. Puede establecer el ancho utilizando el control deslizante o ingresar un valor específico. Las unidades disponibles incluyen:
oPíxeles (px): Establece un ancho fijo entre 230 y 2000 píxeles, manteniendo el tamaño de la columna constante en todos los tamaños de pantalla.
oPorcentaje (%): Asigna un ancho proporcional de la fila, de 1 % a 100 %, lo que permite que el diseño se adapte a diferentes tamaños de pantalla.
oAutomático: Permite que el sistema asigne automáticamente el ancho de la columna según su contenido y el diseño.
|
El ancho mínimo soportado es de 230 px, sin importar la unidad seleccionada o el valor ingresado manualmente. |
Last Updated 5/11/2025 8:16:05 PM