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 来包裹住 PageViewIndicator 就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.给每个小圆点设置边距为36.小圆点的大小为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 的值相等,

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

如果光写成这样,小圆点是不会变的,所以我们要在 PageViewonPageChanged 回调中去 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 的功能,根据功能的需求来实现,

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

详解:Flutter内存泄漏解决方案

众所周知,内存的高低是评判一款app的性能优劣的重要的指标之一。如何更简单的帮助开发者分析、暴露且解决内存泄漏问题,几乎是每一个平台或框架、开发者亟需的一个的"标配"的feature。但是对于flutter社区,缺少一款用得顺手的内存泄漏工具。 对于使用flutter而言,因使用dart语言,通过形成渲染树提交到c++的skia进行渲染,从dart层到c++层拥有很长的渲染链路,使用者必须对整个渲染链路有通盘深刻的理解,才能深刻此时此刻的内存使用情况。本文提出一种基于渲染树个数的方式寻找内存泄漏的解决方案。

发布于:9天以前  |  61次阅读  |  详细内容 »

开始使用 Flutter 构建 Windows 桌面应用吧!

我们的使命是为开发者提供一个开源的高效框架,帮助他们在任何平台上构建美观的原生应用。截至目前,我们已经为 Android 和 iOS 带来了生产级别的支持,发布了 8 个稳定版本,仅在 Google Play 商店中就有超过 10 万款应用使用 Flutter。我们在继续努力,将支持范围扩展至 web、macOS 和 Linux 等其他平台。如今,Flutter 的另一个目标,即支持 Windows 的 Flutter Alpha 版本已经发布。

发布于:9天以前  |  53次阅读  |  详细内容 »

如何有效定位Flutter内存问题?

内存水位升高导致的稳定性问题严重影响app用户体验,所以开发者们非常关注Flutter的内存表现。随着Flutter业务越来越多,闲鱼也面临着oom导致的crash率提升的问题,下面我们结合项目中实际遇到的内存问题和解决思路跟大家分享下flutter内存优化的经验。

发布于:17天以前  |  95次阅读  |  详细内容 »

推荐5个Flutter重磅开源项目!

大家好,我是hub哥,近年来,随着移动智能设备的快速普及,移动多端统一开发框架已成为一个热门话题。这里为大家整理了5个Flutter优质的开源项目,希望对大家有帮助

发布于:3月以前  |  594次阅读  |  详细内容 »

Flutter在PLUS业务中的探索和实践

2016年京东为向核心客户提供更优质的购物体验,特别推出京东PLUS会员,旨在全方位提升和丰富用户网购体验,目前京东PLUS会员已成为电商行业付费人数最多的会员体系。作为PLUS的前端开发,我们思考最多的就是如何让页面更快更好的呈现在用户面前,如何用技术为用户提供最好的购物体验。

发布于:3月以前  |  480次阅读  |  详细内容 »

首发 | 闲鱼公开多年 Flutter 实践经验

Flutter从诞生到现在,已经成为了跨端开发的领跑者。闲鱼应用在flutter能够以模块形式存在前,进行了很长时间的混合app架构的探索,对原生工程进行较多改动,在官方推出flutter模块模式后,我们进行了大量调研,最终推出了一套开箱即用的混合工程脚手架flutter-boot,帮助大家快速搭建混合工程。

发布于:3月以前  |  507次阅读  |  详细内容 »

打破重重阻碍,Flutter 和 Web 生态如何对接?

Flutter 设计之初是不考虑 Web 生态的,原因很简单:两种技术设计理念不同,强行融合很可能让彼此都丧失了优势。但是业界又有很多团队在做这种尝试,说明需求是存在的。今天,阿里无线开发专家门柳就来手把手教如何实现 Flutter 和 Web 生态的对接?

发布于:3月以前  |  495次阅读  |  详细内容 »

一文看完阿里巴巴 AliFlutter 客户端研发体系

Flutter 是开源的 UI 工具包,其能够帮助开发者通过一套代码库高效构建多平台精美应用,支持移动、Web、桌面和嵌入式平台。Flutter 组件采用现代响应式框架构建,中心思想是用组件 (widget) 构建 UI。淘宝终端技术部无线技术专家王康从 Flutter 的原理出发,介绍了 Flutter 的原理、业内现状,以及阿里巴巴在 Flutter 上所做的深度实践和探索。

发布于:3月以前  |  481次阅读  |  详细内容 »

美团外卖Flutter动态化实践

动态化是 Flutter 无法避开的话题。本文从 Flutter 的特点讲起, 阐述了美团外卖团队在整个 Flutter 动态化上探索的心路历程,还有设计理念、核心原理以及业务应用的经验。本文的视角也不局限于框架本身,更多思考了在解决问题的过程中技术团队需要做的事情,希望能对大家有所启发和帮助。

发布于:3月以前  |  526次阅读  |  详细内容 »

Flutter 上的内存泄漏监控

Flutter 所使用的 Dart 语言具有垃圾回收机制,有垃圾回收就避免不了会内存泄漏。在 Android 平台上有个内存泄漏检测工具 LeakCanary[1], 它可以方便地在 debug 环境下检测当前页面是否泄漏。本文将会带你实现一个 Flutter 可用的 LeakCanary,并讲述怎么用该工具检测出了 1.9.1 Framework 上的两个泄漏。

发布于:4月以前  |  492次阅读  |  详细内容 »

网易支付-高性能NEJFlutter小程序动态化架构实践

大家好,今天跟大家分享的主题是《NEJFlutter小程序动态化高性能架构》,这是关于网易支付团队在Flutter小程序动态化方向上尝试的一套技术解决方案,一句话介绍NEJFlutter,就是用JavaScript开发业务逻辑、Flutter开发UI布局的小程序架构,性能堪比原生Flutter应用;

发布于:4月以前  |  725次阅读  |  详细内容 »

Flutter卡顿问题的监控与思考

使用Flutter技术构建的应用,一直以高性能高流畅度著称。但是随着应用复杂度越来越高,Flutter会出现一些页面流畅度明显低于Native的情况,甚至可能发生一些卡顿。而很多时候卡顿都发生在线上,即使获得了用户的操作路径,也难以重现。如果我们有一套卡顿监控系统,能够帮助我们捕获到卡顿时的堆栈,那么在发生卡顿的时候,我们就可以定位到具体是哪个函数引起的卡顿,从而解决这些问题。

发布于:4月以前  |  672次阅读  |  详细内容 »

最多阅读

在Flutter中添加资源和图片 1年以前  |  2839次阅读
Flutter的手势GestureDetector分析详解 1年以前  |  2827次阅读
Flutter插件详解及其发布插件 1年以前  |  2519次阅读
发布Flutter开发的iOS程序 1年以前  |  2117次阅读
Flutter 状态管理指南之 Provider 1年以前  |  1819次阅读
在Flutter中发起HTTP网络请求 1年以前  |  1787次阅读
使用Inspector检查用户界面 1年以前  |  1781次阅读
Flutter Widget框架概述 1年以前  |  1772次阅读
Flutter for Web详细介绍 1年以前  |  1655次阅读
JSON和序列化 1年以前  |  1597次阅读
Flutter框架概览 1年以前  |  1579次阅读
Flutter路由详解 1年以前  |  1523次阅读
为Flutter应用程序添加交互 1年以前  |  1517次阅读
使用自定义字体 1年以前  |  1483次阅读
处理文本输入 1年以前  |  1419次阅读
发布Flutter开发的Android程序 1年以前  |  1344次阅读
使用包来开发Flutter应用 1年以前  |  1339次阅读
编写国际化Flutter App 1年以前  |  1336次阅读