Flutter轮播图效果的实现步骤

前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果。Flutter中的动画组件主要分为两类:

  • 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如AnimatedOpacityAnimatedSize等组件。
  • 显式动画控件:需要设置AnimationController,手动控制动画的执行。显式动画可以完成隐式动画的效果,甚至更加地可控和灵活,不过需要管理该动画的AnimationController生命周期,AnimationController并不是一个控件,所以需要将其放在StatefulWidget中。

不难看出,隐式动画控件封装程度更高,无需管理AnimationController的生命周期,代码因此更简单,我们开发时应该尽量选用隐式动画控件。接着我们就用隐式动画控件来实现在web当中很常见的轮播图。

FadeIn/FadeOut

AnimatedOpacity顾名思义就是专门设置opacity属性值变化的动画组件,其实就是类似css3 中的 transition: opacity time,该动画组件可以实现渐隐渐现动画,下面就是实现步骤:

  • 创建StatefulWidget
  • 定义组件属性,zIndex(类似cssz-index),样式列表list,时间timer(实现js的setTimeoutsetInterval);
  • 实现动画播放的autoPlay功能,在initState方法中启动自动播放的动画,记得在dispose方法回收timer相关资源;
  • 布局中StackPositioned组件就是实现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: Alignment.center, 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,
      margin: EdgeInsets.symmetric(horizontal: 5),
      decoration:
       BoxDecoration(color: i == zIndex ? Colors.blue : Colors.grey, shape: BoxShape.circle)))
     .toList()))
 ]));
 }
}

怎么样?实现起来非常简单吧。

SlideIn/SlideOut

接着我们使用AnimatedContainer实现移入/移出动画,同时加上touch事件实现手指左右滑动控制轮播图。实现的步骤和上面的一样,这里只介绍用到不同组件的地方:

移入移出动画和上面渐隐动画不同的是要同时控制两个动画元素,分别是移出和移入的元素,使用属性currnext下标表示。

  • AnimatedContainer组件可以控制很多的属性,可以说是实现过渡动画最常用的组件了。我们这里只需要设置transform属性即可,控制动画的属性上面已经介绍过。
  • MediaQuery 可以查询很多全局的属性,比如高度/宽度,dpr等。
  • GestureDetector是一个事件的包装器,这里使用到了onHorizontalDragStartonHorizontalDragUpdateonHorizontalDragEnd这三个事件,即横向拖动相关的事件。

class SlideBanner extends StatefulWidget {
 @override
 _SlideBannerState createState() => _SlideBannerState();
}

class _SlideBannerState extends State<SlideBanner> {
 List<String> 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;

 /** 轮播图滑动相关 **/
 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: 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轮播图效果的实现步骤的文章就介绍到这了,更多相关Flutter轮播图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter实现可循环轮播图效果

    效果图 壹.控件分解图 贰.代码实现 贰点壹.构建根布局 新建AdPictureWidget继承自StatefulWidget,新建_AdPictureWidgetState类继承自State<AdPictureWidget>,根布局为Stack,代码如下: class AdPictureWidget extends StatefulWidget { @override _AdPictureWidgetState createState() => _AdPictureWidgetStat

  • flutter实现轮播图效果

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 1 添加依赖库 flutter_swiper: ^1.0.6 2 普通常用 圆点指示器自动轮播图 class SwiperViewDefaultPage extends StatefulWidget { @override State<StatefulWidget> createState() { return new SwiperViewDefaultPageState(); } } class Swipe

  • Flutter banner_view 轮播图的使用及实现代码

    1.前言 实现轮播图,效果如下: 2.实现 将采用 banner_view 实现:资源库地址 2.1.yaml 引入依赖 在 pubspec.yaml 声明需要引用的库,执行命令 flutter packages get 进行拉取即可使用. banner_view: "^1.1.2" 2.2.代码中引入依赖 在资源库地址下方,作者提供了 banner_view 的几种展示方式. import 'package:flutter/material.dart'; import 'packag

  • flutter 轮播图动态加载网络图片的方法

    Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面. Flutter可以与现有的代码一起工作.在全世界,Flutter正在被越来越多的开发者和组织使用,并且Flutter是完全免费.开源的. Swiper,网上很多例子只是加载固定的几张图,并且页面只有一个轮播图,在实际应用中,可能会遇到类似ins这种,加载列表,并且都是多图模式的情况. 需要添加依赖包 flukit: ^1.0.0 引用 import 'package:flukit/flukit.da

  • Flutter 封装一个 Banner 轮播图效果的实例代码

    实际业务开发中,首页一般都会存在一个轮播图. 在 Flutter 中,如何开发一个轮播? 了解需求 首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能? 1. 可以自定义高度和一些属性 2. 展示图片 3. 自动翻页播放 4. 点击事件 5. 指示器 6. 人为拖动的时候关闭自动播放 其中「人为拖动的时候关闭自动播放」是比较难的,我们后续会说,那先一个一个功能来实现. 自定义高度和一些属性 这里主要是做一些前期的工作,如果我们的 Banner 要开源让别人来使用,那我们

  • Flutter轮播图效果的实现步骤

    前端开发当中最有意思的就是实现动画特效,Flutter提供的各种动画组件可以方便实现各种动画效果.Flutter中的动画组件主要分为两类: 隐式动画控件:只需设置组件开始值,结束值,执行时间,比如AnimatedOpacity,AnimatedSize等组件. 显式动画控件:需要设置AnimationController,手动控制动画的执行.显式动画可以完成隐式动画的效果,甚至更加地可控和灵活,不过需要管理该动画的AnimationController生命周期,AnimationControll

  • JavaScript实现带有子菜单和控件的slider轮播图效果

    大家或许做过(照片轮播)无限滚动图片的项目,但是,如果使用普通的滚动,当到达最后一张时,便会滚动回第一张,这是一个非常不好的用户体验.下面通过本文给大家分享基于JavaScript实现带有子菜单和控件的slider轮播图效果,具体实现代码如下所示: 实现效果: 实现原理: // 步骤 // 1. 获取事件源以及相关元素 // 2. 复制第一张图片所在的li,添加到ul的最后面 // 3. 给ol添加li,ul中的个数-1个,并点亮第一个按钮 // 4. 鼠标放到ol的li上切换图片 // 5.

  • vue使用swiper实现中间大两边小的轮播图效果

    项目中使用的vue,刚好有需求要实现轮播图,突出显示当前图片,两边展示其他图片:通过查各种资料,实现了,故在此记录下来 下面我们来看下实现步骤: 第一步:首先在项目index.html中引入swiper的css文件- swiper.min.css 第二部:写入dom结构 <div class="swiper-container"> <div class="swiper-wrapper"> <div v-for="(item,

  • 基于jquery实现轮播图效果

    本文实例为大家分享了jquery实现轮播图效果的具体代码,供大家参考,具体内容如下 轮播图左切换原理图 黄色的方框表示的是  slides ,而  slide 表示的是所有轮播图的父亲,每个灰色的方框表示的是每一个轮播图. <div id="slides"> <div id="slide"> <div></div> <div></div> <div></div> <

  • 用js实现轮播图效果

    今天来说一下利用js实现轮播图效果,供大家参考,具体内容如下 思路 1.首先我们要把需要用到的元素获取过来 <div class="all" id='box'> <div class="screen"> <!-- 无序列表 --> <ul> <li><img src="./wf1.jpg" width="500" height="200" /

  • bootstrap实现轮播图效果

    本文实例为大家分享了bootstrap实现轮播图效果的具体代码,供大家参考,具体内容如下 实现效果 步骤 1.下载bootstrap和jquery-3.6.0.min.js,并在html中引用,注意jq.js应在全部js前引用 2.按照官网https://v3.bootcss.com/javascript/的Carousel实例修改导入图片,body源码如下 <div class="box"> <div id="carousel-example-generi

  • 原生JS实现简单的轮播图效果

    本文实例为大家分享了JS实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 实现效果: 功能需求: 1.鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮 2.点击右侧按钮一次,图片往左播放一张,左侧按钮同理. 3.图片播放的同时,下面的小圆圈模块也跟随一起变化. 5.鼠标不经过轮播图,轮播图会自动向右播放图片,经过轮播图之后停止自动播放图片. 轮播图向右移动的时候要用到缓动画的函数,具体见博客:JS实现添加缓动画的方法 (1)布局:轮播图部分的图片用ul进行布局,里面的每个li放a标签,

  • jQuery实现简洁的轮播图效果实例

    本文实例讲述了jQuery实现简洁的轮播图效果.分享给大家供大家参考,具体如下: HTML: <div class="ppt"> <a href="###"><img src="ppt/ppt1.jpg" /></a> <a href="###" style="display:none;"><img src="ppt/ppt2.jp

  • 简单实现轮播图效果的实例

    一.要点: 1.页面加载时,图片重合,叠在一起[绝对定位]; 2.第一张显示,其它隐藏; 3.设置下标,给下标设置颜色让它随图片移动; 4.鼠标移动到图片上去,显示左右移动图标,鼠标移走,继续轮播; 二.实现代码: html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type"

随机推荐