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();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(alignment: , children: [
Stack(
children: list
.asMap()
.keys
.map<Widget>((i) => AnimatedOpacity(
curve: Curves.easeIn,
duration: Duration(milliseconds: 600),
opacity: i == zIndex ? 1 : 0,
child: Container(
color: Color(int.parse(list[i], radix: 16)).withAlpha(255),
height: 300, //100%
),
))
.toList()),
Positioned(
bottom: 20,
child: Row(
children: list
.asMap()
.keys
.map((i) => Container(
width: 10,
height: 10,js实现轮播图最简代码
margin: EdgeInsets.symmetric(horizontal: 5),
decoration:
BoxDecoration(color: i == zIndex ? Colors.blue : , shape: BoxShape.circle)))
.toList()))
]));
}
}
怎么样？实现起来⾮常简单吧。
SlideIn/SlideOut
接着我们使⽤AnimatedContainer实现移⼊/移出动画，同时加上touch事件实现⼿指左右滑动控制轮播图。实现的步骤和上⾯的⼀样，这⾥只介绍⽤到不同组件的地⽅：
移⼊移出动画和上⾯渐隐动画不同的是要同时控制两个动画元素，分别是移出和移⼊的元素，使⽤属性curr和next下标表⽰。
AnimatedContainer组件可以控制很多的属性，可以说是实现过渡动画最常⽤的组件了。我们这⾥只需要设置transform属性即可，控制动画的属性上⾯已经介绍过。
MediaQuery可以查询很多全局的属性，⽐如⾼度/宽度，dpr等。
GestureDetector是⼀个事件的包装器，这⾥使⽤到了onHorizontalDragStart，onHorizontalDragUpdate，onHorizontalDragEnd这三个事件，即横向拖动相关的事件。
class SlideBanner extends StatefulWidget {
@override
_SlideBannerState createState() => _SlideBannerState();
}
class _SlideBannerState extends State<SlideBanner> {
List<String> list = [
'upload-images.jianshu.io/upload_images/127924-dec37275411437de.jpg',
'//upload-images.jianshu.io/upload_images/127924-0999617a887bb6a3.jpg',
'//upload-images.jianshu.io/upload_images/127924-b48e22b6aef713ae.jpg',
'//upload-images.jianshu.io/upload_images/127924-b06e44e6a17caf43.jpg'
];
double dx = 0;//距离
int curr = 0;//要移出的下标
int next = 0;//要移⼊的下标
bool toLeft = true;//⾃动播放的⽅向，默认向左
Timer timer;
/** 轮播图滑动相关 **/
dragStart(Offset offset) {
dx = 0;
}
//累计位移距离
dragUpdate(Offset offset) {
var x = offset.dx;
dx += x;
}
//达到⼀定距离后则触发轮播图左右滑动
dragEnd(Velocity v) {
if (dx.abs() < 20) return;
timer.cancel();
if (dx < 0) {
//向左
if (!toLeft) {
setState(() {
toLeft = true;
curr = next - 1 < 0 ? list.length - 1 : next - 1;
});
}
setState(() {
curr = next;
next = (++next) % list.length;
});
} else {
//向右
if (toLeft) {
setState(() {
toLeft = false;
curr = (next + 1) % list.length;
});
}
setState(() {
curr = next;
next = --next < 0 ? list.length - 1 : next;
});
}
//setTimeout
timer = Timer(Duration(seconds: 2), autoPlay);
}
autoPlay() {
var second = const Duration(seconds: 2);
timer = Timer.periodic(second, (t) {
setState(() {
toLeft = true;
curr = next;
next = (++next) % list.length;
});
});
}
@override
void initState() {
super.initState();
timer = Timer(Duration(seconds: 2), autoPlay);
}
@override
void dispose() {
if (timer != null) timer.cancel();
super.dispose();
}
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
final width = size.width;
return Scaffold(
body: GestureDetector(
onHorizontalDragStart: (details) => dragStart(details.globalPosition),
onHorizontalDragUpdate: (details) => dragUpdate(details.delta),
onHorizontalDragEnd: (details) => dragEnd(details.velocity),
child: Stack(
children: list
.
asMap()
.keys
.map((i) => AnimatedContainer(
duration: Duration(milliseconds: (i == next || i == curr) ? 600 : 0),
curve: Curves.easeIn,
transform: anslationValues(
i == next ? 0 : i == curr ? (toLeft ? -width : width) : (toLeft ? width : -width), 0, 0),
width: width,
height: 300,
child: Imagework(list[i], width: width, height:double.infinity ,fit: ver)))
.toList())));
}
}
到此这篇关于Flutter轮播图效果的实现步骤的⽂章就介绍到这了，更多相关Flutter轮播图内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论