Partage de technologie

Plusieurs façons pour Flutter d'implémenter une actualisation partielle

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Table des matières

Préface

1. L’importance du rafraîchissement local

1. Concept

2. Importance

2. Plusieurs façons de mettre en œuvre un rafraîchissement partiel

1. Utilisez la méthode setState pour une actualisation partielle

2. Utilisez StatefulWidget et InheritedWidget pour actualiser partiellement l'interface utilisateur

3.ValueNotifier et ValueListenableBuilder

4.StreamBuilder

5. Fournisseur

6.GetX

7. Utilisez GlobalKey

Préface

Dans Flutter, la gestion de l'état fait référence à la manière de gérer et de mettre à jour l'état des données dans l'application, ainsi que de mettre à jour l'interface utilisateur en fonction des changements d'état. Une gestion efficace de l'état peut aider les développeurs à créer des applications plus efficaces et plus maintenables.

setState est la méthode de gestion d'état la plus basique dans Flutter. Lorsque l'état change, le framework sera informé de la reconstruction de l'interface utilisateur. Bien sûr, nous savons que lorsque nous appelons la méthode setState, la page sera redessinée. Lorsque la mise en page est plus complexe, il suffit parfois de mettre à jour une interface utilisateur distincte. À ce stade, si nous utilisons la méthode setState, elle aura. de meilleures performances. Consommer pour redessiner l'interface utilisateur de la page actuelle.

Alors, quelles méthodes existe-t-il dans Flutter pour actualiser partiellement l'interface utilisateur ? Ce blog répertorie plusieurs façons permettant à Flutter d'implémenter une actualisation partielle.

1. L’importance du rafraîchissement local

1. Concept

L'actualisation partielle fait référence à l'actualisation d'une seule partie de l'interface, et non de la page entière. Cela améliore les performances et l’expérience utilisateur.

2. Importance

  1. Évitez les redessins inutiles et améliorez les performances
  2. Offrir une expérience utilisateur plus fluide
  3. Réduire la consommation de ressources

2. Plusieurs façons de mettre en œuvre un rafraîchissement partiel

1. Utilisez la méthode setState pour une actualisation partielle

setState est la méthode de gestion d'état la plus couramment utilisée dans Flutter. Elle est utilisée pour notifier le framework des changements d'état, conduisant à la reconstruction de l'interface.

Lorsque nous créons un projet Flutter, l'exemple du timer généré par le système par défaut est l'exemple du rafraîchissement partiel setState.

  1. import 'package:flutter/material.dart';
  2.  
  3. class SetStateMainPage extends StatefulWidget {
  4.   final String title;
  5.   const SetStateMainPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<SetStateMainPage> createState() => _SetStateMainPageMainPageState();
  9. }
  10.  
  11. class _SetStateMainPageMainPageState extends State<SetStateMainPage> {
  12.   int _count = 0;
  13.  
  14.   @override
  15.   Widget build(BuildContext context) {
  16.     return Scaffold(
  17.       appBar: AppBar(
  18.         title: Text(widget.title),
  19.       ),
  20.       body: Center(
  21.         child: Text(
  22.           '您点击了$_count次',
  23.           style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  24.         ),
  25.       ),
  26.       floatingActionButton: FloatingActionButton(
  27.           child: const Icon(Icons.add),
  28.           onPressed: () {
  29.             setState(() {
  30.               _count++;
  31.             });
  32.           },
  33.       )
  34.     );
  35.   }
  36. }

Figure 1. Actualisation partielle setState

Lorsque la page est relativement simple, vous pouvez directement utiliser la méthode setState pour actualiser partiellement l'interface utilisateur.

Scénarios d'utilisation : changements d'état simples, tels que le nombre de clics sur les boutons, l'état du commutateur, etc.

Précautions:

  1. Des appels fréquents à setState peuvent entraîner des problèmes de performances
  2. Évitez d'appeler setState dans la méthode build

2. Utilisez StatefulWidget et InheritedWidget pour actualiser partiellement l'interface utilisateur

        StatefulWidget est un composant avec état,InheritedWidget Utilisé pour partager des données dans l'arborescence des composants.

Lorsque nous avons besoin de partager des données, nous pouvons envisager StatefulWidget et InheritedWidget pour actualiser partiellement l'interface utilisateur.

Le code complet est le suivant :

Figure 2. Actualiser l'interface utilisateur en partageant des données

  1. import 'package:flutter/material.dart';
  2.  
  3. class MyInheritedWidget extends InheritedWidget {
  4.   final int counter;
  5.   const MyInheritedWidget({
  6.     super.key,
  7.     required this.counter,
  8.     required super.child,
  9.   });
  10.   @override
  11.   bool updateShouldNotify(covariant InheritedWidget oldWidget) {
  12.     return true;
  13.   }
  14.   static MyInheritedWidget? of(BuildContext context) {
  15.     return context.dependOnInheritedWidgetOfExactType<MyInheritedWidget>();
  16.   }
  17. }
  18.  
  19. class InheritedWidgetPage extends StatefulWidget {
  20.   final String title;
  21.   const InheritedWidgetPage({super.key, required this.title});
  22.  
  23.   @override
  24.   State<InheritedWidgetPage> createState() => _InheritedWidgetPageState();
  25. }
  26.  
  27. class _InheritedWidgetPageState extends State<InheritedWidgetPage> {
  28.   int counter = 0;
  29.   void _incrementCounter() {
  30.     setState(() {
  31.       counter++;
  32.     });
  33.   }
  34.  
  35.   @override
  36.   Widget build(BuildContext context) {
  37.     return MyInheritedWidget(
  38.       counter: counter,
  39.       child: Scaffold(
  40.         appBar: AppBar(
  41.           title: Text(widget.title),
  42.         ),
  43.         body: Center(child: Column(
  44.           children: [
  45.             const Divider(),
  46.             const CounterDisplay(),
  47.             const SizedBox(height: 20),
  48.             ElevatedButton(
  49.               onPressed: _incrementCounter,
  50.               child: const Text('add'),
  51.             ),
  52.           ],
  53.         ),),
  54.       ),
  55.     );
  56.   }
  57. }
  58.  
  59. class CounterDisplay extends StatelessWidget {
  60.   const CounterDisplay({super.key});
  61.   @override
  62.   Widget build(BuildContext context) {
  63.     final inheritedWidget = MyInheritedWidget.of(context);
  64.     return Text('点击次数: ${inheritedWidget?.counter}');
  65.   }
  66. }

Les principaux scénarios d'utilisation de cette méthode sont les suivants : lors du partage de l'état dans l'arborescence des composants, comme le thème, les paramètres de langue, etc.

L'avantage est que le partage des données est pratique et que l'introduction du code

L’inconvénient est qu’il est compliqué à utiliser et que les performances peuvent être affectées.

3.ValueNotifier et ValueListenableBuilder

        ValueNotifier C'est un outil simple de gestion de statut,ValueListenableBuilder pour la surveillanceValueNotifier Le changement.

L'utilisation est également très simple :

1. Instancier ValueNotifier

2. L'objet Widget à surveiller est encapsulé avec ValueListenableBuilder

3. Comment modifier les données déclenchées par un événement

Par rapport aux méthodes précédentes, cette méthode est très simple et facile à utiliser, et ses performances sont également très élevées.

Inconvénients : ne peut gérer que de simples changements d’état

Le code complet est le suivant :

  1. import 'package:flutter/material.dart';
  2.  
  3. class ValueNotifierPage extends StatefulWidget {
  4.   final String title;
  5.   const ValueNotifierPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<ValueNotifierPage> createState() => _ValueNotifierPageState();
  9. }
  10.  
  11. class _ValueNotifierPageState extends State<ValueNotifierPage> {
  12.  
  13.   final ValueNotifier<int> _counter = ValueNotifier<int>(0);
  14.  
  15.   @override
  16.   Widget build(BuildContext context) {
  17.     return Scaffold(
  18.         appBar: AppBar(
  19.           title: Text(widget.title),
  20.         ),
  21.         body: Center(
  22.           child: ValueListenableBuilder<int>(
  23.             valueListenable: _counter,
  24.             builder: (context, value, child) {
  25.               return Text(
  26.                 '您点击了$value次',
  27.                 style: const TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  28.               );
  29.             },
  30.           )
  31.         ),
  32.         floatingActionButton: FloatingActionButton(
  33.           child: const Icon(Icons.add),
  34.           onPressed: () {
  35.             _counter.value ++;
  36.           },
  37.         )
  38.     );
  39.   }
  40. }

4.StreamBuilder

Stream est un objet utilisé pour diffuser des événements asynchrones, et les événements peuvent être envoyés via StreamController. Lorsque vous devez actualiser l'interface utilisateur, vous pouvez envoyer un événement au Stream, puis utiliser StreamBuilder pour écouter le Stream. Lorsqu'un nouvel événement est reçu, StreamBuilder reconstruira automatiquement l'interface utilisateur. Cette méthode convient aux situations dans lesquelles plusieurs événements asynchrones doivent être surveillés.

Lorsque nous devons traiter des flux de données asynchrones, tels que des requêtes réseau, des données en temps réel, etc., nous pouvons envisager d'utiliser StreamBuilder. Par exemple, dans l'exemple suivant, nous avons écrit une méthode asynchrone qui simule une requête réseau. Lorsque la requête réseau ne renvoie pas le résultat correct, nous pouvons charger la barre de progression.

L'avantage de cette méthode est qu'elle permet de contrôler plus précisément les requêtes asynchrones, comme l'état des requêtes réseau, etc. Cependant, Dior est plus complexe et peut nécessiter plus de code.

Le code complet est le suivant :

  1. import 'dart:async';
  2. import 'package:flutter/material.dart';
  3.  
  4. class StreamBuilderRefreshUIPage extends StatefulWidget {
  5.   final String title;
  6.   const StreamBuilderRefreshUIPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<StreamBuilderRefreshUIPage> createState() =>
  10.       _StreamBuilderRefreshUIPageState();
  11. }
  12.  
  13. class _StreamBuilderRefreshUIPageState extends State<StreamBuilderRefreshUIPage> {
  14.   late Future<String> _data;
  15.  
  16.   Future<String> fetchData() async {
  17.     // 模拟网络请求延迟
  18.     await Future.delayed(const Duration(seconds: 2));
  19.     // 返回模拟数据
  20.     return 'Hello, Flutter!';
  21.   }
  22.  
  23.   @override
  24.   void initState() {
  25.     // TODO: implement initState
  26.     super.initState();
  27.     _data = fetchData();
  28.   }
  29.  
  30.   @override
  31.   Widget build(BuildContext context) {
  32.     return Scaffold(
  33.       appBar: AppBar(
  34.         title: Text(widget.title),
  35.       ),
  36.       body: Center(
  37.         child: FutureBuilder<String>(
  38.           future: _data,
  39.           builder: (context, snapshot) {
  40.             if (snapshot.connectionState == ConnectionState.waiting) {
  41.               return const CircularProgressIndicator();
  42.             } else if (snapshot.hasError) {
  43.               return Text('Error: ${snapshot.error}');
  44.             } else {
  45.               return Text('Data: ${snapshot.data}');
  46.             }
  47.           },
  48.         ),
  49.       ),
  50.       floatingActionButton: FloatingActionButton(
  51.         onPressed: fetchData,
  52.         tooltip: 'Increment',
  53.         child: const Icon(Icons.add),
  54.       ),
  55.     );
  56.   }
  57. }

5. Fournisseur

       Provider Il s'agit d'une solution de gestion d'état recommandée par Flutter.Consumer Utilisé pour lire et surveiller l’état.

Prenons également la minuterie comme exemple.

1. Nous importons d’abord le fournisseur.

fournisseur: ^6.1.2

2. Personnalisez la classe ChangeNotifier.

ChangeNotifier est une classe simple du SDK Flutter. Il est utilisé pour envoyer des notifications aux auditeurs. En d’autres termes, s’il est défini comme ChangeNotifier, vous pouvez vous abonner à ses changements d’état. (Ceci est similaire au modèle d'observateur familier).

Dans le code que nous voulons implémenter, il y a deux variables _counter1 et _counter2. Le code est défini comme suit :

  1. class CounterModel extends ChangeNotifier {
  2.   int _counter1 = 0;
  3.   int _counter2 = 0;
  4.   void addCounter1(){
  5.     debugPrint('counter:$_counter1');
  6.     _counter1 += 1;
  7.     notifyListeners();
  8.   }
  9.   void addCounter2(){
  10.     debugPrint('counter:$_counter2');
  11.     _counter2 += 1;
  12.     notifyListeners();
  13.   }
  14. }

3. Utilisez Customer pour envelopper le widget que nous souhaitons actualiser

  1.             Consumer<CounterModel>(
  2.               builder: (context, counterModel, child) {
  3.                 return Row(
  4.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  5.                   children: [
  6.                     Text('计数器1个数: ${counterModel._counter1}'),
  7.                     ElevatedButton(onPressed: (){
  8.                       counterModel.addCounter1();
  9.                     }, child: const Icon(Icons.add),),
  10.                   ],
  11.                 );
  12.               },
  13.             ),

4. Le code complet est le suivant :

  1. import 'package:flutter/material.dart';
  2. import 'package:provider/provider.dart';
  3.  
  4. class ProviderRefreshPage extends StatefulWidget {
  5.   final String title;
  6.   const ProviderRefreshPage({super.key, required this.title});
  7.  
  8.   @override
  9.   State<ProviderRefreshPage> createState() => _ProviderRefreshPageState();
  10. }
  11.  
  12. class CounterModel extends ChangeNotifier {
  13.   int _counter1 = 0;
  14.   int _counter2 = 0;
  15.   void addCounter1(){
  16.     debugPrint('counter:$_counter1');
  17.     _counter1 += 1;
  18.     notifyListeners();
  19.   }
  20.   void addCounter2(){
  21.     debugPrint('counter:$_counter2');
  22.     _counter2 += 1;
  23.     notifyListeners();
  24.   }
  25. }
  26.  
  27. class _ProviderRefreshPageState extends State<ProviderRefreshPage> {
  28.  
  29.   @override
  30.   Widget build(BuildContext context) {
  31.     return Scaffold(
  32.       appBar: AppBar(
  33.         title: Text(widget.title),
  34.       ),
  35.       body: Center(
  36.         child: Column(
  37.           mainAxisAlignment: MainAxisAlignment.start,
  38.           children: <Widget>[
  39.             const SizedBox(height: 10,), // 添加一些间距
  40.             const Divider(),
  41.             const Text('计数器实例',style: TextStyle(fontSize: 12,fontWeight: FontWeight.bold),),
  42.             Consumer<CounterModel>(
  43.               builder: (context, counterModel, child) {
  44.                 return Row(
  45.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  46.                   children: [
  47.                     Text('计数器1个数: ${counterModel._counter1}'),
  48.                     ElevatedButton(onPressed: (){
  49.                       counterModel.addCounter1();
  50.                     }, child: const Icon(Icons.add),),
  51.                   ],
  52.                 );
  53.               },
  54.             ),
  55.  
  56.             Consumer<CounterModel>(
  57.               builder: (context, counterModel, child) {
  58.                 return Row(
  59.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  60.                   children: [
  61.                     Text('计数器1个数: ${counterModel._counter2}'),
  62.                     ElevatedButton(onPressed: (){
  63.                       counterModel.addCounter2();
  64.                     }, child: const Icon(Icons.add),),
  65.                   ],
  66.                 );
  67.               },
  68.             ),
  69.             const Divider(height: 20,),
  70.           ],
  71.         ),
  72.       ),
  73.     );
  74.   }
  75. }

6.GetX

Nous pouvons également utiliser GetX pour implémenter une actualisation partielle de l'interface utilisateur.

Installez d'abord GetX :

get: ^4.6.6

Ensuite, nous encapsulons les variables dans GetxController.

  1. class CounterManagerController extends GetxController {
  2.   final counter1 = 0.obs;
  3.   final counter2 = 0.obs;
  4.   void incrementCount1() {
  5.     counter1.value++;
  6.   }
  7.   void incrementCount2() {
  8.     counter2.value++;
  9.   }
  10. }

Utilisez ensuite Obx pour envelopper le widget qui doit afficher la logique.

Obx(()=&gt; Text('Numéro du compteur 1 : ${controller.counter2.value}'))

Le code complet est le suivant :

  1. import 'package:flutter/material.dart';
  2. import 'package:get/get.dart';
  3.  
  4.  
  5. class CounterManagerController extends GetxController {
  6.   final counter1 = 0.obs;
  7.   final counter2 = 0.obs;
  8.   void incrementCount1() {
  9.     counter1.value++;
  10.   }
  11.   void incrementCount2() {
  12.     counter2.value++;
  13.   }
  14. }
  15.  
  16. class GetXRefreshUIPage extends StatelessWidget {
  17.   final String title;
  18.   const GetXRefreshUIPage({super.key, required this.title});
  19.  
  20.   @override
  21.   Widget build(BuildContext context) {
  22.     final CounterManagerController controller = Get.put(CounterManagerController());
  23.     return Scaffold(
  24.       appBar: AppBar(
  25.         title: Text(title),
  26.       ),
  27.       body: Center(
  28.         child: Column(
  29.           mainAxisAlignment: MainAxisAlignment.start,
  30.           children: <Widget>[
  31.             const SizedBox(
  32.               height: 10,
  33.             ), // 添加一些间距
  34.             const Divider(),
  35.             const Text(
  36.               '计数器实例',
  37.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  38.             ),
  39.             Row(
  40.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  41.               children: [
  42.                 Obx(()=> Text('计数器1个数: ${controller.counter1.value}')),
  43.                 ElevatedButton(
  44.                   onPressed: () {
  45.                     controller.incrementCount1();
  46.                   },
  47.                   child: const Icon(Icons.add),
  48.                 ),
  49.               ],
  50.             ),
  51.             Row(
  52.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  53.               children: [
  54.                 Obx(()=> Text('计数器1个数: ${controller.counter2.value}')),
  55.                 ElevatedButton(
  56.                   onPressed: () {
  57.                     controller.incrementCount2();
  58.                   },
  59.                   child: const Icon(Icons.add),
  60.                 ),
  61.               ],
  62.             ),
  63.             const Divider(
  64.               height: 20,
  65.             ),
  66.           ],
  67.         ),
  68.       ),
  69.     );
  70.   }
  71. }

Bien sûr, il existe plusieurs autres façons d'implémenter une actualisation partielle dans GetX. Vous pouvez consulter sa documentation. Voici juste une idée de mise en œuvre.

7. Utilisez GlobalKey

Les trois méthodes d'implémentation ci-dessus sont toutes implémentées via le framework. Si vous ne souhaitez pas importer ce framework, nous pouvons utiliser GlobalKey pour implémenter la fonction d'actualisation partielle de l'interface utilisateur.

Une clé unique dans toute l'application GlobalKey identifie de manière unique les éléments GlobalKey permet d'accéder aux éléments associés, tels que.BuildContext .pourStatefulWidgets, GlobalKey fournit égalementStateAccéder.

Dans notre démo de minuterie, si nous actualisons partiellement l'interface utilisateur via GlobalKey, nous retirons d'abord le widget à actualiser partiellement et l'encapsulons dans un composant distinct.

Le code complet est le suivant. Nous encapsulons le widget pour qu'il soit partiellement actualisé et fournissons une interface pour actualiser les données internes, onPressed.

  1. class CounterText extends StatefulWidget {
  2.   const CounterText(Key key) : super(key: key);
  3.   @override
  4.   State<StatefulWidget> createState() {
  5.     return CounterTextState();
  6.   }
  7. }
  8.  
  9. class CounterTextState extends State<CounterText> {
  10.   String _text="0";
  11.  
  12.   @override
  13.   Widget build(BuildContext context) {
  14.     return Center(
  15.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  16.     );
  17.   }
  18.   void onPressed(int count) {
  19.     setState(() {
  20.       _text = count.toString();
  21.     });
  22.   }
  23. }

Instanciez ensuite GlobaKey dans notre interface principale :

  1.   int _count   = 0;
  2.   int _count2  = 0;
  3.   GlobalKey<CounterTextState> textKey = GlobalKey();
  4.   GlobalKey<CounterTextState> textKey2 = GlobalKey();

Dans le cas où l'interface utilisateur doit être actualisée, appelez l'interface fournie à l'étape précédente via GlobalKey et actualisez.

Le code complet est le suivant :

  1. import 'package:flutter/material.dart';
  2.  
  3. class GlobalKeyRefreshPage extends StatefulWidget {
  4.   final String title;
  5.   const GlobalKeyRefreshPage({super.key, required this.title});
  6.  
  7.   @override
  8.   State<GlobalKeyRefreshPage> createState() => _GlobalKeyRefreshPageState();
  9. }
  10.  
  11. class _GlobalKeyRefreshPageState extends State<GlobalKeyRefreshPage> {
  12.   int _count   = 0;
  13.   int _count2  = 0;
  14. //包裹你定义的需要更新的weight
  15.   GlobalKey<CounterTextState> textKey = GlobalKey();
  16.   GlobalKey<CounterTextState> textKey2 = GlobalKey();
  17.  
  18.   @override
  19.   Widget build(BuildContext context) {
  20.     return Scaffold(
  21.       appBar: AppBar(
  22.         title:  Text(widget.title),
  23.       ),
  24.       body: Center(
  25.         child: Column(
  26.           mainAxisAlignment: MainAxisAlignment.start,
  27.           children: <Widget>[
  28.             const SizedBox(
  29.               height: 10,
  30.             ), // 添加一些间距
  31.             const Divider(),
  32.             const Text(
  33.               '计数器实例',
  34.               style: TextStyle(fontSize: 12, fontWeight: FontWeight.bold),
  35.             ),
  36.             Row(
  37.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  38.               children: [
  39.                 CounterText(textKey),
  40.                 ElevatedButton(
  41.                   onPressed: () {
  42.                     _count++;
  43.                     textKey.currentState?.onPressed(_count);
  44.                   },
  45.                   child: const Icon(Icons.add),
  46.                 ),
  47.               ],
  48.             ),
  49.             Row(
  50.               mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  51.               children: [
  52.                 CounterText(textKey2),
  53.                 ElevatedButton(
  54.                   onPressed: () {
  55.                     _count2++;
  56.                     textKey2.currentState?.onPressed(_count2);
  57.                   },
  58.                   child: const Icon(Icons.add),
  59.                 ),
  60.               ],
  61.             ),
  62.             const Divider(
  63.               height: 20,
  64.             ),
  65.           ],
  66.         ),
  67.       ),
  68.     );
  69.   }
  70. }
  71.  
  72.  
  73. class CounterText extends StatefulWidget {
  74.   const CounterText(Key key) : super(key: key);
  75.   @override
  76.   State<StatefulWidget> createState() {
  77.     return CounterTextState();
  78.   }
  79. }
  80.  
  81. class CounterTextState extends State<CounterText> {
  82.   String _text="0";
  83.  
  84.   @override
  85.   Widget build(BuildContext context) {
  86.     return Center(
  87.       child: Text(_text,style: const TextStyle(fontSize: 20),),
  88.     );
  89.   }
  90.   void onPressed(int count) {
  91.     setState(() {
  92.       _text = count.toString();
  93.     });
  94.   }
  95. }

Profil personnel

Il se consacre à la recherche technologique depuis plus de 30 ans et maîtrise divers langages tels que java, linux, javascript, php, css, etc. Il a apporté de nombreuses contributions dans le domaine de l'open source. station de documentation pour les développeurs pour partager certains problèmes de développement technologique pour référence future.

mes coordonnées

Mail