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

setState上的SliverList未更新为新列表

在Flutter开发中,setState是一个用于通知Flutter框架进行重建界面的方法。SliverList是Flutter中的一个可滚动组件,用于展示一个可变长度的垂直列表。

根据提供的问答内容,这里涉及到在使用setState时SliverList未更新为新列表的问题。要解决这个问题,我们可以按照以下步骤进行:

  1. 确保setState方法被正确调用:首先,要确保在数据发生变化时调用了setState方法。只有在setState方法被调用时,Flutter框架才会重新构建界面。
  2. 更新数据源:在setState方法内部,需要将SliverList所使用的数据源更新为新的列表数据。可以通过改变列表的引用或者使用List的内置方法来实现数据源的更新。
  3. 重新构建SliverList:在setState方法内部,将SliverList组件重新构建,以更新显示的内容。可以通过将SliverList组件封装在一个单独的方法中,并在setState方法内部调用该方法来实现。

以下是一个示例代码,演示如何在setState中更新SliverList的数据源:

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

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3']; // 初始数据源

  void updateList() {
    // 模拟更新数据源
    items = ['Item A', 'Item B', 'Item C'];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(
                title: Text(items[index]),
              ),
              childCount: items.length,
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            updateList(); // 更新数据源
          });
        },
        child: Icon(Icons.refresh),
      ),
    );
  }
}

在上述示例中,我们将初始数据源设置为['Item 1', 'Item 2', 'Item 3'],并在updateList方法中将数据源更新为['Item A', 'Item B', 'Item C']。当点击FloatingActionButton时,会调用setState方法,触发重新构建界面,从而更新SliverList的内容为新的列表数据。

注意:在实际开发中,数据源的更新可能会涉及到网络请求、数据库操作等异步操作。这时,需要在异步操作完成后再调用setState方法,以确保数据源的更新和界面的重建同步进行。

在腾讯云中,相关的云产品推荐是COS(对象存储服务),用于存储和管理大量非结构化数据,如图片、视频等。COS具有高可用性、高扩展性和低成本等优势。更多关于腾讯云COS的信息,您可以参考官方文档:腾讯云对象存储(COS)

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

相关·内容

实现点击换一批来切换内容,flutter之CustomScrollView【flutter20个实例之八】

:顶端栏,一个最基本软件 Text:文本 Container:布局组件 CustomScrollView:自定义滚动效果组件,比如列表和网格组件都可以包含在其中 SliverGrid:网格视图组件 SliverList...:列表控件 InkWell:效果控件,可以给其他widget包裹一个点击效果 ListTile:标题组件,通常填充listview 2.首先设置下标题样式 getItem是我们主内容 @override...,判断当前内容是否满足18条(一屏展示数目) 如果不满足,说明最后一页了,重置页码1 如果满足,说明当前数据>=18,后面可能还有数据,页码+1 然后请求数据,_getData()是封装一个请求数据函数...SliverList( delegate: SliverChildListDelegate([ ListTile( onTap:...)); } //核心内容 Widget getItem() { return CustomScrollView(slivers: [ SliverList

1.4K20

UITableView在Flutter中是什么?

不过,这种创建方式要求提前将所有子Widget一次性创建好,而不是等到他们真正在屏幕显示时候才会创建,所以有一个很明显缺点,就是性能不好。因此,这种方式仅适用于列表中含有少量元素场景。...当列表滚动到相应位置时,ListView会调用该方法创建对应子Widget。 itemCount,表示列表数量,如果空,则表示ListView无限列表。...我定义了一个拥有100个列表元素ListView,在列表创建方法中,分别将index值设置ListTile标题与子标题。...以一个有着封面头图列表例,我们希望封面头图和列表这两层视图滚动联动起来,当用户滚动列表时,头图会根据用户滚动手势,进行缩小与展开。...经分析得出,要实现这样需求,我们需要两个Sliver:作为头图SliverAppBar,与作为列表SliverList

5.6K10
  • Flutter | Slivers 系列

    概述 CustomScrollView:一个滚动容器,改组件不接受任何 child,但是你可以直接提供 Slivers 已创建各种滚动效果,例如页面中有多个可滑动列表,如 Appbar, 列表,网格...最主要原因就是可以在 slives 中添加多个组件,如在列表上面和下面添加更多内容。...并且 slivers 中,如果存在多个列表的话也是支持动态加载,而不是会一次性全部渲染完 各式各样 Slivers 组件 SliverList 在上面的例子中 SliverList 使用是 SliverChildBuilderDelegate...: ,限制后: SliverPrototypeExtentList 一般情况下,只要固定了列表中元素高度,就可以提升不小性能,但是在实际项目中,想要固定元素高度是非常麻烦,就算是列表元素只有一行文字...在 SliverPrototypeExtentList 中,可以通过 prototypeItem 来传入一个原型,这个原型并不会渲染到屏幕,在运行过程中,Flutter 会将原型尺寸计算出来,之后就会把所有的元素尺寸设置成这个原型尺寸

    1.5K11

    Flutter 双向聊天列表效果进阶优化

    聊天列表是一个很扣细节场景,在之前 《Flutter 实现完美的双向聊天列表效果,滑动列表知识点》 里,通过 CustomScrollView 和配置它 center 从而解决了数据更新列表跳动问题...,但是这时候又有网友提出了问题: image 如下动图所示,可以看到虽然列表在添加数据后虽然没有发生跳动,但是在列表数据长度足够情况下,顶部会有一篇空白。...center 上面的 SliverList 列表会被变成以 center 起点反向顺序显示,用于加载旧数据; image 当然,这里有一点需要注意局就是:起始进来时加载第一页数据应该是用绿色正向...old 数据场景,所以不会产生滑动; 如果 old 数据足够,那默认就足以撑满列表; 而随着 new 数据增加,页面也会被填满从而可以正常滑动并且充满,所以从这个实现看会更加合理。...还有什么可以优化小技巧? 比如增加判断列表是否处于底部,决定在接受到数据时是否滑动到最新消息。

    64240

    内核EasyDSS开发推流直播实时更新列表顺序功能实现

    目前我们除了在对内核EasyDSS进行原有功能测试之外,也设计了一些便于运维小功能,比如在直播列表中,当收到某条直播有推流信息时,我们要确保该条数据实时更新,使最近推流直播排在列表最上方,方便查询检测...在实现方式,该功能还是比较简单,首先当服务收到推流回调时,将数据库中该条直播记录update_at更新到当前时间即可。...具体代码如下: 之后在前端获取列表时,以update_at时间排序,这样最近推流直播就会排在首页,sql查询语句如下: 测试一下完成效果: 开启推流前,测试通道排在下方: 开启推流后,测试通道数据会重新刷到第一个...: 测试过朋友都知道,EasyDSS视频平台观看视频推流直播不需要安装插件,网页直接可以播放,通过浏览器进入平台即可进行配置,对用户来说,便捷可控,无需另行搭建服务器,具有很大优势。...并且现在EasyDSS已经替换了内核,在使用和运行都具备更高优势,我们欢迎大家对EasyDSS下载和测试。

    61320

    Flutter 3.13 组件更新 | 欢迎 Slivers 体系 5 位成员

    介绍一下 5 个 Sliver 组件 在 Flutter 3.13 更新中,增加了 5 位 Sliver 相关组件,用于滑动视口中,完成特定功能。这篇文章将介绍一下它们作用和使用场景。...具体使用场景是: 比如下面是 QQ 中分组列表滑动效果,组名下有若干成员,组标题在滑动中会进行吸附,而且在滑动到下一组标题时,一标题会被滑出;同样,下滑时展现也是如此。...其中: SliverConstrainedCrossAxis:指定滑片交叉轴尺寸。 SliverCrossAxisExpanded:指定滑片交叉轴占据份额。...,其实很简单,塞入 slivers 列表就行了。...之前需要对滑片进行装饰,是很难做到,因为滑块在布局受到是滑动约束 SliverConstraints ,而不是盒约束 BoxConstraints。

    95620

    Flutter 实现完美的双向聊天列表效果,滑动列表知识点

    如何在 Flutter 实现一个聊天列表,相信大家都不会觉得有什么困难,不就是一个 ListView ,然后根据类型显示渲染数据吗?这有什么困难?...理论确实没什么问题,但是有一个需求场景,却会出现一个无法修复问题,那就是:聊天列表需要双向插入数据。 双向插入数据会导致 ListView 什么问题?...所以本质SliverList 变长了,起点变了,从而在 Viewport 里位置发生了变化。 那如何去解决这个问题呢?有人可能就会说,那我们让他 jump 回原来位置不就行了吗?...也就是,如果我们旧数据插入到 center 之前,数据插入到 center 之后,那岂不是列表就不会发现滑动了? 那我们如何配置 center ?...如下面代码所示,因为聊天列表场景,我们列表是 reverse ,所以需要将数据 SliverList 放在 centerKey 上面,把旧数据 SliverList放在 centerKey

    1.3K10

    Flutter

    :判断Widget和老Widget是否是同一个类型: 如果不是同一个类型,那就把Widget、Element、RenderObject分别从它们树(包括它们子树)移除,然后创建对象; 如果是一个类型...更新 Widget 状态更新,主要由 3 个方法触发: setState、didchangeDependencies 与 didUpdateWidget。...setState:我们最熟悉方法之一。当状态数据发生变化时,我们总是通过调用这个方法告诉 Flutter:“我这儿数据变啦,请使用更新数据重建 UI!”...以一个有着封面头图列表例,我们希望封面头图和列表这两层视图滚动联动起来,当用户滚动列表时,头图会根据用户滚动手势,进行缩小和展开。...经分析得出,要实现这样需求,我们需要两个 Sliver:作为头图 SliverAppBar,与作为列表 SliverList

    1.9K40

    【FlutterUnit周边】SliverPersistentHeader使用指南

    我们要构建是比较复杂滑动效果, 可以使用CustomScrollView,其中slivers接收Sliver家族组件列表。...如下: _buildSliverList负责构建SliverList,其中颜色item组件构建交由_buildColorItem 。...查看效果: 可以看到上面的build方法作用就是构建组件,shrinkOffset偏移量 头部栏组件开始完全展开maxExtent高度,随着列表滑而滑,可以从日志里看出最大滑高度maxExtent...最后欢迎关注我开源项目 FlutterUnit,FlutterUnit相关周边文章会陆续更新,其中包括一些Flutter组件用法,或一些FlutterUnit实现细节,FlutterUnit重大更新等...@张风捷特烈 2020.10.25 允禁转 ~ END ~

    97620

    不一样角度带你了解 Flutter 中滑动列表实现

    image 以 ListView 例,如上图所示是 ListView 滑动过程变化,其中: 绿色 Viewport 就是我们看到列表窗口大小; 紫色部分就是处理手势 Scrollable,让黄色部分...image 以 ListView 例,如上图所示是一个高 701 ListView ,实际布局渲染之后,对于 SliverList 输出 SliverGeometry 而言: 设定里每个 item...951,按照每个 item 高度是 114 ,那么其实是有 8.3 个 item 高度,取整数也就是 9 个 item ,最终得到整体需要处理区域大小 114 * 9 = 1026 ,在 SliverList...最后顺便聊下 CustomScrollView ,事实就是一个开放了可自定义配置 RenderSliver 数组滑动控件,例如: 通过利用 SliverList + SliverGrid 就可以搭配出多样化滑动列表...; 通过 CupertinoSliverRefreshControl + SliverList 实现类似 iOS 原生下拉刷新列表; 其他可用内置 Sliver 还有:SliverPadding

    2.2K51

    不一样角度带你了解 Flutter 中滑动列表实现

    滑动过程变化,其中: 绿色 Viewport 就是我们看到列表窗口大小; 紫色部分就是处理手势 Scrollable,让黄色部分 SliverList 在 Viewport 里产生滑动; 黄色部分就是...image.png 以 ListView 例,如上图所示是一个高 701  ListView ,实际布局渲染之后,对于 SliverList 输出 SliverGeometry 而言: 设定里每个...从这个例子可以看出,「RenderSliver 在实现可滑动列表开销和逻辑,会比直接使用 RenderBox 好和灵活很多」,同时也是为什么 Viewport 里需要使用 RenderSliver ...最后顺便聊下 CustomScrollView ,事实就是一个「开放了可自定义配置 RenderSliver 数组滑动控件」,例如: 通过利用 SliverList + SliverGrid 就可以搭配出多样化滑动列表...; 通过 CupertinoSliverRefreshControl +  SliverList 实现类似 iOS 原生下拉刷新列表; 其他可用内置 Sliver 还有:SliverPadding

    1.1K30

    flutter中对列表性能优化

    嵌套列表 - ShrinkWrap 与 Slivers 使用 ShrinkWrap 列表列表 下面是一些使用ListView对象呈现列表列表代码,内部列表shrinkWrap值设置 true。...” “另请注意:虽然ListView.builder(默认情况下)有效地构建其子项,您节省构建屏幕外小部件不必要成本,但设置 shrinkWraptrue覆盖此默认行为!...而且你滑动时候列表会抖动! 重新构建嵌套列表 要了解如何使您用户免受卡顿威胁,请等待我第二节,下一节将使用 Slivers 而不是 ListViews 重建相同 UI。...使用 Slivers 列表列表 下面的代码构建了与之前相同 UI,但这次它使用Slivers 而不是收缩包装ListView对象。本页其余部分将引导您逐步完成更改。...SliverList类是比原始略有不同ListView类,与主要差异是的外观delegate。

    3.5K00

    Flutter | 滚动组件,ListView,GridVIew等

    itemCount:列表数量,如果 null ,则代表无限列表 可滚动组件构造函数如果需要一个列表项 Builder ,那么通过构造函数构建通常就是支持 Sliver 懒加载模型,反正则不支持...SliverChildDelegate 用来给 ListView 生成列表项组件;并且实现了拉刷新,下拉加载,列表头等常见样式。...0.0, double crossAxisSpacing = 0.0, double childAspectRatio = 1.0, }) 复制代码 maxCrossAxisExtent 子元素在横轴最大长度...因此,为了能让可滚动组件能和 CustomScrollView 配合使用,Flutter 提供了一下可滚动组件 Sliver 版,如 SliverList,SliverGrid 等,实际 Sliver...但是由于 SliverList 等本身是支持 Sliver ,所以他们自己应该是支持 Sliver ,而不是对应子项 栗子: class CustomScrollViewTest extends

    8.5K20

    干货 | Flutter控件CustomScrollView原理解析及应用实践

    图8 dragUpdate触摸事件 如图8所示,这个手势代表用户在dragStart后在屏幕move更新值。 4)DragEnd ?...比如当用户手势被确认识别成drag动作后就会发起一个“DragScrollActivity”,负责此后用户手势在此基础滑动变化处理,一直到用户手势抬起结束后怎么反应。...比如说用来展示长列表SliverList在做内部布局时候,如果SliverList发现自己child已经全部布局完了,但是scrollview给offset还没有填满,这时候就会认为scrollview...我们还是用展示向下布局列表SliverList”作为代表来介绍一下。 3.4.1 懒加载机制 ?...除了SliverList,sdk中Grid,开源瀑布流组件StaggeredGrid等长列表实现懒加载机制也是类似,只是排列自己子child布局方式不一样。

    1.5K30

    啦 | MediaPackage全球用户提供专业且稳定视频封装及源站服务

    随着多屏时代到来,视频供应商需要为客户提供可从任意终端轻松访问,且数字高清视频内容,而视频封装则是此工作流程中最重要步骤之一。...通过对视频内容进行重塑,将已经编码压缩好视频轨和音频轨按照一定格式放到直播源站中,使视频供应商能够大规模、安全、稳定地分配视频流媒体。...然而,视频封装也供应商带来了包括基础设施成本增加、安全隐患、适应持续变化生态系统在内诸多技术挑战。...MediaPackage是基于腾讯云全球部署计算资源和腾讯自研音视频技术而构建视频封装及源站服务,帮助视频供应商在全球范围内轻松、安全地封装和分发视频。...当服务器出现异常时,MediaPackage内置监控系统会自动剔除出现异常节点,保证区域资源高可靠性。

    63520

    Flutter 粘合剂CustomScrollView控件

    Sliver系列组件有很多,比如SliverList、SliverGrid、SliverFixedExtentList、SliverPadding、SliverAppBar等。...相互嵌套场景 在实际业务场景中经常见到这样布局,顶部是网格布局(GridView),然后是列表布局(ListView),滚动时候做为一个整体,此场景是无法使用GridView+ListView来实现...primary设置true时,不能设置controller,因为primarytrue时,controller使用PrimaryScrollController,这种机制带来好处是父组件可以控制子树中可滚动组件滚动行为...controller滚动控制器,可以监听滚到位置,设置滚动位置等,用法如下: _scrollController = ScrollController(); //监听滚动位置 _scrollController.addListener...:内容超过一屏 拉有回弹效果 ClampingScrollPhysics :包裹内容 不会有回弹

    2K20
    领券