Atributos Universales en HarmonyOS Next

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%')
  }
}

Etiquetas: HarmonyOS ArkUI UI/UX DesarrolloMóvil ComponentesUI

Publicado el 7-20 05:19