Introducción a la UI declarativa

Esta introducción describe la diferencia conceptual entre el estilo declarativo usado por Flutter y el estilo imperativo usado por muchos otros marcos de UI (User Interface).


¿Por qué una UI declarativa?

Los marcos de trabajo de Win32 a la web para Android e iOS suelen utilizar un estilo imperativo de la programación de la interfaz de usuario. Este puede ser el estilo con el que estés más familiarizado, donde creas una instancia de UI con todas las funciones, como una ImageView o equivalente, y luego la muta utilizando métodos y parámetros cuando cambia la UI.

Con el fin de aligerar la carga de los desarrolladores de tener que programar cómo hacer la transición entre varios estados de la interfaz de usuario, Flutter, por el contrario, le permite al desarrollador describir el estado actual de la interfaz de usuario y deja la transición al marco.

Esto, sin embargo, requiere un ligero cambio en el pensamiento de cómo manipular la UI.

Cómo cambiar la interfaz de usuario en un marco declarativo

Considere un ejemplo simplificado a continuación:

En el estilo imperativo, normalmente irá al propietario de ViewB y recuperará la instancia b utilizando los selectores o con findViewById o similar, e invocará las mutaciones en él (y la invalidará implícitamente). Por ejemplo:

// Imperative style
b.setColor(red)
b.clearChildren()
ViewC c3 = new ViewC(...)
b.add(c3)

Es posible que también deba replicar esta configuración en el constructor de ViewB, ya que la fuente de la verdad para la interfaz de usuario puede sobrevivir a la instancia b en sí.

En el estilo declarativo, las configuraciones de vista (como los Widgets de Flutter) son inmutables y solo son «planos» ligeros. Para cambiar la interfaz de usuario, un Widget desencadena una reconstrucción en sí mismo (más comúnmente al llamar a setState() en StatefulWidgets en Flutter) y construye un nuevo subárbol de Widget.

// Declarative style
return ViewB(
  color: red,
  child: ViewC(...),
)

Aquí, en lugar de mutar una instancia b antigua cuando cambia la interfaz de usuario, Flutter construye nuevas instancias de Widget. El
framework gestiona muchas de las responsabilidades de un objeto UI tradicional (como mantener el estado del diseño) detrás de escena con RenderObjects. Los RenderObjects persisten entre los marcos y los Widgets ligeros de Flutter le dicen al framework que mute los RenderObjects entre los estados. El
framework Flutter se encarga del resto.

Fuente: flutter.io

Sobre Gustavo Zimbrón 188 artículos
Apasionado por la programación y la tecnología, me gustan los retos y aprender siempre cosas nuevas.
Subscribe
Notify of
guest

0 Comentarios
Oldest
Newest Most Voted
Inline Feedbacks
View all comments