Que fait le BuildContext dans Flutter ?

Question

Qu'est-ce que BuildContext et quelles informations en retirons-nous ?

https://docs.flutter.io/flutter/widgets/BuildContext-class.html n'est pas clair.

https://flutter.io/widgets-intro/#basic-widgets sur la 9ème instance du terme BuildContext Il y a un exemple, mais la manière dont il est utilisé n'est pas claire. Il fait partie d'un ensemble de code beaucoup plus vaste qui me perd, et j'ai donc du mal à comprendre ce qu'il faut faire pour que le système soit efficace. BuildContext est.

Quelqu'un peut-il expliquer cela en termes simples/très élémentaires ?

Answer 1

BuildContext est, comme son nom l'indique, le contexte dans lequel un widget spécifique est construit.

Si vous avez déjà utilisé React auparavant, ce contexte est assez similaire à celui de React (mais beaucoup plus facile à utiliser) ; avec quelques bonus.

D'une manière générale, il existe 2 cas d'utilisation du contexte :

• Interagir avec vos parents (obtenir/afficher des données principalement)
• Une fois rendu à l'écran, obtenez la taille et la position de votre écran.

Le deuxième point est plutôt rare. En revanche, le premier point est utilisé presque partout.

Par exemple, si vous voulez pousser une nouvelle route, vous ferez Navigator.of(context).pushNamed('myRoute') .

Notez le contexte ici. Il sera utilisé pour obtenir l'instance la plus proche de NavigatorState widget au-dessus dans l'arbre. Ensuite, appelez la méthode pushNamed sur cette instance.

---

Cool, mais quand est-ce que I vous voulez l'utiliser ?

BuildContext est vraiment utile lorsque vous voulez passer des données vers le bas. sans avoir à l'affecter manuellement aux configurations de chaque widget par exemple ; vous voudrez y accéder partout. Mais vous ne voulez pas le passer à chaque constructeur.

Vous pourriez potentiellement créer un global ou un singleton ; mais alors, lorsque les confs changent, vos widgets ne se reconstruisent pas automatiquement.

Dans ce cas, vous utilisez InheritedWidget . Avec lui, vous pouvez potentiellement écrire ce qui suit :

class Configuration extends InheritedWidget {
  final String myConf;

  const Configuration({this.myConf, Widget child}): super(child: child);

  @override
  bool updateShouldNotify(Configuration oldWidget) {
    return myConf != oldWidget.myConf;
  }
}

Et ensuite, utilisez-le de cette façon :

void main() {
  runApp(
    new Configuration(
      myConf: "Hello world",
      child: new MaterialApp(
        // usual stuff here
      ),
    ),
  );
}

Grâce à cela, maintenant partout à l'intérieur de votre application, vous pouvez accéder à ces configurations à l'aide de la fonction BuildContext . En faisant

final configuration = context.inheritFromWidgetOfExactType(Configuration);

Et ce qui est encore plus cool, c'est que todo les widgets qui appellent inheritFromWidgetOfExactType(Configuration) sera automatiquement reconstruit lorsque les configurations changeront.

C'est génial, non ?

Answer 2

BuildContext La classe n'est rien d'autre qu'une référence à l'emplacement d'un Widget dans l'arborescence de tous les Widgets qui sont construits.

Chaque widget Flutter possède un @override build() avec l'argument de BuildContext .

class CartItemWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {.....

Expliquer simplement est que le BuildContext est :

1. Un BuildContext n'appartient qu'à un seul widget.
2. Les objets BuildContext sont transmis aux fonctions WidgetBuilder.

Un BuildContext n'appartient qu'à un seul widget.

Si un widget 'A' a des widgets enfants, la fonction BuildContext du widget 'A' deviendra le BuildContext parent des enfants directs. BuildContexts .

En lisant ceci, il est clair que BuildContexts sont enchaînés et composent un arbre de BuildContexts (relation parents-enfants)

Si nous essayons maintenant d'illustrer la notion de BuildContext dans le diagramme précédent, nous obtenons (toujours comme une vue très simplifiée) où chaque couleur représente un BuildContext (sauf celui de MyApp, qui est différent) :

Les éléments suivants diagramme montre (une version simplifiée de) la séquence d'actions/appels liée à la création d'un widget avec état.

L'état du widget est indépendant des paramètres et pourtant il était reconstruit à chaque fois que les paramètres changeaient. Dans ce cas, il faut utiliser InheritedWidget

InheritedWidget est un type spécial de widget qui définit un contexte à la racine d'une sous-arborescence. Il peut fournir efficacement ce contexte à chaque widget de cette sous-arborescence. Le modèle d'accès semble familier aux développeurs de Flutter :

class MyInheritedWidget extends InheritedWidget {

MyInheritedWidget({
      Key key,
      @required Widget child,
      this.data,
   }): super(key: key, child: child);

   final data;

   static MyInheritedWidget of(BuildContext context) {
      return context.inheritFromWidgetOfExactType(MyInheritedWidget);
   }

   @override
   bool updateShouldNotify(MyInheritedWidget oldWidget) => data != oldWidget.data;
}

El static MyInheritedWidget of(BuildContext context) permet à tous les widgets enfants de récupérer l'instance de la méthode la plus proche MyInheritedWidget "qui englobe le contexte

Enfin, le updateShouldNotify est utilisée pour indiquer à la InheritedWidget si les notifications doivent être transmises à tous les widgets enfants (qui se sont inscrits/abonnés) si une modification est appliquée aux données.

pour plus d'informations

1. Contexte de construction
2. Widget,Etat,BuildContext,InheritedWidget
3. Héritage des widgets

Answer 3

qu'est-ce que l'objet/contexte BuildContext ?

Avant de connaître le BuildCotext, nous devons connaître l'objet Element.

Qu'est-ce que l'objet Élément

(note : En tant que développeur Flutter, nous n'avons jamais travaillé avec l'objet Element, mais nous avons travaillé avec un objet (connu sous le nom d'objet BuildContext) qui est similaire à l'objet Element).

L'objet Élément est le emplacement de construction du widget actuel.

Qu'entend-on réellement par "emplacement de construction" ?

1. lorsque le framework construit un objet widget en appelant son constructeur, il devra en conséquence créer un objet élément pour cet objet widget.

2. Et cet objet élémentaire représente l'emplacement de construction de ce widget.

3. Cet objet élémentaire possède de nombreuses méthodes d'instance utiles.

Qui utilise l'objet Element et ses méthodes ?

Ce sont 02 parties qui utilisent l'objet Élément et ses méthodes.

1. Framework (pour créer l'arbre des RenderObjects, etc.)
2. Développeurs (comme nous)

Qu'est-ce que l'objet BuildContext ?

Les objets BuildContext sont en fait des objets Element. L'interface BuildContext est utilisée pour décourager la manipulation directe des objets Element.

Alors BuildContext object = discouraged element object (qui contient moins de méthodes d'instance que l'objet Element d'origine).

Pourquoi le cadre a découragé l'objet Élément et nous l'a transmis ?

Parce que l'objet Element a des méthodes d'instance qui ne doivent être utilisées que par le cadre lui-même. Mais que se passe-t-il lorsque nous accédons à ces méthodes par nous-mêmes, c'est quelque chose qui ne devrait pas être fait. Donc c'est la raison pour laquelle le framework a déconseillé l'objet Element et l'a passé à nous.

---

---

Ok. Maintenant, parlons du sujet

Que fait l'objet BuildContext dans Flutter ?

L'objet BuildContext possède plusieurs méthodes utiles pour effectuer facilement certaines tâches qui doivent être réalisées dans l'arborescence des widgets.

1. findAncestorWidgetOfExactType().

   Retourne le widget ancêtre le plus proche du type T donné.

2. findAncestorStateOfType().

   Renvoie l'objet State de l'ancêtre StatefulWidget le plus proche.

3. dependOnInheritedWidgetOfExactType().

   Obtient le widget le plus proche du type T donné, qui doit être le type d'une sous-classe InheritedWidget concrète, et enregistre ce contexte de construction avec ce widget de sorte que lorsque ce widget change. [Utilisé par le paquet Provider]

Les méthodes ci-dessus sont les méthodes d'instance les plus utilisées de l'objet BuildContext si vous voulez voir toutes les méthodes de cet objet BuildContext visitez ceci LIEN + voir la réponse de @remi Rousselot.