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

当嵌套在AnimatedBuilder()中时,为什么AnimatedSwitcher()不起作用?

当嵌套在AnimatedBuilder()中时,AnimatedSwitcher()不起作用的原因是AnimatedBuilder()会创建一个Animation对象,并将该对象传递给子组件进行动画处理。而AnimatedSwitcher()是一个特殊的组件,它在子组件切换时会执行过渡动画。然而,由于AnimatedBuilder()创建的Animation对象与AnimatedSwitcher()内部使用的AnimationController对象不是同一个,导致AnimatedSwitcher()无法正确地控制动画。

为了解决这个问题,可以通过将Animation对象传递给AnimatedSwitcher()来实现动画效果。具体做法是在AnimatedBuilder()的builder函数中,将Animation对象作为参数传递给AnimatedSwitcher()的transitionBuilder属性。这样,AnimatedSwitcher()就能够正确地使用Animation对象来控制动画了。

以下是一个示例代码:

代码语言:txt
复制
AnimatedBuilder(
  animation: animationController,
  builder: (BuildContext context, Widget child) {
    return AnimatedSwitcher(
      duration: Duration(milliseconds: 500),
      transitionBuilder: (Widget child, Animation<double> animation) {
        return ScaleTransition(
          scale: animation,
          child: child,
        );
      },
      child: // 子组件,
    );
  },
);

在上述代码中,我们将Animation对象传递给了AnimatedSwitcher()的transitionBuilder属性,并使用ScaleTransition作为过渡动画效果。你可以根据需要选择不同的过渡动画效果,比如FadeTransition、SlideTransition等。

需要注意的是,AnimatedSwitcher()的child属性必须是一个可唯一标识的组件,例如使用Key来标识。这样,AnimatedSwitcher()才能正确地切换子组件并执行过渡动画。

推荐的腾讯云相关产品:腾讯云移动应用分析(MTA),产品介绍链接地址:https://cloud.tencent.com/product/mta

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

相关·内容

Flutter | 动画

然后根据当前动画值去构建 UI ,当所有动画帧依次触发时,动画值就会改变,对应的 UI 就会发生变化,最终就可以看到完整的动画; duration 表示动画执行的时长,通过它可以控制动画的速度。...例如 Curves.elasticln 等弹性曲线会生成大于或小于默认范围的值 Ticker 当创建一个 AnimationController 时,需要传递一个 vsync 参数,它接收一个 TickerProvider...后,AnimatedBuilder 再将其传递到匿名构造器,然后将该对象作为其子对象,最终的结果是 AnimatedBuilder 返回的对象插入到 widget 树中;直接看一下源码即可理解; 这种写法会带来三个好处...为什么要将这种可飞行共享组件称为 hero(英雄),有一种说法是美国文化中超人是可以飞的,那是美国人心中的大英雄,还有漫威中的超级英雄基本都会飞,所有 flutter 就对这种会飞的 widget 起了一个附有浪漫主义的名字..., // 动画构建器 this.layoutBuilder = AnimatedSwitcher.defaultLayoutBuilder, //布局构建器 }) 复制代码 当 AnimatedSwitch

1.7K10
  • 《Flutter 动画系列一》25种动画组件超全总结

    动画运行的原理 任何程序的动画原理都是一样的,即:视觉暂留,视觉暂留又叫视觉暂停,人眼在观察景物时,光信号传入大脑神经,需经过一段短暂的时间,光的作用结束后,视觉形象并不立即消失,这种残留的视觉称“后像...dispose方法中要记住释放AnimationController。...Flutter 25种动画组件介绍 Flutter中提供了大量的动画组件及详细用法: AnimatedBuilder:http://laomengit.com/flutter/widgets/AnimatedBuilder.../ AnimatedPositionedDirectional:http://laomengit.com/flutter/widgets/AnimatedPositionedDirectional/ AnimatedSwitcher...:http://laomengit.com/flutter/widgets/AnimatedSwitcher/ AnimatedIcon:http://laomengit.com/flutter/widgets

    1.4K20

    【Flutter 专题】71 图解基本隐式动画 Widget

    和尚前段时间自定义 ACEStepper 步进器时,在 ACEStep 中尝试过 AnimatedCrossFade 用于在两个 Widget 切换过度,简单实用,今天和尚重点学习一下并尝试相关隐式动画...alignment 为尺寸动画切换时对齐位置,当两个 Widget 大小不同时效果明显,和尚尝试了两种位置进行对比; alignment: Alignment.bottomRight, alignment...this.switchOutCurve = Curves.linear, // 切换隐藏时动画曲线 this.transitionBuilder = AnimatedSwitcher.defaultTransitionBuilder...布局构造器 }) 分析源码可知,AnimatedSwitcher 更加灵活,可自由设置切换动画之间显示隐藏动画效果;当 child Widget 内容或 Key 有变更时,old child...child 中 old/new Widget 一般是以 Stack 层级存储,在动画过程中两个 Widget 均要展示,可以通过 layoutBuilder 布局构造器进行自定义;和尚尝试调整对齐方式和只展示

    82131

    【- Flutter 性能 -】都 2021 年了,你的动画还在用 setState ?

    当左侧很高时,说明你的界面写的有问题。看下面的两个 UI 帧, 可以看出 Build 占了很大部分,就说明 UI 可能存在某些低效率情况。 ? ?...点击中间时进行动画触发。...从下面的 UI 帧中 可以看出,同样的情景,使用 AnimatedBuilder 进行动画可以很有效地使 Build 过程缩短。 ? ?...---- 4.AnimatedBuilder 源码解析 首先,AnimatedBuilder 继承自 AnimatedWidget,成员有构造器 builder 和子组件 child,对象创建时还需要...---- 这样来看,AnimatedBuilder 似乎也没有什么神秘的,了解了这些,再去看 Flutter 框架中的封装的各种动画组件,你就会豁然开朗,这便是知一而通百。

    1K20

    【Flutter 组件集录】FadeTransition| 8月更文挑战

    这样在 _ctrl 动画控制器开启时,其子组件就可以执行透明度渐变动画。...2.RenderAnimatedOpacity 源码分析 对于 FadeTransition 组件来说,最神奇的应该是:为什么透明度会跟随 Animation 对象不断触发重绘,从而进行动画。...当 child 非空时,如果 _alpha = 0 就什么都不需要画,直接返回。如果 _alpha = 255 ,则直接绘制 child。...如果有透明度时,会通过 context.pushOpacity ,创建一个透明层 layer 来完成透明功能。该方法在 Opacity 组件一文中介绍过了,这里不再赘述。 3....首先,很明显使用 AnimatedBuilder 组件比较麻烦;其次使用 AnimatedBuilder 组件,每次动画器数值变化都会执行 builder 回调来创建组件,也就是说 Opacity 组件会被创建很多次

    83120

    【Flutter 实战】一文学会20多个动画组件

    显示动画组件 回顾上一篇【动画核心】的文章中创建动画三个必须的步骤: 创建 AnimationController。...而 AnimationController 的创建需要开发者自行创建,为什么封装在自定义组件内?这个后面会介绍。...不难看出,使用隐式动画控件,代码更简单,而且无需管理 AnimationController 的生命周期,有人觉得隐式动画组件多方便啊,为什么还要显示动画组件呢?...显示动画组件和隐式动画组件中各有一个万能的组件,它们是 AnimatedBuilder 和 TweenAnimationBuilder,当系统中不存在我们想要的动画组件时,可以使用这两个组件,以 AnimatedBuilder...选择显式动画组件,判断是否已经内置动画组件,如果没有,使用 AnimatedBuilder,有就直接使用内置动画组件。

    71920

    【Flutter 专题】105 图解自定义 ACEPageMenu 滑动菜单 (一)

    AnimatedBuilder 和尚需要 Menu 从屏幕四周滑动出来,此时一定需要 Animation 动画,而对于动画,和尚尝试用 AnimatedBuilder 来处理,虽然需要设置...AnimationController 首先需要设置一个 Animation 控制器,在指定的 Duration 时长内,屏幕绘制过程中,会线性的生成 0.0-1.0 的数值用来控制动画的开始与结束以及设置动画的监听...AnimationStatus.completed 为动画执行结束时的回调监听; c....AnimatedBuilder AnimationController 之后需要设置具体 Menu Widget 所在的 AnimatedBuilder 动画构造器;在其中设置平移动画,并与 AnimationController...ACEMenuDelegate,主要实现两个方法,分别为:确定要应用于子项的约束的 getConstraintsForChild() 和确定子项位置的 getPositionForChild(); 当提供对应的实例时

    53920

    Flutter | AnimatedCrossFade - 交叉淡入 Widget

    [1] 是否想起了那个组件:AnimatedSwitcher? 这两个控件有相似的地方,也有不同的地方。...这不就跟 AnimatedSwitcher 一样吗? 这么看起来确实其实没什么屌的,官方的demo只是给你一个简单的使用方法而已。...稍微深入一下源码 为什么会有鬼畜的效果?遇事不决看源码,去年在写文章的时候说过,Flutter 的源码里有特别多的注释和 demo。...[firstCurve]是倒置的,即当提供诸如[Curves.linear]之类的增长曲线时,它会淡出。[sizeCurve]是用于在淡出子项的大小和淡入子项的大小之间进行动画处理的曲线。...如果两个孩子的高度不同,则动画会在动画过程中通过对齐它们的顶部边缘来裁剪溢出的child,这意味着将裁剪底部。 当以不同的值重建现有的[AnimatedCrossFade]时,动画会自动触发。

    1.9K20

    Flutter 应用性能优化最佳实践

    如果改变的部分仅包含在 Widget 树的一小部分中,请避免在 Widget 树的更高层级中调用 setState()。 当重新遇到与前一帧相同的子 Widget 实例时,将停止遍历。...1.2 仅当需要的时候才应用效果 由于代价很大,请谨慎使用效果。一些效果的背后调用了性能代价很大的 saveLayer() 方法。 为什么 saveLayer 代价很大?...将内容绘制到离屏缓冲区可能会触发渲染目标切换,这些切换在较早期的 GPU 中特别慢。 一些在使用效果时的通用规则: 能不用 Opacity Widget,就尽量不要用。...当 120fps 的设备普及之后,便需要在 8ms 之内完成每一帧的渲染来保证流畅平滑的体验。 如果你想弄明白为什么 60fps 会带来平滑的视觉体验,请看视频 Why 60fps2....使用 AnimatedBuilder 时,请避免在不依赖于动画的 widget 的构造方法中构建 widget 树。动画的每次变动都会重建这个 widget 树。

    2.4K20

    Flutter —— 状态管理 | ScopedModel

    Scoped Model介绍 Scoped Model 利用 model 的方式,轻松的将数据模型从父 Widget 传递到它的后代,并且此数据 模型实现观察者模式,当数据改变时,会通知实现的子类...Scoped Model 原理 Model 继承了 Listenable 抽象类,在 Model 中实现了抽象方法,Listenable中体现了注册监听,notifyListener通知子类数据已经改变...must not be null. /// 子类不能为空,否则在下面会抛出异常throw new ScopedModelError(); /// 构建 _InheritedModel 这样就能解释为什么子类能够从父类中获取数据了...return AnimatedBuilder( animation: model, builder: (context, _) => _InheritedModel<T..._version, super(key: key, child: child); /// 当version 改变时 updata 更新 @override bool updateShouldNotify

    80330

    带你轻松掌握Flutter 动画开发核心技能

    如何使用动画库中的基础类给widget添加动画? 如何为动画添加监听器? 该什么时候使用AnimatedWidget与AnimatedBuilder在Flutter中有哪些类型的动画?...:启动动画; reverse({double from}):倒放动画; reset():重置动画,将其设置到动画的开始位置; stop({ bool canceled = true }):停止动画; 当创建一个...在下面的重构示例中,LogoApp现在继承自AnimatedWidget而不是StatefulWidget。AnimatedWidget在绘制时使用动画的当前值。...AnimatedBuilder是用于构建动画的通用widget,AnimatedBuilder对于希望将动画作为更大构建函数的一部分包含在内的更复杂的widget时非常有用,其实你可以这样理解:AnimatedBuilder...[AnimatedBuilder]()是渲染树中的一个独立的类, 与[AnimatedWidget类似,AnimatedBuilder自动监听来自Animation对象的通知,不需要手动调用addListener

    68410

    【C语言】“分⽀与循环第一章:开启创新之门,探索无尽可能性的第一篇章“

    当你看到这段代码时,你可能会认为答案是"haha"对吧?因为代码中的逻辑是如果a不等于0,那么就执行else子句并打印"haha"。但是当你运行这段代码时,实际的输出却是什么都没有。...哎这是为什么鸭? 这是悬空else的问题,如果有多个if匹配。...上面的代码排版让if和else对齐,可以记住这样一条规则,else总是跟最接近else和第一个if语句对齐,让我们在语句不成立的时候自然想到执行else子句,打印else是和第一个if匹配的,当进行匹配的时候...,这样后边的haha,但实际上if…else语句是嵌套在第一个if中的,else是和第二个if成立,嵌if和if语句中的,如果第一个if语句就不else就没机会执行了,最终什么都不打印。...因此,在编写代码时,请注意括号的使用,以提高代码的可读性。 二、switch语句 除了if语句,C语言还可以用switch语句来实现分支结构。

    13010

    Flutter 组件 | ValueListenableBuilder 局部刷新小能手

    是一个 StatelessWidget,为什么界面有变化的能力?...我们需要监听 PageView 的滑动,而这个滑动触发频率是非常高的,如果全局刷肯定不好,虽然视觉上体现不明显,但隐患往往就是一点点额外消耗所累加的结果,当最后一根稻草来临时,没有一片雪花是无辜的。...主页内容放入 child 属性中,那么在触发 builder 时,会直接使用这个 child,不会再构建一遍 child。...PageView 在 onPageChanged 中触发 page.value 的变化。这里的两点在于使用 AnimatedBuilder 对每个 item 在滑动过程中进行变换动画。...注意这里将与变换无关的构建放在 AnimatedBuilder 的 child 属性中,和上面是异曲同工的。

    8.3K41

    自适应页面高度

    因为即使是同一分辨率,页面中的实际高度也不同。不过非常遗憾,网上的文章可谓无数,但基本都不能解决问题。...基本上是这两类:       1、页面中嵌了IFrame,希望Iframe不出现滚动条,大小刚刚和页面大小一样,这个基本方法,都是用页面的document.body.scrollHeight属性来完成的...其实我也是用Iframe,因为我的折叠菜单是用css+div实现的,没法用滚动条,所有我用一个Iframe来装它,当菜单过长时,由Iframe来显示滚动条。...方法一的显示效果很好,但由于需要和主页面通信(parent……),对于一些将主页面和嵌入式页面放在不同主机的用户来说,就不能使用了,因为这是一个跨域访问     方法二是一种不错的办法,但由于不需要和主页面通信,当主页面显示速度很快时...,嵌入式页面的JS代码可能不起作用。

    2.7K70

    由电梯吞人看智能硬件如何支招

    滑道,安装在墙上,马达隐秘地藏身位于滑道最上端 横杆,平行与阶梯,老人握住横杆,缓缓行进 皮带,套住老人的安全带,上楼梯时还起到助力 加速度计嵌在握杆中,可以检测出横杆轻微的运动变化,包括力量的大小和方向的变化...我们知道,急刹车时,安全带会立刻锁死,防止人体由于惯性飞离座椅。同样的道理,压力方向突然改变或者速度突然变快,Mount Pal 的握杆都会锁住。...就是说如果老人上楼梯时突然向后倾倒,Mount Pal 就会安全地停住,保护老人。...老人向前倾倒,横杆可以抓住以保持平衡 老人向后倾倒,套在身上的皮带会护住老人 不使用 Mount Pal 的时候,还可以把它抬起九十度,考墙放置,或者平行靠滑杠放置,是不是很方便?

    57560

    Flutter 快速解析 TextField 的内部原理

    例如在 _TextFieldSelectionGestureDetectorBuilder 中,可以看到 onSingleTapUp 的处理流程: image 如上代码所示: 1、收起已经弹出的 Toolbar...image 也就是当 FocusNode 和 TextEditingController 这两者发生改变的时候,会让 InputDecorator 重新 rebuild 从而改变渲染效果,例如:输入框输入内容时...为什么呢?...RepaintBoundary 为什么 TextField 内部会有一个 RepaintBoundary ? 首先 RepaintBoundary 是干嘛的?...所以本篇主要是通过介绍 TextField 的组成,以及解释内部各组成部分的作用,让开发者可以更清晰的了解 Flutter 里常用的文本输入框的实现,当遇上问题或者需求时,可以快速定位和解决问题,例如:

    2.4K30
    领券