1.动画原理:在一段时间内快速的多次改变UI外观,由于人眼会产生视觉暂留所以最终看到的就是一个连续的动画。
创新互联专注为客户提供全方位的互联网综合服务,包含不限于成都网站建设、成都做网站、湟源网络推广、小程序定制开发、湟源网络营销、湟源企业策划、湟源品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等,从售前售中售后,我们都将竭诚为您服务,您的肯定,是我们最大的嘉奖;创新互联为所有大学生创业者提供湟源建站搭建服务,24小时服务热线:18982081108,官方网址:www.cdcxhl.com
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会执行执行显示动画。
希望大家支持一下,感谢
在编写几个 Flutter 项目后,发现 Flutter 的强大之处在于业务中所有用到的控件以及场景都有对应的处理方案;而 Dart 语言也与 Java 、 Kotlin 类似,所以对 Android 开发者来说门槛非常低;特意记录一下常用的控件及其使用:
StatelessWidget 不需要额外的创建 State
StatefulWidget 创建 State 类,并可以在其中保存一些状态
only 可以单独设置每个方向的内边距
类似于 LinearLayout 中的 orientation 设置为 vertical , mainAxisAlignment 表示竖向的一个对齐方式, crossAxisAlignment 表示横向的对齐方式
与 Column 相反,主轴是横向,对齐方式类似, crossAxisAlignment 表示竖向的对齐方式
类似 SizedBox ,一个容器,但是主要功能是有一个 decoration —— 装饰器,作用是绘制背景,或者使用 item 中的阴影
栈,先入后出,类似于 Android 上的 FrameLayout
通常配合 Stack 使用,固定显示在某一个位置
配合多 child 使用,会填充剩余的空间
Image 功能强大,使用不同的方法可以加载不同来源的图片
看到这些方法,突然觉得 Flutter 太香了,而且 Image 可以配置 clip 等裁剪出不同形状的图片,无论是圆形还是五角星都不在话下,然而 Android 要实现不规则的形状,可是要下不少功夫的。
名字和 Android 的一模一样,但是用法却比 Android 的简单很多:
主要就是 itemCount 与 itemBuilder ,其余就是配置样式, itemBuilder 需要返回一个 widget ,当然了,每个 ListView 都有其对应的 item ,在里面的方法中编写 widget 即可
与 ListView 类似,但是需要有一个 delegate 类,作用是设置有多少列,每一列之间的间距是多少
GridView 没有 build , children 表示所有的子 view
最常用的控件之一,有非常多的样式, Flutter 中通常是使用装饰器来处理控件的,如背景使用 BoxDecoration , TextFiled 使用 InputDecoration ; 使用如下
国外地址:
国内镜像:
以 flutter_screenutil 为例
路由框架 annotation_route
状态管理 provider
UI适配 flutter_screenutil
刷新控件 flutter_easyrefresh
网络请求 dio
toast控件 fluttertoast
图表库 charts_flutter
网络监听 connectivity
事件总线 event_bus
日历组件 table_calendar
官方webview webview_flutter
第三方webview flutter_webview_plugin
该篇文章为常用依赖包总结,用来记录所需要的常用依赖包,后续会不断扩充内容~
1.忽略特殊字符
2.只能输入数字和小写字母
3.只能输入数字和字母
4.忽略表情
4.只能输入数字
5.长度限制(限制6位)
6.限制单行
7.输入价钱
8.输入最多两位小数的价钱
正则校验篇
转自
在 Flutter 中,有两类常用的 Widget:
在开发过程中,我们经常需要继承它们两来实现自己的 Widget。
一个 StatelessWidget 是不能被改变的,比如: Icon 、 Text 等。
如果你的控件一旦显示,就不需要再做任何的变更,那么你应该使用 StatelessWidget 。
实现一个自己的 StatelessWidget 很简单。
当你看到下面这个例子?时,你就知道它有多简单了。
看,只要在 build() 中返回你的视图就可以了。
一个 StatefulWidget 是有状态的,可变的。
它可以改变自己的外观,以响应用户的操作或者数据的变化。
比如: CheckBox 、 Switch ..
我们之所以能够改变一个 StatefulWidget ,是因为它有一个设置状态的函数:
调用这个函数后,就会触发 StatefulWidget 的视图树重建。
因此,当我们需要一个可交互的,即能根据用户操作或数据变化而改变视图的 Widget 时,那就得用上 StatelessWidget 了。
现在,来创建一个自定义的 StatefulWidget:
从上面的例子中可以看到, StatefulWidget 会要求提供一个含有视图树的 State 。
既然 State 能够控制一个视图的状态,那它肯定会有一系列的生命周期。
上图就是 State 的生命周期图。