189 8069 5689
Flutter 仿抖音效果 (一) 全屏点爱星
在绥化等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站建设、做网站 网站设计制作按需设计网站,公司网站建设,企业网站建设,品牌网站设计,营销型网站建设,外贸网站制作,绥化网站建设费用合理。
Flutter 仿抖音效果 (二) 界面布局
[Flutter 仿抖音效果 (三) 视频播放列表] ( )
项目地址: 持续效果更新
1.基本的布局是简单的,外层通过Stack作为根
2.左边点赞的控件组通过Align进行统一布局
3.顶部控件组通过Positioned进行布局,设置顶部距离,其实也可以用align,我们多使用几种来习惯flutter的布局
4.底部同样使用Positioned,设置底部距离
5.子页面的左右滑动使用PageView,一开始我们要从推荐开始左滑到关注,可以使用reverse属性,不需要更多额外的操作
1.pageController监听
刷新顶部的下划线时,我们一样使用StreamController刷新,这样效率比setstate高很多
2.歌曲名走马灯效果
这个效果看起来挺麻烦的其实实现起来超级的简单用最普通的ListView就能快速的实现
首页listview里面套入的是最简单的container+text
listview添加一个ScrollController做为滑动的控制
使用一个定时器,把listview滑到最大的位置之后,在滑回去
先通过scroController.position.maxScrollExtent获取最大位置,
然后通过scroController.animateTo进行滑动,因为我设置一次循环的时间是3000毫秒,所以滑过去和滑回来的时间各占一般 new Duration(milliseconds: (time * 0.5).toInt()),还有就是歌名没有大于最大宽度时候其实我们不需要进行滑动,所以判断maxScrollExtent是否大于0来确定是否进行滑动动画
当前使用的 flutter 版本为 2.5.2 ， dart 的版本为 2.12.0 ： 在给图片赋值做兼容的时候，报错，在使用之前版本( dart 2.7.0 左右)的，可以正常进行判断赋值，我这个版本如何编译都不行，查看报错原因是因为 类型不匹配 导致的，那好，那就改成一样的类型吧，强转的时候又出问题了，死活转的不对，刚开始入门flutter,还有很多细节不知情，原来 dart中强转类型 ，使用的 关键字是as， 再三尝试下，终于改好了，下边把贴图放上，共勉~。
对于初学flutter的朋友来说，要知道，flutter的UI万物皆Widget。
flutter所写的页面的结构可以被看成套娃，一层套一层，一层套一层，一层套一层。。。。。。
Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改。
Text ： 该 widget 可让创建一个带格式的文本。
Row 、 Column ： 这些具有弹性空间的布局类Widget可让您在水平（ Row ）和垂直（ Column ）方向上创建灵活的布局。
Stack ：取代线性布局 (和Android中的LinearLayout相似)，Stack允许子 widget 堆叠， 你可以使用 Positioned 来定位他们相对于 Stack 的上下左右四条边的位置。
Container ： Container 可让您创建矩形视觉元素。 您可以为 Container 装饰一个 BoxDecoration , 如 background、一个边框、或者一个阴影。 Container 也可以具有边距（margins）、填充(padding)和应用于其大小的约束(constraints)。另外， Container 可以使用矩阵在三维空间中对其进行变换。
具体的演示见我另外的博客
有一部分Widget都有一个 child 属性，用于容纳唯一的子Widget。
例如：Container、Center、Padding、Align等Widget。
还有一部分Widget允许存在多个子Widget，用 children 作为属性。
例如：Row、Column、Stack等Widget。
在StatefulWidget调用createState之后，框架将新的状态插入树种，然后调用状态对象的initState。子类化State可以重写initState，以完成仅需要一次执行的工作。当然在initState的实现中需要调用super.initState
当一个状态对象不再需要时，框架调用状态对象的dispose。也可以通过覆盖dispose方法来执行清理工作。
OVER~
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会执行执行显示动画。
希望大家支持一下，感谢