[移动开发] Flutter之Provider共享数据的两种方式

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> Flutter之Provider共享数据的两种方式 -> 正文阅读

[移动开发]Flutter之Provider共享数据的两种方式

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