Flutter之Provider共享数据的两种方式

Flutter之Provider共享数据的两种方式,第1张

Provider共享数据的两种方式
方式一:

 Provider.of<CountViewModel>(context);

举例

import 'package:flutter/material.dart';
class CountViewModel extends ChangeNotifier{
  int _count = 0;
  //将变量暴露在外面
  int get count=>_count;
  addCount(){
    _count++;
    notifyListeners();//通知状态改变
  }
  deCount(){
    _count--;
    notifyListeners();
  }
}
import 'package:flutter/material.dart';
import 'package:navigatoritem/page/CountViewModel.dart';
import 'package:provider/provider.dart';
class B extends StatefulWidget{
  _BState createState() =>_BState();

}
class _BState extends State<B>{

  @override
  Widget build(BuildContext context){
      final counter = Provider.of<CountViewModel>(context);//拿到provider
    return Scaffold(
      appBar:AppBar(
        title: Text("计数器"),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.add),
        onPressed: (){
          Provider.of<CountViewModel>(context,listen: false).addCount();
        },
      ),
      body: Container(
        child: Center(
          child: Text("${counter.count}"),
        ),
      ),
    );
  }
}

Provider.of(context) 会导致调用的 context 页面范围的刷新。 Consumer 只刷新了 Consumer
的部分 建议尽量使用 Consumer 而不是 Provider.of(context) 获取顶层数据

方式二

import 'package:flutter/material.dart';
import 'package:navigatoritem/page/CountViewModel.dart';
import 'package:provider/provider.dart';
class B extends StatefulWidget{
  _BState createState() =>_BState();

}
class _BState extends State<B>{

  @override
  Widget build(BuildContext context){
      final counter = Provider.of<CountViewModel>(context);//拿到provider
    return Consumer(
      builder: (context,CountViewModel counter,_){
        return Scaffold(
          floatingActionButton: FloatingActionButton(
            child: Icon(Icons.add),
            onPressed: (){
              counter.addCount();
            },
          ),
          appBar: AppBar(
            title: Text("Consumer数据共享"),
          ),
          body: Text("${counter.count}"),
        );
      },
    );
  }
}

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/996964.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2022-05-21
下一篇2022-05-21

发表评论

登录后才能评论

评论列表(0条)

    保存