首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

尝试在Flutter Streambuilder中构建Like/Like Button -不起作用

在Flutter中,可以使用StreamBuilder来构建Like/Like按钮,并实现其功能。StreamBuilder是一个Widget,它可以根据Stream的状态来动态构建UI。

首先,我们需要创建一个Stream来表示Like按钮的状态。可以使用StreamController来创建一个Stream,并在用户点击按钮时发送相应的事件。以下是一个简单的示例:

代码语言:txt
复制
import 'dart:async';

class LikeBloc {
  final _likeController = StreamController<bool>();
  Stream<bool> get likeStream => _likeController.stream;

  void likeButtonClicked() {
    _likeController.sink.add(true);
  }

  void dispose() {
    _likeController.close();
  }
}

在上面的代码中,我们创建了一个LikeBloc类,它包含一个StreamController和一个likeStream。当用户点击按钮时,我们通过likeButtonClicked方法向Stream发送一个true的事件。

接下来,我们可以在Flutter的界面中使用StreamBuilder来监听likeStream,并根据其状态来构建Like按钮的UI。以下是一个示例:

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

class LikeButton extends StatefulWidget {
  @override
  _LikeButtonState createState() => _LikeButtonState();
}

class _LikeButtonState extends State<LikeButton> {
  final _likeBloc = LikeBloc();

  @override
  void dispose() {
    _likeBloc.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<bool>(
      stream: _likeBloc.likeStream,
      initialData: false,
      builder: (context, snapshot) {
        return IconButton(
          icon: Icon(
            snapshot.data ? Icons.favorite : Icons.favorite_border,
            color: snapshot.data ? Colors.red : null,
          ),
          onPressed: () {
            _likeBloc.likeButtonClicked();
          },
        );
      },
    );
  }
}

在上面的代码中,我们创建了一个LikeButton类,它是一个StatefulWidget。在build方法中,我们使用StreamBuilder来监听likeStream,并根据其状态来构建Like按钮的UI。当Stream的状态发生变化时,StreamBuilder会自动重新构建UI。

在IconButton的onPressed回调中,我们调用_likeBloc.likeButtonClicked方法来发送一个事件,从而改变Stream的状态。

这样,我们就可以在Flutter中使用StreamBuilder来构建Like/Like按钮,并实现其功能。在实际应用中,可以根据需要对StreamBuilder进行进一步的定制和扩展。

推荐的腾讯云相关产品:腾讯云移动开发平台(https://cloud.tencent.com/product/mpp)

希望以上内容能够帮助到您!

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • Flutter 探索 StreamBuilderimage

    偶尔,周期结束之前可能会发出一些值。 Dart ,您可以创建一个返回 Stream 的容量,该容量可以异步进程处于活动状态时发射一些值。...假设您需要根据一个 Stream 的快照在 Flutter 构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客,我们将探索 Flutter StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...A stream 构建器,它可以将流的多个组件更改为小部件 Stream 像一条线。当您从一端输入值而从另一端输入侦听器时,侦听器将获得该值。...如果传递的值不为空,那么当 connectionState 等待时,hasData 属性在任何事件首先都将为 true StreamBuilder( initialData: 0, //

    2.5K00

    Flutter测试(二):项目中进行 Widget 测试

    上回书对 Flutter Widget 测试的官方 Demo 进行了简单的讲解,这篇文章我们对自己的项目进行 Widget 测试。 就拿 「想吃啥」APP 来进行测试吧。 ?...首页,我们可以看到有 6 个 Widget,有: 1.荤菜 & 素菜:2.选个菜吧 ×23.Button ×2 因为平时我们写APP的时候,肯定会封装一些 Widget 来进行复用,所以首页 选个菜吧...2.由于 Stream 必须要 close,所以套了一层异常捕获, finally 释放 stream。3.定义好 Widget 后,查找,是否有「选个菜吧」 的Widget。...Button 开发,对于 Button 样式的一致性大家肯定是有了解的,那既然如此,就要封装好一个通用的Button。...总结 Flutter ,一切皆为 Widget。 相信各位学 Flutter 的也都知道这个概念,那就可以看得出来,Widget 测试是 Flutter 中最重要的测试。

    85420

    FlutterDojo设计之道—状态管理之路(三)

    通过Dart提供的Stream机制,Flutter可以很轻松的构建响应式的编程方式,同时也让跨页面、跨Widget的数据管理问题迎刃而解。 Flutter的响应式编程,具有下面几个特点。...数据的管理,围绕Stream进行,通过Stream的sink和listen,来进行数据的管理 Widget发出Stream后,无需感知外界的影响,同样的,Widgetlisten Stream时,只需要根据数据的改变来构建...UI层,需要做的就是通过StreamBuilder来解析要监听的数据,StreamBuilder的builder函数是一个AsyncWidgetBuilder,它能够异步构建widget,其参数AsyncSnapshot...BLoC流的单播与广播 Flutter的Stream分为两种,单播与多播,默认情况下创建的是单播Stream,这样的话,只能有一个StreamBuilder来监听,如果存在多个StreamBuilder...举个例子,比如在第一个界面添加了一些数据,再打开第二个界面的时候,创建StreamBuilder之后,是无法直接获取流的最新数据的,因为这时候流的的数据StreamBuilder监听之前就已经结束了

    1.6K30

    Flutter混编工程之通讯之路

    Flutter,SDK提供了platform_channels来进行跨端通信,它的整体架构如下所示。...MethodChannel的构建需要两个参数,一个是BinaryMessenger,通常从Flutter Engine获取,可以通过普通的Engine构建,也可以通过EngineCache预热引擎来获取...EventChannel EventChannel用于事件流中将消息传递给Flutter端。 EventChannel与MethodChannel一样,Flutter通过Name来进行标志。...首先,我们Flutter构建这样一个列表,用于展示一个信息List,信息的来源是原生侧,所以,Flutter界面的initState,我们创建一个名为stringCodecDemo的BasicMessageChannel...❞ 另外,不管是Flutter,还是原生代码,都是可以通过Channel来向对方通信的,以BasicMessageChannel为例,原生和Flutter侧,都可以调用send函数来发送消息,也都可以设置

    1.9K20

    StatefulWidget的使用案例

    Flutter,自定义组件其实就是一个类,这个类继承自StatelessWidget/StatefulWidget。 StatelessWidget是无状态组件,状态不可变的Widget。...首先我们VSCode安装一个名为“Awesome Flutter Snippets”的插件,该插件提供了Flutter各种常用的类和方法的快速构建方式,可以极大地提升开发效率,如下所示: 捷径...dis 部署 永久地从树删除此对象时调用。当此State对象永远不会再次构建时,框架将调用此方法。...streamBldr Stream Builder StreamBuilder根据与指定交互的最新快照创建新的构建自身stream animatedBldr 动画生成器 创建动画生成器...mounted 安装 此State对象当前是否。 snk 下沉 接收器是流的输入。

    3.3K20

    Flutter完整开发实战详解(十二、全面深入理解状态管理设计)

    image.png 整个流程是不是很巧妙,机制的利用了 AnimatedWidget 和 Listenable Flutter 的特性组合,至于 ScopedModelDescendant 就只是为了跨...首先我们知道 context 只是接口,而在 Flutter context 的实现是 Element , Element 的 inheritFromWidgetOfExactType 方法实现里...二、BloC BloC 全称 Business Logic Component ,它属于一种设计模式, Flutter 它主要是通过 Stream 与 SteamBuilder 来实现设计的,所以... flutter_redux ,开发者的每个操作都只是一个 Action ,而这个行为所触发的逻辑完全由 middleware 和 reducer 决定,这样的设计在一定程度上将业务与UI隔离,同时也统一了状态的管理...可以看出 flutter_redux 的内部实现复杂度是比较高的,提供组装、复用、解耦的同时,也对项目进行了一定程度的入侵,这里的篇幅可能不能很全面的分析 flutter_redux 的整个流程,

    2.1K20

    Flutter BLoC 异步通信、BlocBuilder的基本使用、BlocProvider的初探

    的使用详情 | StreamBuilder组件的结合使用 | StreamBuilder 实现的倒计时进度圆圈 EventBus (不考虑使用) Bloc BLoC 异步通信、BlocBuilder...Flutter项目开发,一般的项目中,会有网络请求的代码与Widget构建的UI界面写一起,随着业务的不断积累,代码量也越来越大,维护的复杂度也会随着增加。...BLoC模式可以将Widget构建UI的代码与业务处理的代码分离出来,BLoC模式下的应用程序,一般会有全局的BLoC,每一个页面也会对应有一个独立的BLoC。...BloC是一种架构模式也是一种编程思想,Flutter中使用BloC时,首先要引入bloc库 dependencies: flutter_bloc: ^6.0.6 然后将依赖库拉取到本地 flutter...BlocProvider( create: (BuildContext context) => BlocC(), ), ], child: 子页面视图, ) 然后子页面

    3.3K11

    Flutter完整开发实战详解(十一、全面深入理解Stream)

    一、Stream 由浅入深 Stream Flutter 是属于非常关键的概念, Flutter ,状态管理除了 InheritedWidget 之外,无论 rxdart,Bloc 模式,flutter_redux... Flutter ,Dart 的 Zone 启动是 _runMainZoned 方法 ,如下代码所示 _runMainZoned 的 @pragma("vm:entry-point") 注解表示该方式是给...二、StreamBuilder 如下代码所示, Flutter 通过 StreamBuilder 构建 Widget ,只需提供一个 Stream 实例即可,其中 AsyncSnapshot 对象为数据快照...image 如上图所示, StreamBuilder 的调用逻辑主要在 _StreamBuilderBaseState ,_StreamBuilderBaseState initState 、didUpdateWidget...所以,到这里你对 Flutter Stream 有全面的理解了没?

    3.8K41

    flutter中使用BloC模式

    BloC【Business Logic Component】模式是paolo soares 和 cong hui 2018年Google dartconf上提出的,具体的视频你可以参考YouTube....3、不能更好的重用业务逻辑代码,体现在,如果网络请求的逻辑有所变动的话,加入这个业务功能被两个端(web、flutter)使用的话,是需要改动两个地方的。...image.png 可以看到改造之后,变得清晰多了,这个文件几乎就全部是UI构建的代码,所有的逻辑都抽到了businessLogic中了。...flutter,实现BloC模式的精髓就是, 展示的数据从BloC来,具体到了stream上,有了stream的到来,就可以使用StreamBuilder构建ui了。...Redux相比大家也听过了,flutter当然也是有的,那么,和Bloc有什么区别么?

    17.5K82
    领券