当前位置: 首页 > article >正文

Flutter Provider使用

Provider之状态管理

下载地址: https://pub-web.flutter-io.cn/packages/provider

导入依赖:

dependencies:
  provider: ^6.0.5

导入头文件:

import 'package:provider/provider.dart';

使用方式

创建 Model 混入 ChangeNotifierCounter 中的私有属性 _count 变化时 ,添加监听 notifyListeners()

class Counter with ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    print(_count);

    /// 监听数据变化
    notifyListeners();
  }
}

设置组件监听使用 MultiProvider ,其中 providers 属性设置需要绑定的数据,即上面的 Counter 类,这里绑定的数据可以是多个。

  
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: MultiProvider(
          /// 设置监听器
          providers: [
            ChangeNotifierProvider(create: (context) => Counter()),
            //ChangeNotifierProvider(create: (context) => Student()),
          ],
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),
      ),
    );
  }

也可以设置监听一个 model ,使用 ListenableProvider.value()

        child: ListenableProvider.value(
          value: Counter(),
          child: Column(
            children: [
               /// 自己添加组件 ...
            ],
          ),
        ),

或者使用 ListenableProvider<Counter>

        child: ListenableProvider<Counter>(
          create: (_) => Counter(),
          child: Column(
            children: [
                /// 自己添加组件 ...
            ],
          ),
        ),

在子组件中监听发送,点击按钮修改数据:

      TextButton(
          /// Provider 执行修改数据
          onPressed: () => context.read<Counter>().increment(),
          child: Text("send provider"),
       ),

在子组件中监听改变数据,其他组件修改了该 Counter 中数据,这个Text组件的值会实时更改:

/// 数据赋值
Text("${context.watch<Counter>().count}"),

或者

/// 数据赋值
Counter counter = Provider.of<Counter>(context);
Text("${counter.count}"),

Provider使用起来很简单,数据的动态绑定和其他跨平台语言(Vue)类似。


http://www.kler.cn/a/37200.html

相关文章:

  • 什么是Docker
  • 华为路由器如何通过Console口进行基本配置
  • openEuler 22.03 LTS登录AWS Marketplace
  • python基础系列一
  • Go 并发模型—Goroutines
  • vscode maven开发
  • 代码随想录算法训练营第16天 104.二叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数
  • 【Linux】Linux工具
  • element 表格套输入框
  • 云原生周刊:Dapr 完成模糊测试审计 | 2023.7.10
  • missing-semester————2
  • CSS详解
  • Zookeeper集群下载安装并启动
  • 数学建模-拟合算法
  • java异步线程之间数据传递
  • JavaScript 深度剖析-函数式编程(一)
  • 基于 OpenCV 的图像处理与分析应用的设计与实现
  • 【牛客面试真题】字符串操作
  • 基于单片机心率脉搏心率血压体温血氧检测系统的设计与实现
  • Shell第一章——Shell编程规范与变量