重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
基本和AppBar一样,只是他只能在CustomScrollView中使用,应该很常见,滑动的时候固定appbar,就需要用到他.
为企业提供成都网站设计、成都做网站、网站优化、全网营销推广、竞价托管、品牌运营等营销获客服务。创新互联拥有网络营销运营团队,以丰富的互联网营销经验助力企业精准获客,真正落地解决中小企业营销获客难题,做到“让获客更简单”。自创立至今,成功用技术实力解决了企业“网站建设、网络品牌塑造、网络营销”三大难题,同时降低了营销成本,提高了有效客户转化率,获得了众多企业客户的高度认可!
大部分和appbar一样,主要说下重要的几个:
是否将导航栏部分固定在appbar的位置.这个需求在实际中很常用. 看看效果图.
当 pinned = false:
可以看到appbar并没有固定在最上面,而是根据内容划出了界面.
当 pinned = true :
这个应该是需求中经常用到的效果了.
当floating = false :
当floating = true:
仔细看 ,区别是在列表整体向下滑动时,appbar开始显示的位置不同.
当为false时 ,向下滑动时,会先降列表内容滑动顶部,然后appbar会跟着列表滑动显示出来.如上图
当为true时, 向下滑动时,appbar会先跟着列表滑动显示出来. 然后继续列表的滑动. 如上图
不能单独使用要配合 ****floating 和 ****pinned
具体效果看官网地址
是否展开,默认false,直接看值为true的效果图,就明白了.
可以再里面添加扩展的内容:
通过测试发现 **后面不是 FlexibleSpaceBar 的话, stretch = true 无效. **
和Padding一样.子控件是 sliver 类型...
上图中在padding中添加了一个背景色为青色的容器widget
里面可以设置不是 sliver 类型的widget。如上图中的 padding中添加的 container
就两个协议,一个是布局协议一个展示协议.基本和GridView一样.也有count和extext... 不设置个数默认无数个
SliverChildListDelegate 这种方式前提是知道cell个数,比较少,好搭建
SliverChildBuilderDelegate 这种方式,可以根据数组去创建,不知道cell个数
和listview差不多.也是协议 不设置个数默认无数个
1.动画原理:在一段时间内快速的多次改变UI外观,由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。
UI的一次改变称为一个动画帧,对应一次屏幕刷新。
FPS:帧率,每秒的动画帧数。
flutter动画分为两类:
常见动画模式:
是一个抽象类,主要的功能是保存动画的值和状态。常用的一个Animation类是Animation double ,是一个在一段时间内依次生成一个区间之间的值的类,可以是线性或者曲线或者其他。
可以生成除double之外的其他类型值,如:Animation Color 或 Animation Size 。
是一个动画控制器,控制动画的播放状态,在屏幕刷新的每一帧,就会生成一个新的值。
包含动画的启动forward()、停止stop() 、反向播放 reverse()等方法,在给定的时间段内线性的生成从0.0到1.0(默认区间)的数字。
curve:描述动画的曲线过程。
curvedAnimation:指定动画的曲线。
常用Curve:
继承自Animatable T ,表示的就是一个 Animation 对象的取值范围,只需要设置开始和结束的边界值(值也支持泛型)。 它唯一的工作就是定义输入范围到输出范围的映射。
例如,Tween可能会生成从红到蓝之间的色值,或者从0到255。
Tween.animate:返回一个Animation。
映射过程:
1). Tween.animation通过传入 aniamtionController 获得一个_AnimatedEvaluation 类型的 animation 对象(基类为 Animation), 并且将 aniamtionController 和 Tween 对象传入了 _AnimatedEvaluation 对象。
2). animation.value方法即是调用 _evaluatable.evaluate(parent)方法, 而 _evaluatable 和 parent 分别为 Tween 对象和 AnimationController 对象。
3). 这里的 animation 其实就是前面的 AnimationController 对象, transform 方法里面的 animation.value则就是 AnimationController 线性生成的 0.0~1.0 直接的值。 在 lerp 方法里面我们可以看到这个 0.0~1.0 的值被映射到了 begin 和 end 范围内了。
接收一个TickerProvider类型的对象,它的主要职责是创建Ticker。
防止屏幕外动画消耗资源。
[图片上传失败...(image-115b94-1636441483468)]
过程:
回调:
不使用addListener()和setState()来给widget添加动画。
使用AnimatedWidget,将widget分离出来,创建一个可重用动画的widget,AnimatedWidget中会自动调用addListener()和setState()
AnimatedModalBarrier、DecoratedBoxTransition、FadeTransition、PositionedTransition、RelativePositionedTransition、RotationTransition、ScaleTransition、SizeTransition、SlideTransition
如何渲染过渡,把渲染过程也抽象出来:
AnimatedBuilder的示例包括: BottomSheet、 PopupMenu、ProgressIndicator、RefreshIndicator、Scaffold、SnackBar、TabBar。
MaterialPageRoute:平台风格一致的路由切换动画
CupertinoPageRoute:左右切换风格
自定义:PageRouteBuilder
1.要创建交织动画,需要使用多个动画对象(Animation)。
2.一个AnimationController控制所有的动画对象。
3.给每一个动画对象指定时间间隔(Interval)
可以同时对其新、旧子元素添加显示、隐藏动画.
当AnimatedSwitcher的child发生变化时(类型或Key不同),旧child会执行隐藏动画,新child会执行执行显示动画。
希望大家支持一下,感谢
使用Tween动画,改变控件距左距离
展开时,展示菜单控件,动画正向执行;收起后,动画反向执行,隐藏菜单控件;