Flutter状态管理-04-Provider

Provider 是Google推荐的状态管理工具之一 pub官网：pub.dev/packages/pr…

添加依赖

dependencies:
  provider: ^4.3.2+1

然后 ：flutter pub get

使用时几个重要的点

• 定义一个类，让其with ChangeNotifier，在该类内是业务数据，和对业务数据进行的操作。
• MutiProvider 要成为根节点，也就是放到runApp内。并且要把自定义的类放到Multiprovider内。
• 在widget内操作数据时，context.read().xxx(); xxx代表业务方法
• 在widget内读取数据时，context.watch().data; data代表业务数据 这样，就把业务类，数据读取和数据操作完全分离开了。

示例

还是以加数字为例

• 定义业务逻辑类Counter

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

_count：代表业务数据 int get count => _count： 代表对业务数据的访问 increment(): 代表对业务数据的操作

• 将Provider整体注册到根节点，并将自定义的业务数据类Counter放到根节点下

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

• 在widget中读取业务数据,context.watch().count.toString();

class CountWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var str = context.watch<Counter>().count.toString();
    return Text(
      str
    );
  }

• 在widget中操作业务数据, context.read().increment();

 floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          context.read<Counter>().increment();
        },
      )

完整代码

• main.dart

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
//      home: MyHomePage(title: 'Flutter Demo Home Page'),
      home: ProviderTest(),
    );
  }
}

• provider_test.dart

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
class ProviderTest extends StatefulWidget {
  @override
  _ProviderTestState createState() => _ProviderTestState();
}

class _ProviderTestState extends State<ProviderTest> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Provider"),
      ),
      body: Center(
        child: CountWidget(),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          context.read<Counter>().increment();
        },
      )
    );
  }
}


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

class CountWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var str = context.watch<Counter>().count.toString();
    return Text(
      str
    );
  }
}