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

最新推荐文章于 2024-06-22 18:42:34 发布

可可鸭~

最新推荐文章于 2024-06-22 18:42:34 发布

阅读量1.9k

点赞数

分类专栏： Flutter移动开发文章标签： flutter

本文链接：https://blog.csdn.net/qq_43547255/article/details/124298275

版权

Flutter移动开发专栏收录该内容

31 篇文章 6 订阅

订阅专栏

本文介绍了Flutter中Provider库实现数据共享的两种主要方法：Provider.of和Consumer。通过示例代码详细展示了如何使用这两种方式更新和监听数据变化，并讨论了它们各自的适用场景。Provider.of会触发整个页面的重建，而Consumer则只更新指定部分，建议在优化性能时优先考虑使用Consumer。

摘要由CSDN通过智能技术生成

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}"),
        );
      },
    );
  }
}