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

状态改变时重置颤动CustomScrollView

是指在Flutter中使用CustomScrollView组件时,当状态发生改变时,需要重置CustomScrollView的滚动位置。

CustomScrollView是Flutter中用于创建自定义滚动效果的组件,它可以包含多个Sliver组件,如SliverAppBar、SliverList、SliverGrid等。当CustomScrollView中的状态发生改变时,比如数据更新导致列表长度变化,或者滚动位置发生变化,需要重置CustomScrollView的滚动位置,以保证用户在滚动过程中不会出现异常的颤动效果。

为了实现状态改变时重置颤动CustomScrollView,可以使用ScrollController来控制CustomScrollView的滚动位置。首先,在CustomScrollView的外部定义一个ScrollController对象,并将其传递给CustomScrollView的controller属性。然后,在状态发生改变时,通过ScrollController的animateTo方法来重置CustomScrollView的滚动位置。

以下是一个示例代码:

代码语言:txt
复制
class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      controller: _scrollController,
      slivers: [
        // 添加Sliver组件
      ],
    );
  }

  void resetScrollPosition() {
    _scrollController.animateTo(
      0,
      duration: Duration(milliseconds: 300),
      curve: Curves.easeInOut,
    );
  }

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

在上述代码中,我们创建了一个MyWidget组件,并在其状态类中定义了一个ScrollController对象。在build方法中,将该ScrollController对象传递给CustomScrollView的controller属性。在resetScrollPosition方法中,通过animateTo方法将滚动位置重置为0。在组件销毁时,需要调用ScrollController的dispose方法来释放资源。

这样,当状态发生改变时,可以调用resetScrollPosition方法来重置CustomScrollView的滚动位置,从而实现状态改变时重置颤动CustomScrollView的效果。

推荐的腾讯云相关产品:腾讯云服务器(CVM)、腾讯云对象存储(COS)、腾讯云数据库(TencentDB)等。你可以通过访问腾讯云官方网站获取更多关于这些产品的详细信息和介绍。

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

相关·内容

iOS开启热点或定位状态栏变化导致布局改变

最近在项目中遇到一种情况就是当其他应用(如百度地图)在使用定位,或者开启手机热点,状态栏会显示"百度地图"正在使用您的位置信息、个人热点:1个连接。...并且状态栏将会变为蓝色或红色,导致某些控件的布局下移。如下图映客APP的Bar。 ?...原因 当使用某些系统功能(如上述的定位,热点,或者录音),系统的状态栏高度会由原来的20变为40,这时View的高度自然就会减少20,这就导致了某些控件布局的改变(一般是下移20) 解决方法1 第一种方法比较简单...解决方法2 第二种方法就比较麻烦,我们需要监听状态栏的高度变化(UIApplicationWillChangeStatusBarFrameNotification),然后再对约束进行处理,和键盘监听类似

1.7K50

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

树更像是一个媒介,因为Flutter借鉴了当今比较流行的React的思想,它并不希望我们还是像以前在Native的时候直接去操作RenderObject,而是希望我们在它的框架下面只配置我们想要什么,以及状态怎么改变...“applyPhysicsToUserOffset”方法:当用户手势滑动超出scrollable最大或最小的滑动界限时,也就是我们常说的overscroll状态,对用户手势做出一定的矫正。...之所以能够控制,是因为在内部绑定了前面讲的scrollPosition,因此能让我们利用它去控制CustomScrollView滑动,以及监听CustomScrollView最新的状态。...又通过Controller与外界的CustomScrollView的使用者串联,让外界可以操控和获得CustomScrollView的滑动状态。...至此CustomScrollView第一个重要的部分滑动位置改变的控制,我们基本就分析完了,接下来看一下有了这个具体的滑动的Offset,显示的内容怎么展示。

1.5K30
  • Flutter开发实战分析-pesto_demo解析

    listView 分析动画 头部的Toolbar是可以伸缩的头部,并且带有动画(重点和难点) 转场动画 分析事件 点击搜索和floatingActionButton弹出SnackBar 保存菜单的喜欢的状态...滚动,我们不需要图片进行透明度的渐变。 再次修改 既然这样,我们就不能用自带的来完成效果了。再次观察预期的效果,发现,关键点:背后的图片是不动的。...我们这里需要根据滚动的量去改变FlexibleSpaceBar内我们创建的logo和图标的大小。...@override Widget build(BuildContext context) { //得到状态栏高度 final double statusBarHeight = MediaQuery.of...cc.gif 可以观察到,需要的实现效果有三个 上下的padding发生改变 通过直接改变包裹的padding值来改变

    2.3K20

    《Flutter》-- 6.高级组件

    CustomScrollView作为容器组件,子组件不能是ListView、GridView等可滚动组件,会造成滚动冲突。...CustomScrollView组件的构造函数: class CustomScrollView extends ScrollView { const CustomScrollView({ Key...bool addAutomaticKeepAlives = true,//是否将列表项包裹在AutomaticKeepAlive组件中,默认值为true,表示列表项滑出视图窗口不会被垃圾回收,会保存之前的状态...可以做以下两点性能优化: 1)尽可能利用好shouldRepaint()的返回值 如果绘制的内容不需要依赖外部状态,返回false即可;如果绘制过程需要依赖外部状态,可以在shouldRepaint()...中判断依赖的状态是否改变,如果已改变,则返回true并执行重绘操作,反之则返回false不执行重绘; 2)绘制应尽可能多地进行分层 因为复杂的自绘组件都是由很多功能构成的,如果都写在一个方法中,不利于阅读

    10.6K20

    【FlutterUnit周边】SliverPersistentHeader使用指南

    如下效果: 在上滑Tap栏会逐渐变矮,直到最小值。下拉到顶变矮的Tap栏会逐渐变高,直到最大值 FlutterUnit本身主页比较复杂,本文就来写一个最简实践,用最少的代码来实现这个效果。...程序入口 在 main 函数中使用SystemChrome.setSystemUIOverlayStyle让状态栏变透明 测试 demo 的核心组件在 SliverPersistentHeaderDemo...void main() { //设置透明 状态栏 SystemUiOverlayStyle style = SystemUiOverlayStyle(statusBarColor: Colors.transparent...CustomScrollView不是本文的主人公,这里不多说,以后会有专篇。...上滑: 顶部会滑出 上滑:顶部会滑出 下拉:直到滑到顶端,顶部才会展开 下拉: 任意位置下拉, 空间会展开 ---- 三、使用 SliverPersistentHeader 1.

    97220

    Flutter实现一个酷炫带动画的列表型多选日历组件

    笔者在实现该功能把MonthView作为SliverList的一个build item。...放置到CustomScrollView的Sliver里面,这里复习一下,Sliver的作用其实就是“粘合剂”的作用,把多个组件粘合起来形成一个滚动区域,布局如下: CustomScrollView(...selectStartTime; selectEndTime; }); } 复制代码 onSelectDayChanged其实就是对用户点击DayNumber行为的事件回调,这是一个典型的子组件调用父组件改变状态的代码段...总结一下,通过本例可以学习到以下知识点 路由参数传递和参数回传 父子组件正向与逆向通信 日期函数DateTime的运用 Sliver在CustomScrollView中的运用 日历绘制方式 底部弹出组件使用方式

    1.7K30

    Flutter开发实战分析-animation_demo瞎复写总结

    上一遍文章的CustomScrollView 左右滚动,切换页面。嗯。PageView。 PageView可以让像是一页一页滑动。而且每个页面的大小是一样的。...像是大体想象的框架应该是CustomScrollView.然后初始的SliveAppBar的高度应该是屏幕的高度。...确定中间状态 tColumnToRow 整体的动画,在Flutter中有很方便的lerp函数可以确定中间的状态。只要传入我们进度的百分比就可以。这个百分比可以由滑动的过程中的offset传入。...计算tColumnToRow 这个值也是根据我们滑动的整体状态来计算的。 LayoutId 这个一定要记住!...这边文章我们熟悉了 CustomScrollView的MultiChildLayoutDelegate 通过CustomScrollView的MultiChildLayoutDelegate的performLayout

    2.5K30

    车床震颤的原因及排除

    这些增加的切削力会导致切削过程中出现颤动。 检查您的刀具并在必要更换它。 随着时间的推移,刀具出现磨损是正常现象。在稳定的加工过程中,刀具磨损是可以预测的。...如果必须超过这些限制,则必须改变切削参数以补偿稳定性的降低——降低切削深度、进给率或主轴速度来补偿。 注意:当您需要极端的长径比来加工孔,可以使用特殊的减振镗杆。...将镗杆固定在支架中的固定螺钉可以改变镗杆的共振频率。BOT 支架有四个紧定螺钉;每边两个。最佳做法是仅拧紧支架一侧的固定螺钉。这可确保杆牢固地靠在 BOT 支架的孔上。...刀片负载太轻 当切削速度(表面英寸每分钟或米每分钟)太高或进给率(每转进给)太低,切削可能会变得不稳定并开始共振,从而留下颤动的表面光洁度。 降低切削速度或提高进给量以稳定切削。...对工件支撑不足 如果工件没有得到适当的支撑,它将开始振动并在切口中引入颤动。 一般来说,如果工件延伸超过卡盘的部分直径与长度之比超过 3:1,请使用尾座来稳定切削。

    91910

    声学工程师应知道的150个声学基础知识(全篇)

    52、声音在室内两面平行墙之间来回反射产生多个同样的声音,称为颤动回声。 53、由于反射使反射声与直达声相差50ms以上,会出现回声。...56、由于简并等原因使原声音信号频谱发生改变而被赋予外加的音色导致失真,称为声染色。 57、声场中直达声声能密度等于混响声声能密度的点与声源的距离称为混响半径。...58、听音点在混响半经以内,直达声起主要作用。 59、听音点在混响半经以外混响声起主要作用。 60、声源振动使空气产生附加的交变压力,称为声波。...129、由于室内频率响应的变化,使原信号频谱有了某种改变,称为声染色。 130、不属于多孔吸声材抖:石膏板。 131、属于多孔吸声材料:岩棉。...147、两面平行墙表面加扩散体或改变平行角度,可以解决颤动回声的缺陷。 148、一支电容话筒最高声压级为126dB,等效噪声级为20dB,其动态范围为106dB。

    2.9K20

    Flutter可滑动组件

    Flutter中有一个可以完成这样滚动效果的Widget:CustomScrollView,其成员变量slivers可以接收一组Sliver,从而达到统一管理多个滚动视图的目的。...上面提及的部分组件是和可滚动组件无关的,它们主要是为了结合CustomScrollView一起使用,这是因为CustomScrollView的子组件必须都是Sliver。...通过以上的分析可知,若CustomScrollView中的Sliver用到了SliverChildBuilderDelegate,则此CustomScrollView也会包含懒加载的特性。...该回调可以返回一个布尔值,代表是否阻止该事件继续向上冒泡,如果为true,则冒泡终止,事件停止向上传播,如果不返回或者返回值为false ,则冒泡继续。...// ScrollableState() 表明需同步滑动状态 _tabController = TabController(length: 3, vsync: ScrollableState()

    7.2K30

    Flutter实战 | 从 0 搭建「网易云音乐」APP(三、每日推荐、推荐歌单)

    看到这个效果,有经验的同学可能直接就会喊出:CustomScrollView!! 没错,当前页一共分为三部分: ?...1.SliverAppBar2.SliverAppBar 的 bottom3.SliverList 整个页面就是用 CustomScrollView 来做的,但是有一点不同: 平时我们在使用 SliverAppBar...1.标题,不用多说,是一样的2.SliverAppBar 展开状态的内容,是不是可以由外部传入3.播放全部,也是一样的,后面有个「共多少首」,也可以由调用者传入4.最下面的歌单,是不是也可以封装出一个组件来...5.忘记标了,还有一个是SliverAppBar展开的模糊背景,也可以由调用者传入 so,我们从上往下来封装。...而在写UI,也一定要多看,多想,这个能不能封装出来?那个能不能提取? 这样以后再开发的话,真的是非常简单。

    1.5K20
    领券