Flutter轮播图效果的实现步骤轮播图效果的实现步骤
主要介绍了Flutter轮播图效果的实现代码，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有
一定的参考借鉴价值,需要的朋友可以参考下
前端开发当中最有意思的就是实现动画特效，Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中的动画组件主要
分为两类：
隐式动画控件：只需设置组件开始值，结束值，执行时间，比如AnimatedOpacity，AnimatedSize等组件。
显式动画控件：需要设置AnimationController，手动控制动画的执行。显式动画可以完成隐式动画的效果，甚至更加地可控
和灵活，不过需要管理该动画的AnimationController生命周期，AnimationController并不是一个控件，所以需要将其放
在StatefulWidget中。
不难看出，隐式动画控件封装程度更高，无需管理AnimationController的生命周期，代码因此更简单，我们开发时应该尽量选用
隐式动画控件。接着我们就用隐式动画控件来实现在web当中很常见的轮播图。
FadeIn/FadeOut
AnimatedOpacity顾名思义就是专门设置opacity属性值变化的动画组件，其实就是类似css3 中的 transition: opacity time，该动画组件可
以实现渐隐渐现动画，下面就是实现步骤：
创建StatefulWidget；
定义组件属性，zIndex（类似css的z-index），样式列表list，时间timer（实现js的setTimeout和setInterval）；
实现动画播放的autoPlay功能，在initState方法中启动自动播放的动画，记得在dispose方法回收timer相关资源；
布局中Stack和Positioned组件就是实现html中 positon: relative/absolute布局；
AnimatedOpacity 组件中的opacity是必须设置的属性，curve属性与css3中 动画函数一样，duration 就是动画持续的时间。
class OpacityBanner extends StatefulWidget {
@override
_OpacityBannerState createState() => _OpacityBannerState();
}
class _OpacityBannerState extends State<OpacityBanner> {
int zIndex = 0;
List<String> list = ['ff0000', '00ff00', '0000ff', 'ffff00'];
Timer timer;
//setInterval控制当前动画元素的下标，实现动画轮播
autoPlay() {
var second = const Duration(seconds: 2);
timer = Timer.periodic(second, (t) {
setState(() {
zIndex = (++zIndex) % list.length;
});
});
}
@override
void initState() {
super.initState();
timer = Timer(Duration(seconds: 2), autoPlay);
}
@override
void dispose() {
if (timer != null) timer.cancel();
super.dispose();
}
资源评论
