Configuración de Dimensiones
.ancho(valor: Longitud) // Define el ancho del componente
.altura(valor: Longitud) // Define la altura del componente
.tamaño(opciones: Dimensiones) // Establece ancho y alto simultáneamente
.relleno(valor: Relleno | Longitud) // Configura el espacio interno
.margen(valor: Margen | Longitud) // Define el espacio externo
Posiccionamiento de Eleemntos
.alineacion(valor: Alineacion) // Alineación de hijos en contenedor
.direccion(valor: Direccion) // Orientación del eje principal
.posicion(valor: Posicion) // Posición absoluta respecto al padre
.anclaReferencia(valor: Posicion) // Punto de anclaje para posicionamiento
.desplazamiento(valor: Posicion) // Ajuste de posición relativa
.reglasAlineacion(reglas: ReglasAlineacion) // Reglas para RelativeContainer
Restricciones de Diseño
.relacionAspecto(valor: number) // Proporción ancho/alto
.prioridadVisualizacion(valor: number) // Prioridad en contenedores
Diseño Flexible
.baseFlex(valor: number | string) // Tamaño base inicial
.expansionFlex(valor: number) // Proporción de espacio disponible
.contraccionFlex(valor: number) // Factor de reducción de tamaño
.alineacionPropia(valor: AlineacionItem) // Alineación en eje cruzado
Estilos de Borde
.borde(opciones: Borde) // Estilo completo de borde
.estiloBorde(estilo: EstiloBorde) // Patrón de líneas del borde
.anchoBorde(valor: Longitud) // Grosor del borde
.colorBorde(valor: ColorRecurso) // Color del contorno
.radioBorde(valor: Longitud) // Curvatura de esquinas
Configuración de Fondo
.colorFondo(valor: ColorRecurso) // Color de fondo
.imagenFondo(origen: RecursoGrafico) // Imagen de fondo
.tamañoImagenFondo(valor: Dimensiones) // Escala de imagen de fondo
.posicionImagenFondo(valor: Posicion) // Ubicación de imagen
.efectoDesenfoque(estilo: EstiloDesenfoque) // Efecto de desenfoque
.ajusteImagenFondo(opciones: AjusteImagen) // Comportamiento de redimensionado
Efectos Visuales
.desenfoque(radio: number) // Difuminado de contenido
.sombra(opciones: Sombra) // Efecto de sombreado
.escalaGrises(intensidad: number) // Niveles de gris
.brillo(intensidad: number) // Modificación de luminosidad
.saturacion(intensidad: number) // Intensidad de colores
.contraste(intensidad: number) // Diferencia tonal
.fusionColor(modo: ModoFusion) // Mezcla con fondo
Ejemplo de implementación
@Entrada
@Component
struct AtributosGlobales {
@Estado mensaje: string = 'Propiedades Universales'
construir() {
Columna() {
Texto(this.mensaje)
.tamanoFuente(30)
.grosorFuente(GrosorFuente.Negrita)
Fila() {
Texto('Ajuste dimensional')
}.colorFondo(Color.Naranja)
.tamaño({ancho:200, altura:40})
.ancho(60)
.ancho(100) // La última definición prevalece
Fila() {
Texto('Espaciado')
}.colorFondo(Color.Verde)
.relleno(10)
.margen(10)
Pila() {
Texto('Posicionamiento')
}.colorFondo(Color.Azul)
.tamaño({ancho:'100%', altura:50})
.alineacion(Alineacion.Centro)
Fila() {
Texto('Bordes')
}.colorFondo(Color.Amarillo)
.borde({ancho:2, color:Color.Rojo, radio:12})
.anchoBorde(4)
.colorBorde(Color.VerdeOscuro)
Fila() {
Texto('Fondo')
}.altura(120)
.colorFondo(Color.Lila)
.imagenFondo($r('app.media.icono'))
.posicionImagenFondo(Alineacion.Centro)
}
.altura('100%')
}
}