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

如果StreamBuilder获取null,则在颤动中显示不同窗口小部件

StreamBuilder是Flutter框架中的一个小部件,用于在界面上根据数据流的变化动态更新UI。它接收一个数据流(Stream)作为输入,并根据数据流的变化来构建界面。

当StreamBuilder获取到null时,可以通过设置其initialData参数来指定初始值。如果不设置initialData,则StreamBuilder会在初始阶段显示一个空白界面。

在颤动(shimmer)中显示不同窗口小部件是一种常见的加载效果,用于在数据加载完成之前展示一个占位符。可以使用shimmer库来实现这个效果。该库提供了Shimmer小部件,可以将其作为StreamBuilder的子部件,以实现在数据加载期间显示颤动效果。

以下是一个示例代码,演示了如何在StreamBuilder中使用shimmer库来显示不同的窗口小部件:

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

class MyWidget extends StatelessWidget {
  final Stream<String> dataStream; // 假设数据流的类型为String

  MyWidget({required this.dataStream});

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<String>(
      stream: dataStream,
      initialData: null, // 设置初始值为null
      builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
        if (snapshot.hasData) {
          // 数据加载完成,显示实际内容
          return Text(snapshot.data!);
        } else if (snapshot.hasError) {
          // 数据加载出错,显示错误信息
          return Text('Error: ${snapshot.error}');
        } else {
          // 数据还未加载完成,显示颤动效果
          return Shimmer.fromColors(
            baseColor: Colors.grey[300]!,
            highlightColor: Colors.grey[100]!,
            child: Container(
              width: 200,
              height: 20,
              color: Colors.white,
            ),
          );
        }
      },
    );
  }
}

在上述示例中,dataStream表示数据流,可以根据实际情况进行替换。当数据加载完成时,StreamBuilder会根据数据流中的值来构建界面,显示实际内容。当数据还未加载完成时,StreamBuilder会显示一个颤动效果的占位符。

这里使用了shimmer库中的Shimmer.fromColors小部件来实现颤动效果。通过设置baseColor和highlightColor,可以指定颤动效果的颜色。在本示例中,将baseColor设置为较深的灰色,highlightColor设置为较浅的灰色,以实现颤动效果。

以上是关于如何在StreamBuilder中根据获取到的null值来显示不同窗口小部件的解答。如果需要了解更多关于Flutter的信息,可以参考腾讯云的Flutter产品介绍页面:Flutter产品介绍

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

相关·内容

在 Flutter 探索 StreamBuilderimage

假设您需要根据一个 Stream 的快照在 Flutter 构造一个小部件,那么有一个名为 StreamBuilder 的小部件。...在这个博客,我们将探索 Flutter StreamBuilder。我们还将实现一个演示程序,并向您展示如何在您的 Flutter 应用程序中使用 StreamBuilder。...为了获取信息,首先,您可以通过获取其 hasData 属性来检查快照是否包含信息,如果 Stream 有效地释放了任何非空值,那么 hasData 属性将是有效的。...在下面的代码,当 connectionState 值正在等待时,将显示一个 CircularProgressIndicator。...如果传递的值不为空,那么当 connectionState 在等待时,hasData 属性在任何事件首先都将为 true StreamBuilder( initialData: 0, //

2.5K00
  • Flutter 的状态管理方案:setState、BLoC、ValueNotifier、Provider

    主要导航 登录页面的主要导航是通过一个小部件实现的,该小部件使用 Drawer 菜单在不同选项中进行选择。...这里使用了 Provider 来获取 AuthService 对象,并将它用于登录。 札记 AuthService 是一个对 Firebase Authentication 的简单封装。...null : () => _signInAnonymously(context), ), ); } } 复制代码 在 静态 create 方法,我们使用了 ValueNotifier...如果在简单值更改时需要重建 widget,请使用 ValueNotifier。 如果你想在 notifyListeners() 调用时有更多掌控,请使用 ChangeNotifier。...使用 Provider,我们可以选择在哪里存储 widget 树的状态。 这样,即使删除使用它的小部件,状态也会被保留。 ValueNotifier 比 setState 需要更多的代码。

    4.5K00

    Flutter 黏贴卡动画效果

    可以将任何自定义窗口部件放置在这两个单独的卡。 属性 slimy_card 包的一些属性: **颜色:**这些属性表示用户添加他们想要的任何颜色。...在StreamBuilder,添加一个initialData;SlimyCard支持Streams(BLoC)提供其实时状态。为此,将SlimyCard 包在StreamBuilder。...在SlimyCard,我们将添加颜色,topCardWidget和bottomCardWidget。我们将在下面描述代码。 在topCardWidget,我们将添加一个列小部件。...在该列内,我们将添加一个容器小部件。在容器,我们将添加高度,宽度和装饰图像。我们还将添加两个文本并将它们包装到中心。...在 column ,我们将添加两个文本并将它们包装在中间。当用户点击下拉按钮时,bottomCardWidget将被激活并显示在您的设备上。

    2.1K20

    Flutter 构建完整应用手册-联网 顶

    路线 使用http包发出网络请求 将响应转换为自定义Dart对象 用Flutter获取显示数据 1.使用http包发出网络请求 http包提供了从互联网获取数据的最简单方法。...在这个例子,我们将使用http.get方法从JSONPlaceholder REST API获取示例文章。...现在我们有一个功能,我们可以调用从互联网上获取Post! 3.用Flutter获取显示数据 为了获取数据并将其显示在屏幕上,我们可以使用FutureBuilder小部件!...我们如何听取消息并显示它们? 在这个例子,我们将使用StreamBuilder部件来侦听新消息和一个Text 部件显示它们。...StreamBuilder部件将连接到Stream,并在每次接收到事件时使用给定的builder函数请求Flutter重建!

    2.6K20

    Flutter响应式编程:Streams和BLoC

    当然,一切都是互动的,用户可以在不同的页面或在同一个页面内发生各种动作,并且可以实时观察到结果。...重建并“刷新”计数器; 我们不再需要State的概念,所有内容都通过Stream接收; 这是一个很大的改进,因为调用setState()方法会强制整个Widget(和任何子窗口部件)重建。...在这里,只重建StreamBuilder(当然还有子窗口部件); 我们仍然在为页面使用StatefulWidget的唯一原因,仅仅是因为我们需要通过dispose方法释放StreamController...该应用程序共有3个FavoriteButton实例,每个实例显示在3个不同的页面。...如果尚未从TMDB API获取相应页面,则会调用API。 获取页面后,所有已获取电影的新列表将发送到_moviesController。

    4.2K90

    Flutter 卡片选择器

    地址:https://pub.dev/packages/card_selector 介绍 卡选择器是Flutter利用堆栈的窗口部件选择器。...特定卡上的信息将有所不同。 该演示视频展示了如何在颤动创建卡选择器。它显示了flutter应用程序中使用card_selector软件包的卡选择器的工作方式。...它显示了堆叠的卡片,动画,从左到右或从右到左刷卡。内容将根据卡而改变。一个小部件,用于选择向左或向右滑动的堆叠小部件。它会显示在您的设备上。...在itemBuilder如果索引等于零,则返回列小部件。在此小部件,从json文件添加余额。另外,我们将从json文件添加金额,模式,时间。...data = _cards[0]); }); } @override Widget build(BuildContext context) { if (_cards == null

    7.4K20

    Python Qt GUI设计:UI界面可视化组件、属性概述(基础篇—3)

    enabled属性缺省值为True,有些组件在被禁用时会以不同的方式显示自己。例如,按钮可能会将其标签显示灰色。...如果组件在布局管理器,且布局管理器也设置了最小尺寸,则部件本身的最小尺寸以部件的mimimumSize为准,布局管理器设置的不起作用。...如果部件接受拖放,则在鼠标拖放时,拖放事件会发送给鼠标当前光标下接受拖放的第一个部件如果组件设置了acceptDrops属性为True,则就是通知系统该组件可接受鼠标拖放事件。...toolTip属性 toolTip属性设置组件的toolTip提示信息,toolTip提示信息在鼠标放到控件上会浮动出一个显示提示信息。...statusTip属性 statusTip属性保存statusTip提示信息,statusTip提示信息在鼠标放到控件上时在窗口的状态栏显示提示信息,如果窗口无状态栏则不显示

    5.6K50

    vscode开发插件推荐第二节

    在 VS Code ,单击左侧的扩展,然后搜索扩展并单击安装。 首先,我希望您启用了 Dart 和 Flutter 扩展,如果没有,您可以从这里获取它们:Dart和Flutter。...如果您将鼠标悬停在 path 上,扩展名会提供指向项目结构及其维度的文件的链接。...激活后,图标将出现在您的资源管理器侧栏。它有很多自定义功能,例如您可以更改颜色等。...Color Highlight 很多时候我们使用不同的颜色,这个扩展可以方便地查看通过在我们的代码设置颜色样式而给出的颜色。...它通过消除与创建小部件相关的大部分样板代码来提高您的开发速度。可以通过分别键入快捷方式和来创建诸如StreamBuilder和 之类的小部件

    1.7K10

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

    CounterBloc>( create: (context) => CounterBloc(""), child: MaterialApp( ///Android应用程序任务栏显示应用的名称...home: TestBlocTimePage(), ), ); } } [在这里插入图片描述] 对于 TestBlocTimePage 就是 MaterialApp设置默认显示的...buildWhen参数,用于向BlocBuilder提供可选的条件,返回 true,那么将调用state执行视图的重新构建,如果返回false,则不会执行视图的重建操作。...通过 BlocBuilder 分别引用不同的 Bloc 就可以,编这也有 Demo 点击查看详情 *** 完毕 以编的性格,要实现百万Demo随时复制粘贴肯定是需要源码的 BlocProvider...Demo 点击查看详情 MultiBlocProvider Demo 点击查看详情 当然以编的性格,肯定是要有视频录制的,目前正在录制,你可以关注一下 西瓜视频 --- 早起的年轻人 随后会上传

    3.3K11

    【音频处理】Melodyne 自动修正功能 ( 修正音高中心 | 修正音高补偿 | 节拍自动修正 | 量化时间 )

    文章目录 一、音高自动修正功能 二、节拍自动修正功能 一、音高自动修正功能 ---- 仔细观察编辑面板的音符 , 很少有处于正中心位置的音符 , 大部分音符的音准都不准确 , 这里建议使用自动修正功能..., 那么必须是 100\% ; " 修正音高补偿 " 用于控制声音的颤动 , 表示的是去除颤音的深度 , 0 是留下所有的声音颤动 , 100 表示 删除所有声音的颤动 ; 二胡 / 小提琴...等弦乐的揉弦等操作 , 这些颤动一般不会超过半音程 , 这些颤动尽量留在声音上 , 这种情况下 修正音高补偿 设置的低一些 , 尽量保留颤音 ; 歌手由于气息不稳定造成的声音发颤 , 需要删除 , 这种情况下修正音高补偿设置的高一些...按钮 , 自动校准后的效果如下 , 所有的音符都处于标准音高位置 ; 二、节拍自动修正功能 ---- 选择 菜单栏 " 编辑 / 量化时间 " 选项 , 弹出 " 节拍自动修正 " 对话框 , 窗口中的进度条...None , 会按照距离音符最近的节拍 , 自动进行对齐音符操作 ; 选择不同的量化值 , 编辑界面会显示不同的网格线进行参照 ; 下图是选择 16 分音符的网格线 ; 上述自动修正操作 , 如果没有选中音符

    8.4K10

    Flutter 流体滑块

    下面的演示视频显示了如何在颤动创建流畅的滑块。它显示了如何在flutter应用程序中使用flutter_fluid_slider软件包来工作流体滑块传送带。...它显示了具有不同颜色的三流体滑块,并为用户使用了不同的工作属性。它会显示在您的设备上。 属性 onChanged: 此属性是必需的,并且在用户开始为滑块选择新值时调用该属性。...在内部,我们将在value方法添加一个变量;max表示最大值 是用户可以选择的值,并且大于或等于最小值。添加滑块颜色和拇指颜色。在此滑块,我们将添加开始意味着小部件显示为最小标签。...我们将显示“money-off”图标。如果未提供,则该min值显示为文本。...如果null,则基于[showDecimalValue]将该值转换为String。我们将创建一个字符串数字1到10的列表并返回数字。

    11.6K20

    Flutter | 事件循环,Future

    在程序执行过程如果有异步操作,这个操作就会添加到队列,当发现队列不为空时,就会然后不断的从队列取出事件在执行 Microtask Queue 一个顶级的队列,只要这个队列里面不是空的,就一定会执行该队列的任务...FutureBuilder 的作用就是根据 future 的状态来判断当前页面需要显示哪些 widiget,例如 future 在等待的时候显示加载框,完成之后显示内容等。...if (snap.hasError) { return Text(snap.error); } // 等待显示加载框...== null ?...做的小游戏 在日常开发StreamBuilder 还是挺实用的,这次我们用 StreamBuilder 来做一个小游戏,先看效果: 从上面的动画来看,可以将其分为三个部分,第一个部分则是底部的键盘

    4.3K10

    《Linux命令行与shell脚本编程大全》第十八章 图形化桌面环境的脚本编程

    实例: 1)msgbox部件窗口显示一条简单的消息,直到用户单击ok按钮才消失、 ? 2)yesno部件 允许用户对窗口显示的问题选择yes或no。会生成两个按钮。...3)textbox部件窗口显示大量的信息的极佳办法。会生成一个滚动窗口显示由参数指定的文本 ? 4)menu部件 创建文本菜单的窗口版本。需要为每个选项指定标号和文本。...5)fselect部件 可以用fselect部件来浏览文件的位置并选择文件 选择的目录在STDERR。 ? 18.2.2 dialog选项 可以在dialog命令定制很多不同的选项。...-eq 1 ] # 获取退出状态码,如果失败(1)则退出。  ...gdialog     zenity 1. zenity部件 zenity允许用命令行选项创建不同窗口部件。后面也是接部件名 再加参数 还提供了一些非常酷的高级对话窗口

    1.3K50

    java GUI 快速入门

    创建一个窗口,要继承 Frame,同时会继承 Frame 的一些方法; Frame : super 方法可以设置窗口标题; setSize 设置窗口大小,(width,hight) setVisible...设置是否显示窗口,true 显示,false 隐藏 setLayout(new FlowLayout());用于设置窗口布局; add(组件); 用于向窗口添加组件,例如按钮等。...简单来说 B 告诉 A ,如果 A 怎么样了,就去做一件事情C。 实现事件流程 我们继续利用上面的窗口,实现按钮点击时,改变窗口背景颜色。...()(); // 获取源对象 布局 AWT ,主要有 6 布局方式。...() : 获取部件显示字体 Graphics getGraphics(): 获取部件的Graphics属性对象 void setBackground(Color c) : 设置部件的背景 void

    1.6K40
    领券