Flutter轮播图-白红宇

Flutter轮播图

阅读量：417 次

发布时间：2019-03-06

本文共 5834 字，大约阅读时间需要 19 分钟。

前端开发当中最有趣的部分之一，就是实现动画特效。Flutter 提供了丰富的动画组件，能够轻松实现各种动画效果。Flutter 中的动画组件主要分为两类：

第一类是隐式动画控件，只需设置组件的开始值和结束值，配置执行时间即可。例如 AnimatedOpacity 和 AnimatedSize 等组件，能够实现类似 CSS3 中的 transition 效果。

第二类则是显式动画控件，需要使用 AnimationController 手动控制动画流程。显式动画比隐式动画更加灵活，但需要对 AnimationController 的生命周期进行管理。需要注意的是，AnimationController 并不是一个控件，通常需要将其放置在 Stateful_Widget 中。

在实际开发中，隐式动画控件的封装程度更高，无需手动管理 AnimationController，因此我们应当优先选择隐式动画控件。在 Web 开发中，轮播图是一个常见的需求，我们可以利用隐式动画控件来实现。

接下来，我们将用 AnimatedOpacity 实现 FadeIn/FadeOut 效果。实现步骤如下：

创建 Stateful_Widget。

定义组件属性，包括 zIndex（类似 CSS 的 z-index）、样式列表 list 和时间 timer。

实现自动播放功能，在 initState 方法中启动动画。

在 dispose 方法中回收 timer 相关资源。

使用 Stack 和 Positioned 组件来实现 HTML 中的 position: relative/absolute 布局。

AnimatedOpacity 组件的 opacity 属性需要设置，并且可以通过 curve 属性定义动画曲线，duration 属性设置动画时长。

以下是一个实现 FadeIn/FadeOut 动画的示例：

class OpacityBanner extends StatefulWidget {  @override  _OpacityBannerState createState() => _OpacityBannerState();}class _OpacityBannerState extends State
   
     {  int zIndex = 0;  List
    
      list = ['ff0000', '00ff00', '0000ff', 'ffff00'];  Timer timer;  void 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: Alignment.center,        children: [          Stack(            children: list                .asMap()                .keys                .map((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,                      ),                    ))                .toList()),          Positioned(            bottom: 20,            child: Row(              children: list                  .asMap()                  .keys                  .map((i) => Container(                        width: 10,                        height: 10,                        margin: EdgeInsets.symmetric(horizontal: 5),                        decoration: BoxDecoration(                            color: i == zIndex ? Colors.blue : Colors.grey,                            shape: BoxShape.circle),                    ))                  .toList()),        ],      ),    );  }}

接下来，我们将使用 AnimatedContainer 实现 SlideIn/SlideOut 动画，并通过 touch 事件实现手指滑动控制轮播图。实现步骤如下：

定义 curr 和 next 下标，控制要移出的和要移入的元素。

使用 AnimatedContainer 控件来实现移入/移出动画。

使用 MediaQuery 获取全局属性，如屏幕宽度。

使用 GestureDetector 处理水平拖动事件。

以下是一个实现 SlideIn/SlideOut 动画的示例：

class SlideBanner extends StatefulWidget {  @override  _SlideBannerState createState() => _SlideBannerState();}class _SlideBannerState extends State
   
     {  List
    
      list = [    'https://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;  void dragStart(Offset offset) {    dx = 0;  }  void dragUpdate(Offset offset) {    var x = offset.dx;    dx += x;  }  void 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;      });    }    timer = Timer(Duration(seconds: 2), autoPlay);  }  void 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: Matrix4.translationValues(                        i == next ? 0 : i == curr ? (toLeft ? -width : width) : (toLeft ? width : -width), 0, 0),                    width: width,                    height: 300,                    child: Image.network(                        list[i], width: width, height: double.infinity, fit: BoxFit.cover)))              .toList()),        ),      ),    );  }}

通过以上代码示例，可以清晰地看到如何利用 Flutter 中的隐式和显式动画控件实现常见动画效果。隐式动画控件能够简化开发流程，而显式动画则提供更高的灵活性。

转载地址：http://vcduz.baihongyu.com/

你可能感兴趣的文章