Flutter widget ciclo de vida detallado

Prólogo

Al igual que otros marcos de vista, como Android Activity, el widget de vista en flutter también tiene un ciclo de vida, y la función de devolución de llamada del ciclo de vida se presenta en el Estado. Comprender el ciclo de vida del aleteo es muy importante para nosotros para escribir un control razonable. El ciclo de vida del Estado componente se organiza como se muestra a continuación:


 
Ciclo de vida del widget

Se puede ver aproximadamente como tres etapas

  • Inicialización (insertar árbol de representación)
  • Cambio de estado (existe en el árbol de renderizado)
  • Destruido (eliminado de especies de árboles de render)

Constructor

Esta función no pertenece al ciclo de vida, porque la propiedad del widget del Estado está vacía en este momento, si desea acceder a la propiedad del widget en el constructor, no funcionará. Pero el constructor debe llamarse primero.

initState

/// Se llama cuando este objeto se inserta en el árbol Se llama cuando se inserta en el
árbol de representación, esta función solo se llama una vez en el ciclo de vida. Aquí puede hacer un trabajo de inicialización, como inicializar variables de estado.

didChangeDependencies

/// Se llama cuando cambia una dependencia de este objeto [Estado].

 

 
didChangeDependencies

Esta función se llamará inmediatamente después de initState y puede llamar a BuildContext.inheritFromWidgetOfExactType, entonces, ¿cuál es el escenario de uso de BuildContext.inheritFromWidgetOfExactType? El escenario de aplicación más clásico es

 

new DefaultTabController(length: 3, child: new TabBar( tabs: [ "主页","订单","我的" ] .map( (data)=>new Text(data) ).toList(), 

TabBar originalmente necesitaba definir un TabController, pero no es necesario definir TabContrller configurando una capa de DefaultTabController afuera, vea el código fuente:

@override
  void didChangeDependencies() { super.didChangeDependencies(); _updateTabController(); _initIndicatorPainter(); } void _updateTabController() { final TabController newController = widget.controller ?? DefaultTabController.of(context); 

Tenga en cuenta aquí DefaultTabController.of (contexto)

 static TabController of(BuildContext context) { final _TabControllerScope scope = context.inheritFromWidgetOfExactType(_TabControllerScope); return scope?.controller; } 

De hecho, se llama BuildContext.inheritFromWidgetOfExactType, lo que significa que en didChangeDependencies, puede obtener datos a través de los componentes.

didUpdateWidget

/// Se llama cada vez que cambia la configuración del widget.

 

 
didUpdateWidget

Cuando cambia el estado del componente, se llama a didUpdateWidget, por ejemplo, se llama a setState.
De hecho, el marco de flutter creará un nuevo Widget, vinculará este Estado y pasará el viejo Widget en esta función.
Esta función se usa generalmente para comparar widgets nuevos y antiguos, ver qué atributos han cambiado y hacer algunos ajustes en el estado.
Debe tenerse en cuenta que cuando se trata de cambios de controlador, debe eliminar el antiguo oyente del controlador y crear un nuevo oyente del controlador en esta función.
 
TabBar_didUpdateWidget

 
_updateTabController

 

desactivar

/// Se llama cuando este objeto se elimina del árbol.

Esta función se llamará antes de desechar.

disponer

/// Se llama cuando este objeto se elimina del árbol de forma permanente.

Una vez en esta etapa, el componente será destruido, esta función generalmente eliminará al oyente y limpiará el entorno.
TabBar:


 
disponer

Escena real

Supongamos que saltamos de la página A a la página B. ¿Cuál será el ciclo de vida de las páginas A y B?

La página B ingresa al estado de inicialización y ejecuta 4 funciones en secuencia: constructor> initState> didChangeDependencies> Widget build, en este punto la página se carga y entra al estado de ejecución.
En este momento, la página A ejecuta la función desactivar> construir en secuencia. Tenga en cuenta que la página A no está desinstalada en este momento.

Luego asumimos que solo hay un botón en la página B. Al hacer clic en el botón en la página B para cambiar el texto del botón, se ejecutará el método de compilación del widget (en teoría, didUpdateWidget también debería ejecutarse, pero no lo tengo aquí).

En este momento, hacemos clic en el botón Atrás para regresar de la página B a la página A.
La página A se muestra nuevamente y la página B comienza a desinstalarse.
Luego, A ejecuta desactivar> construir primero, luego la página B se ejecuta secuencialmente: desactivar> desechar.
En este momento, la página A ingresa al estado de ejecución y la página B se elimina.

Resumir

Etapa Llamadas Ya sea para soportar setState
Constructor 1 No
initState 1 No válido (usar setState es lo mismo que no usar)
didChangeDependencies > = 1 Inválido
didUpdateWidget > = 1 Si
desactivar > = 1 No
disponer 1 No


Autor: ershixiong
enlace: https: //www.jianshu.com/p/762bb2b7fa00
Fuente: libros de Jane
tienen derechos de autor por el autor. Para la reproducción comercial, comuníquese con el autor para obtener autorización, y para la reproducción no comercial, indique la fuente.

Supongo que te gusta

Origin www.cnblogs.com/xiaochii/p/12709823.html
Recomendado
Clasificación