[Flutter·Práctica de aprendizaje·UI]Conocimiento básico e importante de la interfaz de usuario

prefacio

Sitio web oficial de aprendizaje de referencia: "Flutter Practical Combat Second Edition" 

Recuerda antes de aprender: todo en Flutter es un Widget, y debes recordarlo en silencio por más de 3 veces.

Este punto corresponde al concepto de que todo en el lenguaje de desarrollo Dart es un objeto.

 Widget 

En la introducción anterior, sabemos que casi todos los objetos en Flutter son un widget. A diferencia de los "controles" en el desarrollo nativo, el concepto de widget en Flutter es más amplio. Puede representar no solo elementos de la interfaz de usuario, sino también algunos componentes funcionales como: para la detección de gestos, para la transferencia de datos del tema de la aplicación, espera y controles en el desarrollo  GestureDetector nativo  Theme . por lo general, solo se refieren a elementos de la interfaz de usuario. En el siguiente contenido, podemos usar conceptos como "controles" y "componentes" al describir los elementos de la interfaz de usuario. Los lectores deben saber que son widgets, solo expresiones diferentes en diferentes escenarios.

El núcleo principal de Flutter es construir la interfaz de usuario. Para decirlo sin rodeos, la interfaz que crea puede ser multiplataforma y solo crea la interfaz. La mayoría de los desarrolladores piensan que el widget es un control, y no hay necesidad de enredarse en el concepto.

Comprensión de la interfaz del widget

• @immutable significa que el widget es inmutable. Si la propiedad cambia en Flutter, el árbol de widgets se reconstruirá.
• Las propiedades definidas en Widget deben ser definitivas
• La clase Widget se hereda de DiagnosticableTree y DiagnosticableTree es un "árbol de diagnóstico" que proporciona información de depuración.
• Clave: la función principal es decidir si buildreutilizar el widget anterior la próxima vez ( la condición de decisión está en canUpdate()el método )
• createElement (): un widget puede corresponder a varios, que Element（básicamente no se llama durante nuestro proceso de desarrollo）
• debugFillProperties(...) anula el método de la clase principal, principalmente para establecer algunas características del árbol de diagnóstico.
• canUpdate(...) es un método estático, ya sea para usar el nuevo objeto de widget para actualizar la configuración del objeto Element correspondiente en el árbol de interfaz de usuario antiguo. (La condición es: cuando el tipo de tiempo de ejecución y la clave de newWidget y oldWidget son iguales al mismo tiempo, se usará el nuevo widget para actualizar la configuración del objeto Element; de lo contrario, se creará un nuevo elemento).

Cuatro árboles en aleteo

Primero mira el diagrama:

 El último árbol es el árbol de capas que se generará antes de que el árbol de representación se cargue en la pantalla y no se discutirá por el momento.

• WidgetTree: almacene contenido de renderizado, es solo una estructura de datos de configuración, la creación es muy liviana y se reconstruirá en cualquier momento durante el proceso de actualización de la página
• Elemento es la capa intermedia que separa WidgetTree y el objeto de renderizado real. WidgetTree se usa para describir la propiedad de Elemento correspondiente, mantener Widget y RenderObject al mismo tiempo, almacenar información de contexto y usarla para recorrer el árbol de vistas y admitir la estructura de la interfaz de usuario. .
• RenderObject (árbol de representación) se utiliza para el diseño y el dibujo de la interfaz de la aplicación. Es responsable de la representación real y guarda el tamaño, el diseño y otra información de los elementos. Crear una instancia de RenderObject consume mucha energía.

Widget sin estado

Hereda de la clase de widget y anula el método createElement()

@override
StatelessElement createElement() => StatelessElement(this);

 StatelessElement hereda indirectamente de la clase Element y corresponde a StatelessWidget (como sus datos de configuración).

StatelessElement se usa en escenarios que no necesitan mantener el estado . Por lo general, crea la interfaz de usuario anidando otros widgets en el método de compilación y compila recursivamente sus widgets anidados durante el proceso de compilación.

Widget con estado

Al igual que StatelessWidget, StatefulWidget también hereda de la clase widget y reescribe el método createElement(). La diferencia es que los objetos Element devueltos son diferentes; además, se agrega una nueva interfaz createState() a la clase StatefulWidget.

La definición de clase de StatefulWidget:

abstract class StatefulWidget extends Widget {
  const StatefulWidget({ Key key }) : super(key: key);
    
  @override
  StatefulElement createElement() => StatefulElement(this);
    
  @protected
  State createState();
}

StatefulElement hereda indirectamente de la clase Element y corresponde a StatefulWidget (como sus datos de configuración). CreateState() se puede llamar varias veces en StatefulElement para crear un objeto State.

createState() se usa para crear el estado relacionado con StatefulWidget , se puede llamar varias veces durante el ciclo de vida de StatefulWidget.

Tanto StatelessWidget como StatefulWidget se utilizan para combinar otros componentes y no tienen un RenderObject correspondiente.

StatelessWidget: uso sin estado;

StatefulWidget: con estado y variable;

StatelessWidget y StatefulWidget deben recordar escribir la interfaz de usuario que se usa con frecuencia. 

Estado

Una clase StatefulWidget corresponde a una clase State. State representa el estado que debe mantener el StatefulWidget correspondiente. La información de estado guardada en State permite:

1. Se puede leer sincrónicamente cuando se crea el widget.
2. Se puede cambiar durante el ciclo de vida del widget. Cuando se cambia el estado, puede llamar manualmente a su método setState() para notificar al marco Flutter que el estado ha cambiado. Después de que el marco Flutter reciba el mensaje, llamará a su método de compilación de nuevo para reconstruir el árbol de widgets Para lograr el propósito de actualizar la interfaz de usuario.

Hay dos propiedades de uso común en State:

1. widget, que representa la instancia de widget asociada con esta instancia de State, que se establece dinámicamente por el marco Flutter.
2. context, el BuildContext correspondiente al StatefulWidget, actúa igual que el BuildContext del StatelessWidget.

Ciclo de vida del estado: ver ejemplos oficiales

initState: se llamará cuando el widget se inserte en el árbol de widgets por primera vez. Para cada objeto de estado, el marco de trabajo de Flutter solo llamará a esta devolución de llamada una vez.

didChangeDependencies : se llama cuando cambian las dependencias del objeto State.

build: se utiliza principalmente para construir el subárbol de widgets.

didUpdateWidget: cuando se reconstruye el widget, el marco Flutter llamará a widget.canUpdate para detectar los nodos antiguos y nuevos en la misma posición en el árbol de widgets, y luego decidirá si actualizar.Si widget.canUpdate devuelve verdadero, esta devolución de llamada será llamado.

reensamblar: se llamará cuando se recargue en caliente (recarga en caliente), esta devolución de llamada nunca se llamará en el modo de liberación .

desactivar: esta devolución de llamada se llama cuando el objeto Estado se elimina del árbol.

dispose: se llama cuando el objeto State se elimina permanentemente del árbol; los recursos generalmente se liberan en esta devolución de llamada

 Obtener el objeto State en el árbol de widgets

Dado que la lógica específica de StatefulWidget está en su estado, muchas veces necesitamos obtener el objeto State correspondiente a StatefulWidget para llamar a algunos métodos.

Varias formas de obtener el objeto de estado

1. El método findAncestorStateOfType() del objeto de contexto;
   1. ScaffoldState _state = context.findAncestorStateOfType<ScaffoldState>(!);
   2. Obtenga el objeto State directamente a través del método estático: (ScaffoldState _state=Scaffold.of(context);)
2. por GlobalKey

   1. //定义一个globalKey, 由于GlobalKey要保持全局唯一性，我们使用静态变量存储
      static GlobalKey<ScaffoldState> _globalKey= GlobalKey();
      ...
      Scaffold(
          key: _globalKey , //设置key
          ...  
      )

      2. Obtenga el objeto State a través de GlobalKey

      _globalKey.currentState.openDrawer()

Nota: Usar GlobalKey es costoso, si hay otras opciones, debe intentar evitar usarla. Además, la misma GlobalKey debe ser única en todo el árbol de widgets y no se puede repetir.