【Flutter】Gestion de l'état de chargement dans Flutter

Introduction

Aujourd'hui, nous allons discuter de la façon de contrôler l'état de chargement dans Flutter.

Flutter, en tant que framework d'interface utilisateur efficace et concis, a été largement utilisé dans le monde entier. La gestion de l’état de chargement est un sujet apparemment simple, mais en réalité, elle a un impact énorme sur l’expérience utilisateur. Afficher correctement l'état de chargement peut rendre notre application plus fluide et éviter aux utilisateurs d'être confus et inquiets en attendant le chargement des données.

Si vous souhaitez en savoir plus sur Flutter et maîtriser davantage de compétences et de bonnes pratiques, j'ai une bonne nouvelle pour vous : nous avons une colonne Flutter complète -> Livret de démarrage Flutter Developer 101 qui vous attend. Vous y obtiendrez du matériel d'apprentissage Flutter complet et systématique, y compris des exemples de code détaillés et une analyse approfondie des concepts. Plus important encore, nos rubriques sont constamment mises à jour et améliorées, et le prix augmentera progressivement à mesure que le contenu s'enrichira. Alors inscrivez-vous maintenant et vous obtiendrez tout le contenu au meilleur prix. Maintenant, commençons l’étude d’aujourd’hui !

2. Gérer l'état de chargement dans Flutter

Dans Flutter, nous disposons de nombreuses façons de contrôler l’état de chargement. La méthode la plus simple consiste à utiliser Stateful Widget. Stateful Widget nous permet de restituer le widget lorsque son état change, ce qui est très utile pour contrôler l'état de chargement. Dans le même temps, nous pouvons également utiliser certaines bibliothèques de gestion d'état, telles que Provider ou Riverpod, pour nous aider à mieux gérer l'état.

3. Démontrer avec des exemples de code de logique métier spécifiques

D'accord, voyons comment contrôler l'état de chargement dans Flutter à travers un exemple de code de logique métier spécifique. Dans cet exemple, nous appellerons une API pour obtenir des données, puis afficherons les données. Pendant le processus de récupération des données, nous afficherons un indicateur de chargement.

class Example extends StatefulWidget {
    
    
  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
    
    
  bool _isLoading = false; // 控制 loading 状态的变量

  @override
  Widget build(BuildContext context) {
    
    
    return Scaffold(
      body: _isLoading 
          ? Center(child: CircularProgressIndicator()) // 如果正在加载，展示 loading 指示器
          : Center(child: Text('数据加载完成！')); // 否则展示其他内容
  }

  void fetchData() {
    
    
    setState(() {
    
    
      _isLoading = true; // 开始加载数据，设置 _isLoading 为 true
    });

    // 这里是调用 API 的逻辑，我们在这里用注释代替
    // ...

    setState(() {
    
    
      _isLoading = false; // 数据加载完成，设置 _isLoading 为 false
    });
  }
}

Dans cet exemple, nous créons un Stateful Widget et ajoutons une _isLoadingvariable à son état pour contrôler l'état de chargement. Lorsque nous appelons fetchDatala méthode pour obtenir les données, nous la définissons d'abord _isLoadingsur true, puis une fois les données chargées, nous _isLoadingla définissons sur false. De cette façon, nous pouvons _isLoadingcontrôler s'il faut afficher l'indicateur de chargement via des variables.

4. Problèmes courants et solutions

Nous pouvons rencontrer quelques problèmes lors de la gestion de l'état de chargement. Par exemple, comment gérer l'état de chargement lorsqu'un appel API échoue ou qu'une erreur réseau se produit ? Nous pouvons fetchDatarésoudre ce problème en ajoutant une logique de gestion des erreurs dans la méthode. Dans la partie logique de l'appel de l'API, nous pouvons ajouter une structure try-catch pour détecter les erreurs possibles, puis la définir _isLoadingsur false dans le bloc catch.

void fetchData() {
    
    
  setState(() {
    
    
    _isLoading = true; // 开始加载数据，设置 _isLoading 为 true
  });

  try {
    
    
    // 这里是调用 API 的逻辑，我们在这里用注释代替
    // ...
  } catch (e) {
    
    
    print(e); // 打印错误信息
  } finally {
    
    
    setState(() {
    
    
      _isLoading = false; // 无论成功或失败，数据加载完成后，设置 _isLoading 为 false
    });
  }
}

De cette façon, que l'appel API réussisse ou non, nous pouvons nous assurer _isLoadingqu'il sera défini sur false, empêchant ainsi l'affichage de l'indicateur de chargement.

V.Conclusion

Jusqu'à présent, nous avons appris comment contrôler l'état de chargement dans Flutter. Nous avons appris que contrôler l'état de chargement peut non seulement améliorer l'expérience utilisateur, mais également nous aider à mieux gérer les erreurs possibles. À travers un exemple simple, nous avons montré comment gérer l'état de chargement via Stateful Widget et la bibliothèque de gestion d'état.

Si vous êtes intéressé par Flutter et souhaitez en savoir plus, je voudrais vous recommander une excellente ressource : notre colonne Flutter->Flutter Developer 101 Getting Started Booklet . Vous y obtiendrez du matériel d'apprentissage Flutter complet et systématique, y compris des exemples de code détaillés et une analyse approfondie des concepts. Par exemple, savez-vous comment créer une application complète à l’aide de Flutter ? Dans notre rubrique, vous trouverez les réponses. Plus important encore, nos rubriques sont constamment mises à jour et améliorées, et le prix augmentera progressivement à mesure que le contenu s'enrichira. Alors inscrivez-vous maintenant et vous obtiendrez tout le contenu au meilleur prix. Continuons à explorer ensemble le monde de Flutter ! Si vous souhaitez en savoir plus, vous pouvez d'abord lire notre solution unique adaptée à vos besoins, Flutter Developer 101 Getting Started Booklet Column Guide .