[Flutter] Provider状态管理的简单使用

Provider状态管理

定义实体类

//goods_entity.dart
class GoodsEntity {
    //定义实体类中的属性变量
    late int _id;
    late String _name;
    late double _price;
    late String _url;
    late String _mealType;
    //定义getter方法返回相应的属性值
    //因为属性值私有化，所以通过getter方法调用属性值
    int get id => _id;
    String get name => _name;
    double get price => _price;
    String get url => _url;
    String get mealType => _mealType;
    //定义接收json数据的方法，并且返回此类的实例goods
    //json数据的value被赋值给实例goods的属性，再通过getter方法调用。
    static GoodsEntity fromJson(Map json) {
        GoodsEntity goods = GoodsEntity();
        goods._id = json['id'];
        goods._name = json['name'];
        goods._price = json['price'];
        goods._url = json['url'];
        goods._mealType = json['mealType'];
        return goods;
    }
}

定义模板类继承ChangeNotifier

import 'package:flutter/material.dart';
import 'goods_entity.dart';
class LikeModel with ChangeNotifier {
    //定义一个实体类的列表存储已收藏的items，存储的值是实例
    //可分享的列表，由add方法增加实例，remove方法删除实例
    List _items = [];
    //设置getter方法
    List get items => _items;
    //添加喜欢方法
    void add(GoodsEntity goods) {
        if (!isInLike(goods)) {//goods.id没有在_items里，添加goods
            _items.add(goods);
            notifyListeners();
        }
    }
    //移除喜欢方法
    void remove(GoodsEntity goods) {
        if (isInLike(goods)) {//goods.id在_items里，移除goods
            _items.remove(goods);
            notifyListeners();
        }
    }
    //是否喜欢方法
    bool isInLike(GoodsEntity goods) {
        //通过id判断是否，如果当前good.id在_items里能找到对应的，便返回true
        return _items.any((element) => element.id == goods.id);
    }
}

开始使用状态管理

STEP 01 配置和定义

//main函数设置
void main() {
  runApp(MultiProvider(
    providers: [
        //MultiProvider可使用多个模板
      ChangeNotifierProvider(create: (context) => LikeModel()),
    ],
    child: const MyApp(),
  ));
}

//获取数据后，将json数据生成的实例保存在一个LIST里面
List goods =
      Data.map((item) => GoodsEntity.fromJson(item)).toList();

//开始使用，用Consumer包裹需要状态管理的组件
child: Consumer(
    builder: (context, value, child) {
        //将对应index的实例赋值给goodsEntity变量
        GoodsEntity goodsEntity = goods[index];
        return Row(
            ...

//调用model的方法并将返回值(bool)赋值给isInLike
Consumer(
    builder: (context, value, child) {
        bool isInLike = context
            .watch()
            .isInLike(goodsEntity);

STEP 02 调用方法和获取属性值

//直接调用实例的getter方法获取对应的属性值
Text(
    '￥${goodsEntity.price}',
    style: const TextStyle(
        fontSize: 14,
        color: Colors.red),
),

//根据上面调用方法的返回值进行判断
child: isInLike
    ? Text('已收藏')
    : Text('收藏至礼品库')));

STEP 03 SecondPage跨页状态管理

//将实例goodsEntity作为参数发送到SecondPage
onTap: () {
    Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) =>
            DetailPage(
                goodsEntity)));
},

//SecondPage接受实例后，直接开始使用
Consumer(builder: (context, value, child) {
//调用Model里的方法返回的bool值赋值给isInLike
    bool isInLike = context.read().isInLike(goodsEntity);
    ...

//使用上面isInLike
onPressed: isInLike
    ? () {
    var cart = context.read();
    cart.remove(goodsEntity);
}
: () {
    var cart = context.read();
    cart.add(goodsEntity);
},

//getter方法获取属性值
height: 25,
child: Text(
    '单价：￥${goodsEntity.price}',
    style: TextStyle(fontSize: 16, color: Colors.red),
),