Flutter状态管理provider

在没有状态管理之前，我们使用setState去修改同步渲染本页面的数据，比如在一个Tab页，我们点击一个按钮，让数字+1，使用setState即可完成。

那我们想要再另外一个和本页面完全不相关的Tab页也完成同步动作，这个时候就要使用到状态管理了。

我们首先介绍provider

provider是官方提供的一种状态管理，使用起来较简单

1、创建一个继承于ChangeNotifier的方法类，在这个类去实现一些增删改查的操作。例如：

import 'package:flutter/material.dart';

class CartProvider with ChangeNotifier{

  List<String> _cartList = [];

  get cartList=>this._cartList;

  get cartCount =>this._cartList.length;

  //增加卡片数据
  addCart(value){
    _cartList.add(value);
    //通知
    notifyListeners();
  }

  //删除卡片数据  
  removeCart(value){
    _cartList.remove(value);
    //通知
    notifyListeners();
  }

  List<String> getCart(){
    return _cartList;
  }
}

上边这个例子是对一个_cartList的增删改查，可以看到，在对list进行添加和修改的时候我们都调用了notifyListeners();

2、在dart主类把返回的MaterialApp改为MultiProvider去注册刚才写的这个方法类

import 'package:flutter/material.dart';
import 'package:jdshop/provider/CartProvider.dart';
import 'package:jdshop/routes/Routes.dart';
import 'package:provider/provider.dart';

void main() => runApp(MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      child: MaterialApp(
        initialRoute: "/",
        //不显示debug图标
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
            primaryColor: Colors.white
        ),
        onGenerateRoute: onGenerateRoute,
      ),
      providers: [
        ChangeNotifierProvider(create: (_)=>CartProvider(),)
      ],
    );
  }
}

3、在需要操作这个数据的页面中的build方法中添加

var cartProvider = Provider.of<CartProvider>(context);

这句话的意思就是说查找这个状态管理下边的CartProvider

Flutter状态管理provider

猜你喜欢