• 官方推薦的全局狀態(tài)管理工具
  https://pub.dev/packages?q=provider

1. 使用流程

1. pubspec.yaml導入工具包并Pub get
2. 創(chuàng)建provider數(shù)據(jù)模型類

• 普通數(shù)據(jù)模型UserModel
• 創(chuàng)建provider模型

注：
創(chuàng)建模型添加變量后生成get和set方法
要在需要監(jiān)聽的方法最后調(diào)用notifyListeners()添加監(jiān)聽

import 'package:flutter/foundation.dart'
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
//注：
// 模型層添加變量
// 生成getter 和 setter方法 （選中類名快捷鍵cmd+n)
// set方法中添加監(jiān)聽
class TestProviderModel with ChangeNotifier,DiagnosticableTreeMixin{
  int _number = 0;
  int get number => _number;
  set number(int value) {
    _number = value;
    notifyListeners();
  }
  void addNumber(){
    _number++;
    notifyListeners();
  }
  // @override
  // void debugFillProperties(DiagnosticPropertiesBuilder properties) {
  //   super.debugFillProperties(properties);
  //   properties.add(IntProperty('number', _number));
  // }
}

• 如果想要暴露數(shù)據(jù)模型到全局也可如下操作

class UserModel{
  String name;
  String userID;
  bool isAuthor;
  bool isVIP;
  UserModel(this.name, this.userID, this.isAuthor, this.isVIP);
}

import 'package:cayj_cystudio/model/user_model.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
class UserProviderModel with ChangeNotifier,DiagnosticableMixin{
  UserModel _user;
  UserProviderModel(this._user);
  UserModel get user => _user;
  set user(UserModel value) {
    _user = value;
    notifyListeners();
  }
}

3. app頂層導入provider

• 封裝一個初始化文件

List<SingleChildWidget> providerList = [
  ChangeNotifierProvider(create: (_)=>TestProviderModel()),
  ChangeNotifierProvider(create: (_)=>UserProviderModel(UserModel("cy", "1", true, true)))
];

• main函數(shù)中引入使用provider

void main() {
  runApp(
    MultiProvider(
      providers: providerList,
      child: MyApp(),
    ),
  );
}

4. 使用

class _TestProviderState extends State<TestProvider> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("測試provider"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ChildOne(),
            ChildTwo()
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: () => context.read<TestProviderModel>().addNumber(),//使用context.read不會調(diào)用rebuild
      )
    );
  }
}


class ChildOne extends StatefulWidget {
  @override
  _ChildOneState createState() => _ChildOneState();
}

class _ChildOneState extends State<ChildOne> {
  @override
  Widget build(BuildContext context) {
    print("1build");
    return Container(
      child: Text("1number = ${context.watch<TestProviderModel>().number}"),
    );
  }
}
class ChildTwo extends StatefulWidget {
  @override
  _ChildTwoState createState() => _ChildTwoState();
}

class _ChildTwoState extends State<ChildTwo> {
  @override
  Widget build(BuildContext context) {
    print("2build");
    // int number = Provider.of<TestProviderModel>(context).number;
    return Container(
      child: Consumer2<TestProviderModel,UserProviderModel>(
        builder: (context,testProvider,userProvider,child){
          return Text("testProviderNumber：${testProvider.number}\n用戶:${userProvider.user.name}");
        },
      )
      // child: Text("當前用戶:${context.watch<UserProviderModel>().user.name}"),
    );
  }
}

• 簡單的調(diào)用方式

context.watch<TestProviderModel>().number
context.read<TestProviderModel>().addNumber()

如果不希望widget重復(fù)rebuild给猾，可以通過

Widget build(BuildContext context) {
  final name = context.select((Person p) => p.name);
  return Text(name);
}

或者使用Consumer的方式（指揮調(diào)用cosumer內(nèi)部的builder）

return Container(
      child: Consumer2<TestProviderModel,UserProviderModel>(
        builder: (context,testProvider,userProvider,child){
          return Text("testProviderNumber：${testProvider.number}\n用戶:${userProvider.user.name}");
        },
      )
      // child: Text("當前用戶:${context.watch<UserProviderModel>().user.name}"),
    );