Flutter状态管理插件provider12的使用

Flutter状态管理插件provider12的使用

引言

本文将详细介绍如何在Flutter应用中使用状态管理插件provider12。我们将通过一个完整的示例来展示如何配置和使用provider来管理状态。

简介

provider是一个用于简化状态管理的库，它通过包装InheritedWidget来实现。使用provider可以简化资源分配和清理、懒加载、减少样板代码，并且可以更好地与开发工具集成。

示例代码

我们首先来看一个简单的示例，该示例展示了如何使用provider来管理一个计数器的状态。

项目结构

example/
├── lib/
│   ├── main.dart

main.dart文件

// ignore_for_file: public_member_api_docs, lines_longer_than_80_chars
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider12/provider.dart';

/// 这是一个使用provider + [ChangeNotifier]重新实现的默认Flutter应用程序。

void main() {
  runApp(
    /// 提供者位于[MyApp]之上，而不是其中，这样测试可以使用[MyApp]并模拟提供者
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Counter()),
      ],
      child: const MyApp(),
    ),
  );
}

/// 混入[DiagnosticableTreeMixin]以在devtools中读取其所有属性
// ignore: prefer_mixin
class Counter with ChangeNotifier, DiagnosticableTreeMixin {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
    notifyListeners();
  }

  /// 使`Counter`在devtools中可读，列出所有属性
  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    super.debugFillProperties(properties);
    properties.add(IntProperty('count', count));
  }
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('示例'),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text('你已经按了按钮次数：'),

            /// 作为单独的部件提取出来以进行性能优化。
            /// 作为一个单独的部件，它将独立于[MyHomePage]重建。
            Count(),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        key: const Key('increment_floatingActionButton'),

        /// 调用`context.read`而不是`context.watch`，以便当[Counter]更改时不重建
        onPressed: () => context.read<Counter>().increment(),
        tooltip: '增加',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class Count extends StatelessWidget {
  const Count({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Text(
      /// 调用`context.watch`以使[Count]在[Counter]更改时重建
      '${context.watch<Counter>().count}',
      key: const Key('counterState'),
      style: Theme.of(context).textTheme.headlineMedium,
    );
  }
}

详细说明

1. 创建计数器类：

   class Counter with ChangeNotifier, DiagnosticableTreeMixin {
     int _count = 0;
   
     int get count => _count;
   
     void increment() {
       _count++;
       notifyListeners();
     }
   
     @override
     void debugFillProperties(DiagnosticPropertiesBuilder properties) {
       super.debugFillProperties(properties);
       properties.add(IntProperty('count', count));
     }
   }
   

2. 在main函数中配置MultiProvider：

   void main() {
     runApp(
       MultiProvider(
         providers: [
           ChangeNotifierProvider(create: (_) => Counter()),
         ],
         child: const MyApp(),
       ),
     );
   }
   

3. 使用Context读取状态：

   class MyHomePage extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         body: Center(
           child: Column(
             children: const [
               Text('你已经按了按钮次数：'),
               Count(),
             ],
           ),
         ),
         floatingActionButton: FloatingActionButton(
           onPressed: () => context.read<Counter>().increment(),
           tooltip: '增加',
           child: const Icon(Icons.add),
         ),
       );
     }
   }
   
   class Count extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return Text(
         '${context.watch<Counter>().count}',
         style: Theme.of(context).textTheme.headlineMedium,
       );
     }
   }