前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >"Fluttr组件ValueListenableBuilder

"Fluttr组件ValueListenableBuilder

作者头像
徐建国
发布2021-12-01 13:10:49
1980
发布2021-12-01 13:10:49
举报
文章被收录于专栏:个人路线
title: "Fluttr组件ValueListenableBuilder" date: 2021-08-16T08:48:19+08:00 draft: false tags: ["flutter"] categories: ["flutter"]
该Widget的显示内容 会与ValueListenable保持同步,ValueListenable是dart的接口,该接口用于 保持value变化的监听者。这里涉及到了一套dart本身提供的通知机制,机制结构如下:

ChangeNotifier

使用ValueListenableBuilder时需要提供两个 必填参数 :ValueListenable参数和ValueWidgetBuilder 参数。ValueListenable参数用于注册值变化回调。ValueWidgetBuilder用于同步value变化的UI。

使用参数

ValueListenable

通过该参数 添加了一个变化的回调,回调是setState()。这样当发送了值变化的通知后,该widget就会setState(),就实现了与value的同步。通常使用的是ValueNotifer,因为ValueNotifer可以快捷的发送通知。

ValueWidgetBuilder

该参数是方法参数,代码如下:

代码语言:javascript
复制
Widget Function(BuildContext context, T value, Widget child)
//context :上下文
//value:变化的值,我们就是根据这个value实现了 数据内容同步,
//child:该参数并不常用。类似动画的使用,可以给某个widget传入一个child,让该widget显示child。

使用案例

兄弟之间通信

比如点击按钮之后,文本发生变化。

代码语言:javascript
复制
import 'package:flutter/material.dart';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  ValueNotifier<int> valueNotifier;

  @override
  void initState() {
    super.initState();
    //初始化通知器
    valueNotifier = ValueNotifier(0);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('兄弟widget通信'),
      ),
      body: Center(
        child: ValueListenableBuilder(
          ///为什么要用ValueNotifier呢,因为需要快捷的发送通知
          valueListenable: valueNotifier,
          ///动态更新UI
          builder: (context, value, _) {
            return Text(
              '$value',
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          ///更新数据,发送通知
          valueNotifier.value = ++valueNotifier.value;
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

上面代码的处理流程:A:ValueListenableBuilder监听了Value的变化,当Value变化内部触发setState B:按钮点击valueNotifier发送通知 效果如下:

小结

ValueListenableBuilder是简易版的Provider,只监听了一个value的变化。Provider除了监听变化之外,还增加了拦截、多value,子获取祖先value等功能。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-08-27,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 坚果前端 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用参数
    • ValueListenable
      • ValueWidgetBuilder
      • 使用案例
        • 兄弟之间通信
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档