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

实际业务开发中,首页一般都会存在一个轮播图。

在 Flutter 中,如何开发一个轮播?

了解需求

首先,我们在开发一个功能的时候要了解这个功能的需求,那一个轮播需要有什么功能?

1. 可以自定义高度和一些属性 2. 展示图片 3. 自动翻页播放 4. 点击事件 5. 指示器 6. 人为拖动的时候关闭自动播放

其中「人为拖动的时候关闭自动播放」是比较难的,我们后续会说,那先一个一个功能来实现。

自定义高度和一些属性

这里主要是做一些前期的工作,如果我们的 Banner 要开源让别人来使用,那我们肯定是要给用户一些可以自定义的属性的,比如:

1. Banner 的高度 2. 图片切换的效果 3. 点击事件的回调

既然我们是封装一个 Widget,那我们新建一个文件 widget_banner.dart ,类名叫  CustomBanner , 构造函数如下:

CustomBanner(

 this._images, {

 this.height = 200,

 this.onTap,

 this.curve = Curves.linear,

}) : assert(_images != null);

• _images:首先,图片的链接必须有,并且在后面也做了一个断言验证

• height:其次,高度可以让用户自己定义,默认为200

• onTap:用户点击的回调,是一个  ValueChanged<int> ,回调一个 index

• curve:图片在切换时候的效果,默认为  Curves.linear

这样初期的准备工作已经做完,下面就开始做展示图片的功能。

展示图片

一般的 Banner 都是由一些图片组成,然后在固定的时间内翻页,

那能够翻页的 Widget,我们首先想到的是 PageView ,而  PageView 也正好能满足我们的需求,

它有如下几个属性:

1. 多页面翻页

2. 有控制器控制翻页

3. 翻页的回调

4. 无限页面

那我们首先就来定义一个 PageView :

Widget _buildPageView() {
 var length = widget._images.length;
 return Container(
 height: widget.height,
 child: PageView.builder(
 controller: _pageController,
 onPageChanged: (index) {
 if (index == 0) {
 _curIndex = length;
 }
 },
 itemBuilder: (context, index) {
 return Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 );
 },
 ),
 );
}

这里定义了一个方法通过 PageView.builder 来生成  PageView ,用该方法的好处是可以生成无限个 Page,这样就不用担心滑到右侧边界的问题。

那有人会问如果是左侧的边界该怎么办?

看 onPageChange 方法,我们判断了如果  index == 0 那就把  _curIndex 改为 length,为什么改为 length?

因为在 itemBuilder 中,返回的是  widget._images[index % length] ,用 index 对 length 取余,这样就保证了我们的图片不会数组越界,并且第 length 个图片就是第一个图片,这样就保证左侧的边界也不会被触碰到了。

在 PageView 的上方也是定义了一个 Container 来限定高度,来看一下效果:

自动翻页播放

现在能展示图片了,那就该来做自动翻页了。

一般在 Dart 中,使用 Timer.periodic() 来做循环定时任务,该方法有两个参数:

1. duration:指隔多长时间执行一次 2. callback:时间到的时候执行的任务

那有了该方法,我们就可以很轻松的写出自动播放:

_timer = Timer.periodic(Duration(seconds: 3), (t) {
 _curIndex++;
 _pageController.animateToPage(
 _curIndex,
 duration: Duration(milliseconds: 300),
 curve: Curves.linear,
 );
});

在上面我们给 PageView 定义了一个  controller ,这里就可以用上了,

首先定义 Timer.periodic 方法,指出每三秒执行一次,然后在回调任务中执行:

1. _curIndex++:index +1 2. 使用 controller 的  animateToPage  方法,该方法是有动画效果的跳转

animateToPage 有三个参数:

1. 跳转的页面 2. 跳转到该页面动画持续时间(也就是多长时间能翻到该页) 3. 动画的效果

定义好后,我们来看一下效果:

点击事件

现在自动播放也 ok 了,那基本的就剩一个点击事件了。

点击事件非常简单,我们可以在 PageView 上面加一个  GestureDetector 来识别手势,

但是我又不想在 PageView 上面加,为什么?

因为后续要添加指示器,指示器应该也要有自己的点击事件,比如点击第二个小圆点就跳转到第二页之类的,

所以,我们要在 Image 上面添加手势识别:

return GestureDetector(
 onTap: () {
 Scaffold.of(context).showSnackBar(
 SnackBar(
 content: Text('当前 page 为 ${index % length}'),
 duration: Duration(milliseconds: 500),
 ),
 );
 },
 child: Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 ),
);

非常简单,就是增加了一个 GestureDetector ,来看一下效果:

讲道理,现在一个最最基本的 Banner 就已经完成了,能看图片,有轮播,有点击事件。

但是还并不完善,下面来做指示器。

指示器

一般的轮播,都会有一个指示器,例如下面的小圆点,或者「1 / 3」类似于这种,那我们这里就只搞第一种小圆点。

作为指示器,应该有如下几点:

1. 在图片前面(废话,在图片后面也看不到) 2. 有几张图片就有几个指示器 3. 显示出当前在第几页

在图片前面显示

这个需求比较简单,我们用一个 Stack 来包裹住  PageView 和  Indicator 就ok了:

return Stack(
 alignment: Alignment.bottomCenter,
 children: <Widget>[
 _buildViewPager(),
 _buildIndicator(),
 ],
);

定义了一个 _buildIndicator() 方法,该方法用来构建一个指示器。

有几张图片就有几个指示器

我们这里说的指示器就是小圆点,也很简单,用 ClipOval 来创建一个圆形就ok了,

具体代码如下:

Widget _buildIndicator() {
 var length = widget._images.length;
 return Positioned(
 bottom: 10,
 child: Row(
 children: widget._images.map((s) {
 return Padding(
 padding: const EdgeInsets.symmetric(horizontal: 3.0),
 child: ClipOval(
 child: Container(
 width: 8,
 height: 8,
 color: Colors.grey,
 ),
 ),
 );
 }).toList(),
 ),
 );
}

逻辑为:

1. 首先获取到图片数据的长度 2. Stack 定义了 Aligment 为  bottomCenter 3. 然后定义了一个  Positioned  来控制距离底部的距离 4. child 为  Row ,横向排列小圆点 5. 给每个小圆点设置边距为3 6. 小圆点的大小为8

看一下效果:

可以发现小圆点确实是出来了,但是并没有指示到当前是哪一个。

显示出当前在第几页

那接下来就要显示出当前是在第几页,其实这个也很简单(如果不做特殊效果的话),

我们刚才指示器的小圆点是灰色的,那当前页的小圆点我们给弄成白色的:

Widget _buildIndicator() {
 var length = widget._images.length;
 return Positioned(
 bottom: 10,
 child: Row(
 children: widget._images.map((s) {
 return Padding(
 padding: const EdgeInsets.symmetric(horizontal: 3.0),
 child: ClipOval(
 child: Container(
 width: 8,
 height: 8,
 color: s == widget._images[_curIndex % length]
 ? Colors.white
 : Colors.grey,
 ),
 ),
 );
 }).toList(),
 ),
 );
}

这里的重点是 Container 的 color 属性,判断一下当前的值是否是和当前 index 的值相等,

如果相等则变为白色,如果不相等则是灰色。

如果光写成这样,小圆点是不会变的,所以我们要在 PageView 的  onPageChanged 回调中去  setState() ,

顺便更新 _curIndex 的值。

重新构建一下刷新页面,这个时候看一下效果:

这个时候这个 Banner 可以说是很完善了,但是如果我们手动的去干预滑动会出现什么问题呢?

因为我们刚才写的是 3 秒一切换,所以我们在,手动切换的时候,它在到达第三秒后,就会出现连续换页的情况。

人为拖动的时候关闭自动播放

所以,根据上述情况,我们就要在监听到有人为拖动的时候去关闭自动播放,然后在没有人为的情况下打开。

刚才已经在 Image 上面加了一个  GesutreDetector ,正好,我们添加  onPanDown 参数来暂停定时任务。

然后在手指离开的时候恢复任务。

但是!这里有很大的坑!

1. Timer 没有暂停方法 2. 因为用的是  PageView ,有滑动冲突, 所以监听不到手指离开的方法

这里只能采用曲线救国的方法:

1.

虽然 Timer 没有暂停,但是他有取消  cancel() 方法。

2.

虽然监听不到手指离开的方法,但是我们可以监听到手指触碰的方法

所以我们应该这么写:

/// 点击到图片的时候取消定时任务
_cancelTimer() {
 if (_timer != null) {
 _timer.cancel();
 _timer = null;
 _initTimer();
 }
}
/// ------------------------
return GestureDetector(
 onPanDown: (details) {
 _cancelTimer();
 },
 onTap: () {
 Scaffold.of(context).showSnackBar(
 SnackBar(
 content: Text('当前 page 为 ${index % length}'),
 duration: Duration(milliseconds: 500),
 ),
 );
 },
 child: Image.network(
 widget._images[index % length],
 fit: BoxFit.cover,
 ),
);

先定义一个方法, _cancelTimer() ,里面首先判断如果  _timer 不是 null 的时候则把 _timer 取消掉,然后置空。

随后再对 _timer 进行初始化。

为什么要这么做?取消的同时进行初始化?

因为我们并不知道什么时候手指离开屏幕,所以我们在手指点击后就 重新开始计时 ,

这样既能保证点击的时候没有定时任务,又能保证在后续的一段时间后会重新开始定时任务。

因为定时任务的时间是3秒,而我们滑动查看图片也就一两秒的时间,这段时间之内如果再次手动滑动,那么也会取消掉之前的任务,重新开始新的任务,这样就达到了我们的效果。

来看一下:

那到现在为止整个 Banner 的封装就结束了。

总结

首先,在封装一个 Widget 的时候,首先要了解该 Widget 的功能,根据功能的需求来实现,

而且在实现的过程中,要考虑到灵活的问题,可以给用户来设置的就要暴露出来,而不能暴露的方法就要写成私有的。

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

以上所述是小编给大家介绍的Flutter 封装一个 Banner 轮播图的实例代码详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • flutter实现轮播图效果

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

  • android实现banner轮播图无限轮播效果

    本文实例为大家分享了banner轮播图无限轮播效果的具体代码,供大家参考,具体内容如下 效果展示 第一步(权限配置) <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission andr

  • iOS实现轮播图banner示例

    楼主项目中需要有一个轮播图,因为比较简单,就自己写了个,因为是从网上弄得图片 所以用了SDWebImage 这个三方库 当然自己也可以去掉 类型后面有*号 如用使用 请自行加上..... 代码:.h 文件 @protocol TJXViewDelegate<NSObject> //判断点击的那个 -(void)sendImageName:(TJXView *)TJXView andName:(NSInteger)selectImage; @end @interface TJXView : UI

  • ViewPager打造轮播图Banner/引导页Guide

    前言 去年7月时,在Github发布了一个开源的Banner库,虽然Star不多,但还是有少部分人使用. Banner效果: Github链接地址:https://github.com/Allure0/LMBanners 昨天,有使用此库的同学提出需求,想在引导页的时候用这个库并且最后一页有进入按钮如何实现,为满足他的需求,也方便更多开发者是快速实现.进行了简单的扩展支持Guide模式的使用. Guide效果图: OK,效果如图所以,咱们此库满足了既可在Banner上使用也可以快速在第一次安装应

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

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

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

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

  • Vue2 轮播图slide组件实例代码

    Vue2原生始轮播图组件,支持宽度自适应.高度设置.轮播时间设置.左右箭头按钮控制,圆点按钮切换,以及箭头.圆点按钮是否显示. <v-carousel :slideData="slideData" :height="450" :begin="0" :interval="3000" :dot="true" :arrow="true"></v-carousel> 话不

  • android控件Banner实现简单轮播图效果

    本文实例为大家分享了android控件Banner实现简单轮播图效果的具体代码,供大家参考,具体内容如下 实现这个轮播图是在Fragment里实现的,所以要想实现,首先要创建Fragment 首先是布局文件中的展示 <com.youth.banner.Banner android:id="@+id/banner" android:layout_width="match_parent" android:layout_height="500dp"

  • 原生javascript+CSS实现轮播图效果

    本文实例为大家分享了javascript+CSS实现轮播图效果的具体代码,供大家参考,具体内容如下 1.html <ul id="banner" ></ul> 2.css ul{ list-style:none; position: absolute; padding: 0; left: 0; right: 0; bottom: 0; top:0; margin:auto; width: 800px; height:200px; } 3.js //生成轮播图 e

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

    本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul

  • 微信小程序实现3D轮播图效果(非swiper组件)

    本文实例为大家分享了微信小程序实现3D轮播图效果的具体代码,供大家参考,具体内容如下 首先上一下效果图: 在做的时候首先想到的是用swiper组件但是发现swiper组件放进去图片的时候会没有3d的效果,原因是swiper组件自带的style属性限制了3d效果所需要的属性,所以单独写了一个组件. index.html <view class='page-con'> rotate.wxml <view class='stage'> <view class='wrapper' b

  • jQuery实现轮播图效果demo

    本文实例为大家分享了jQuery实现轮播图效果的具体代码,供大家参考,具体内容如下 效果展示: 编程思路: 1. 首先是基础的布局,使用"子绝父相"等页面布局方法,将图片.左右按钮以及每张图片下方对应的标识小按钮安排的明明白白. 2. JS中在通过点击左右按钮来切换图片时,使用三个变量分别来表示当前显示的图片序号.点击上一张按钮时候显示的图片序号.点击下一张按钮时候显示的图片序号. 3. 在自动轮播的时候,通过使用定时器来改变当前显示的图片序号来控制轮播 具体代码: HTML代码: &

  • Swift实现3D轮播图效果

    本文实例为大家分享了Swift实现3D轮播图效果的具体代码,供大家参考,具体内容如下 整天逛淘宝,偶尔有一天看到其中的展示页有个看起来很炫的效果,闲来无事就试着写一个出来,先来看效果: 简单记一下思路,这里我选择使用UICollectionView控件,先根据其复用和滚动的特性做出无限轮播的效果,关键代码: //数据源数组 let totalCount = 100 var models: [String] = [String]() { didSet { //判断元素个数 if models.co

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

    本文实例为大家分享了js实现简单的轮播图效果的具体代码,供大家参考,具体内容如下 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"

随机推荐