Flutter provider的简单使用（二）

大家好，我是学习Flutter好几个月的三须鳗鱼 张信哲 ，熟练使用CV大法。

上集说到，provider在MyApp()中使用，这种是全局的。

• Flutter provider的简单使用（一）

状态变更只能是全局的话，意义就很小了，所以，这一集主要记状态的局部变更，也就是MVP的实现

provider 的局部更新不能直接使用context.read，或者context.watch，会报一个context没关联的错，实际上应该使用Consumer。

这里做了详细说明掘金大佬 JarvanMo：Flutter状态管理：Provider4 入门教程（一）

举个栗子：

body: Consumer<MyChangeNotifier>(
          builder: (_, localNotifier, __) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  'You have pushed the button this many times:',
                ),
                Text(
                  '${localNotifier.counter}',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
        ),

使用上述代码中的localNotifier来替代 Provider.of<T>(context)

比如：

///之前的写法
	Text(
       '${Provider.of<MyChangeNotifier>(context).counter}',
       style: Theme.of(context).textTheme.headline4,
    ),

///现在的写法
	Text(
       '${localNotifier.counter}',
       style: Theme.of(context).textTheme.headline4,
    ),

可以把providers的引入放在Scaffold上，实现一个页面一个Notifier的管理，或者具体控件具体实现

上一下我的代码（功能为获取订单数据，刷新列表）
Bean：

import 'package:xxx/generated/json/base/json_convert_content.dart';

class OrderInfoReqEntity with JsonConvert<OrderInfoReqEntity> {
	String info;
	int pageNo;
	int pageSize;
	int status;
}

page

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import 'package:scoped_model/scoped_model.dart';
import 'package:xxx/data/GlobalScopeModel.dart';
import 'package:xxx/generated/reqentity/order/order_info_req_entity.dart';
import 'package:xxx/generated/retentity/order/order_info_ret_entity.dart';
import 'package:xxx/provider/notifier/order_notifier.dart';
import 'package:xxx/routes/routers.dart';
import 'package:xxx/uitls/CommonUtil.dart';

class OrderMainPage extends StatefulWidget {
  @override
  _OrderMainPageState createState() {
    return new _OrderMainPageState();
  }
}

class _OrderMainPageState extends State<OrderMainPage>  with SingleTickerProviderStateMixin{
 ///尺寸放大倍数
  double times = 1.0;
  TabController _tabController;
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  void initState() {
    super.initState();
    _tabController = new TabController(vsync: this, length: 3);
  }

  @override
  void deactivate() {
    // TODO: implement deactivate
    super.deactivate();
  }

  @override
  Widget build(BuildContext contexts) {
    times = ScopedModel.of<GlobalScopeModel>(contexts, rebuildOnChange: true)
        .getSizeTimes();
    times = times == null ? 1.0 : times;
    return new MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => Order()),
      ],
      child: Consumer<Order>(
        builder: (_,_notifier,__)=> Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.white,
            title: new Text("订单中心",style: TextStyle(fontSize:  ScreenUtil().setSp(CommonUtil.sizeTrans(45, times)),fontWeight: FontWeight.bold , color: Colors.black),),
            actions: <Widget>[
              Builder(builder: (contexts){
                return Container(
                  margin: EdgeInsets.only(right: 10),
                  child: FlatButton.icon(
                    icon: Icon(Icons.view_list,color: Colors.red,),
                    highlightColor: Colors.white,
                    label: Text('历史订单',style: TextStyle(fontSize:  ScreenUtil().setSp(CommonUtil.sizeTrans(30, times)),fontWeight: FontWeight.bold , color: Colors.red),),
                    onPressed: (){
                      ///Navigator.pushNamed(context, Routes.orderhistor);
                      _initOrderData(_notifier);  /// 为了方便，触发写在这里
                    },

                  ),
                );
              },
              ),
            ],

            bottom: new TabBar(
              indicatorColor: Colors.blue,
              labelColor: Colors.black,
              ///labelColor: Colors.red,
              tabs: <Widget>[
                new Tab(text:"待处理",),
                new Tab(text:"进行中",),
                new Tab(text:"售后订单",),
              ],
              controller: _tabController,
            ),
          ),
          body:TabBarView(
            controller: _tabController,
            children: <Widget>[
              new Center(
                child: RefreshIndicator(
                  child:ListView.separated(
                    itemCount: (_notifier.newOrderdata.result == null || 
                        _notifier.newOrderdata.result.records==null)?0:
                        _notifier.newOrderdata.result.records.length, 
                        /// 在这里监听变更newOrderdata.result.records 层级深了，多写个判断
                    itemBuilder: (contexts, index) {
                      return waitOrderlistItem(index);
                    },
                    separatorBuilder: (BuildContext contexts, int index) {
                      return Container();
                    },
                  ),
                ),
              ),
              new Center(),
              new Center(),
            ],
          ),
      ),
    ),
  );
}

  Widget waitOrderlistItem(int index) {
    return OederListTemplate(index);
  }

  void _initOrderData(_notifier) {
    OrderInfoReqEntity orderData = OrderInfoReqEntity();
    orderData.pageNo = 1;
    orderData.pageSize = 20;
    _notifier.getAllOrder(orderData, context);  /// 这是触发的方法
  }


}

Notifier

import 'package:flutter/foundation.dart';
/// order
class Order  with ChangeNotifier{

  var _newOrderdata = OrderInfoRetEntity();
  get newOrderdata => _newOrderdata;

  /// 获取全部订单
  Future<void> getAllOrder(OrderInfoReqEntity orderData, BuildContext context) async {
   		/// 获取全部订单数据
  }

  @override
  void debugFillProperties(DiagnosticPropertiesBuilder properties) {
    ///super.debugFillProperties(properties);
    properties.add(ObjectFlagProperty('newOrderdata', newOrderdata));
  }

}

---

贴一个page代码模板

import 'package:flutter/material.dart';
import 'package:scoped_model/scoped_model.dart';

class $name$ extends StatefulWidget {
  
  @override
  _$name$State createState() => new _$name$State();
}

class _$name$State extends State<$name$> {
 ///尺寸放大倍数
  double times = 1.0;

  @override
  Widget build(BuildContext context) {
    times = ScopedModel.of<GlobalScopeModel>(context, rebuildOnChange: true)
        .getSizeTimes();
    times = times == null ? 1.0 : times;
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => $name$Provider()),
      ],
      child: Consumer<Order>(
        builder: (_,_notifier,__)=> Scaffold(
          appBar: new AppBar(
          title: new Text("$name$"),
          centerTitle:true,
        ),
          body: new ListView(
        ),
      ),
    );
  }
}