状态管理（provide）

https://github.com/google/flutter-provide

image.png

注意

1.状态修改 都要用 R刷新

2.状态管理主要是做左右数据联动，或者不同页面数据共享之类的

1.stateful要全部写在一起，不利于组件化，简单的可以

setState(() {
  list = category.data;
});

2.provide比较好用

2019年7月31日

一.provide实现状态管理

1.效果：

image.gif

2.实现

2.1创建状态管理类

import 'package:flutter/material.dart';
class Counter with ChangeNotifier {
  int value = 0;
  increment() {
    value++;
    notifyListeners();
  }
}

2.2main里面注册

import 'package:flutter/material.dart’;
import 'package:provide/provide.dart';
import './provide/counter.dart';
void main() {
  var providers = Providers();
  var counter = Counter();
  providers..provide(Provider<Counter>.value(counter));
  runApp(ProviderNode(child: MyApp(), providers: providers));
}

3.3显示和调用地方

mport 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/counter.dart';
class CartPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Number(),
            MyButton(),
          ],
        ),
      ),
    );
  }
}
class Number extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(top: 200),
      child: Provide<Counter>(
        builder: (context, child, val) {
          return Text(
            ‘${val.value}',
            style: Theme.of(context).textTheme.display1,
          );
        },
      ),
    );
  }
}
class MyButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        onPressed: () {
          Provide.value<Counter>(context).increment();
        },
        child: Text('递增'),
      ),
    );
  }
}

//另外一种取法
isClick = (index == Provide.value<ChildCategoryP>(context).childIndex)

注意上面的

builder里面的val相当于下面的这个对象

Provide.value<ChildCategoryP>(context)

二.同一个页面多个数据状态管理

import 'package:flutter/material.dart';
import '../model/categoryM.dart';
class ChildCategoryP with ChangeNotifier {
  List<BxMallSubDto> childCategoryList = [];
  int childIndex = 0; //子类高亮所以
  String categoryId = '4'; //大类的id(默认是白酒)
  String subId = ''; //小类id
  int page = 1; //列表也页数
  String noMoreText = ''; //显示没有数据的文字
  setChildCategory(List<BxMallSubDto> list, String categoryId) {
    //添加一个默认全部
    BxMallSubDto all = BxMallSubDto();
    all.mallSubId = '';
    all.mallCategoryId = '00';
    all.mallSubName = '全部';
    all.comments = 'null';
    childCategoryList = [all];
    childCategoryList.addAll(list);
    childIndex = 0;
    categoryId = categoryId;
    page = 1;
    noMoreText = '';
    notifyListeners();
  }
//改变子类索引
  changeChildIndex(index, String subId) {
    childIndex = index;
    subId = subId;
    page = 1;
    noMoreText = '';
    notifyListeners();
  }
  //增加page的方法
  addPage() {
    page++;
  }
  //改变
  changeNoMore(String text) {
    noMoreText = text;
    notifyListeners();
  }
}

三.业务和显示逻辑分离开发

import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import '../provide/details_infoP.dart';
class DetailsPage extends StatelessWidget {
  final String goodsId;
  DetailsPage(this.goodsId);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(Icons.arrow_back_ios),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        title: Text('detail page'),
      ),
      body: FutureBuilder(
        future: reqGoodsInfo(context),
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return Container(
              child: Column(
                children: <Widget>[
                  Text('shopId:$goodsId'),
                ],
              ),
            );
          } else {
            return Text('loading');
          }
        },
      ),
    );
  }
  Future reqGoodsInfo(BuildContext context) async {
    await Provide.value<DetailsInfoProvide>(context).reqGoodsInfo(goodsId);
    return 'finish load';
  }
}

import 'package:flutter/material.dart';
import '../model/detailsM.dart';
import '../service/service_method.dart';
import 'dart:convert';
class DetailsInfoProvide with ChangeNotifier {
  DetailsModel goodsInfo;
  //从后台获取商品数据
  reqGoodsInfo(String id) {
    var formData = {
      'goodId': id,
    };
    request('getGoodsDetailById', formData: formData).then((val) {
      var responseData = json.decode(val.toString());
      print(responseData);
      goodsInfo = DetailsModel.fromJson(responseData);
      notifyListeners();
    });
  }
}