HarmonyOS incluye una extensa colección de elementos de interfaz de usuario que permiten a los desarrolladores crear aplicaciones de forma eficiente. Esto abarca el uso de patrones declarativos, la asignación de atributos a componentes y el manejo de interacciones.

Elementos Básicos de Interfaz

El componente Text se emplea para mostrar información textual. En ArkTS, su implementación puede verse así:

Texto('Bienvenido a HarmonyOS')
  .tamanoFuente(22)
  .colorFuente(Color.Verde)

El componente Button facilita la ejecución de acciones y admite diversas configuraciones visuales:

Boton('Presionar', { estilo: EstiloBoton.Capsula })
  .alPresionar(() => {
    consola.registrar('Botón activado')
  })

Organización con Contenedores de Diseño

Los contenedores Column y Row permiten alinear elementos vertical u horizontalmente:

Columna() {
  Texto('Primer elemento')
  Texto('Segundo elemento')
}.ancho('100%')

El componente Stack permite superponer elementos, útil para capas visuales:

Pila() {
  Imagen($r('app.media.fondo'))
  Texto('Texto superpuesto')
}

Creación de Componentes Personalizados

Se pueden definir componentes reutilizables mediante archivos ArkTS específicos:

@Componente
struct TarjetaPersonalizada {
  @Propiedad encabezado: cadena

  construir() {
    Columna() {
      Texto(this.encabezado)
      Separador()
      // Otros subcomponentes
    }
  }
}

Su uso se realiza pasando parámetros al componente:

TarjetaPersonalizada({ encabezado: 'Componente Reutilizable' })

Control de Estado en Componentes

El decorador @State gestiona datos internos del componente, actualizando la interfaz ante cambios:

@State total: numero = 0

Boton(`Veces pulsado: ${this.total}`)
  .alPresionar(() => {
    this.total++
  })

Para compartir estado entre componentes relacionados, se utilizan @Provide y @Consume.

Ciclo de Vida de Componentes

Los componentes personalizados disponen de métodos de ciclo de vida específicos:

@Componente
struct EjemploCicloVida {
  antesDeMostrar() {
    // Se ejecuta al crear el componente
  }

  antesDeOcultar() {
    // Se ejecuta antes de destruir el componente
  }
}

Componentes de Contenedor Avanzados

El componente List renderiza colecciones de manera eficiente con carga perezosa:

Lista({ espacio: 12 }) {
  ParaCada(this.elementos, (elemento) => {
    ElementoLista() {
      Texto(elemento.nombre)
    }
  })
}.divisor({ grosor: 1 })

Tabs crea interfaces con pestañas navegables:

Pestanas() {
  ContenidoPestana() {
    Texto('Primera pestaña')
  }.etiqueta('P1')

  ContenidoPestana() {
    Texto('Segunda pestaña')
  }.etiqueta('P2')
}

Estilización de Componentes

Las propiedades de estilo se aplican mediante encadenamiento de métodos:

Texto('Estilo personalizado')
  .tamanoFuente(26)
  .pesoFuente(PesoFuente.Negrita)
  .colorFondo('#EAEAEA')

Los estilos pueden vincularse dinámicaemnte al estado del componente:

@State activo: booleano = falso

Texto('Estilo Dinámico')
  .colorFuente(this.activo ? Color.Rojo : Color.Negro)

Manejo de Eventos e Interacciones

Los componentes responden a diversos tipos de eventos:

Boton('Demo Eventos')
  .alPresionar(() => { /* Acción al clickear */ })
  .alTocar((evento) => { /* Manejo de toque */ })

Los gestos complejos se manejan con el modificador Gesture:

Texto('Zona Interactiva')
  .gesto(
    GestoTap()
      .alAccion(() => { /* Acción al tocar brevemente */ })
  )

Comunicación entre Componentes

El paso de datos de padre a hijo se realiza con @Prop:

@Componente
struct Padre {
  @State mensaje: cadena = 'Hola'

  construir() {
    Hijo({ mensajeHijo: this.mensaje })
  }
}

@Componente
struct Hijo {
  @Prop mensajeHijo: cadena

  construir() {
    Texto(this.mensajeHijo)
  }
}

Los hijos pueden notificar a los padres mediante eventos personalizadso:

@Evento notificarPadre: () => void

Boton('Notificar')
  .alPresionar(() => {
    this.notificarPadre()
  })

Optimización de Rendimiento

Evite operaciones costosas dentro del método construir; precalcule datos complejos. Para listas extensas, use LazyForEach en lugar de ParaCada para carga bajo demanda. Implemente decoradores como @Link y @ObjectLink para minimizar renderizaciones innecesarias.