Flutter 封装一个 Banner 轮播图

最新推荐文章于 2024-01-19 15:49:28 发布

Flutter 笔记

最新推荐文章于 2024-01-19 15:49:28 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/qq_23756803/article/details/97208744

版权

本文详细介绍了在Flutter中封装一个Banner轮播图组件的全过程，包括自定义高度、属性，展示图片，自动翻页播放，点击事件，指示器等功能实现。特别讨论了在人为拖动时关闭自动播放的实现策略，以及封装组件时考虑的灵活性和可配置性。

摘要由CSDN通过智能技术生成

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

在 Flutter 中，如何开发一个轮播？

640?wx_fmt=gif

了解需求

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

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,	
        );	
      },	
    ),	
  );	
}