Flutter实现可循环轮播图

本文详细介绍如何在Flutter中构建一个广告轮播组件,包括使用PageView实现滑动效果,TabPageSelector作为指示器,以及定时自动翻页和循环翻页功能的实现。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

效果图

壹、控件分解图

控件拆解图

贰、代码实现

贰点壹、构建根布局

新建AdPictureWidget继承自StatefulWidget,新建_AdPictureWidgetState类继承自State<AdPictureWidget>,根布局为Stack,代码如下:

class AdPictureWidget extends StatefulWidget {
  @override
  _AdPictureWidgetState createState() => _AdPictureWidgetState();
}

class _AdPictureWidgetState extends State<AdPictureWidget>{
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
       ...
      ],
    );
  }
}
贰点贰、构建PageView

PageView类似于Android里的ViewPager,我们可以使用PageController控制PageView 的滑动行为,比如设置滑动动画、令其滑动到指定的页面等等。可以通过设置onPageChanged来监听页面的滑动,相当于Android里的PageListener。每一个Page里的布局可以通过children属性进行设置,例子中每一个Page里包含一张图片,图片是通过网络来加载的。代码如下:

class _AdPictureWidgetState extends State<AdPictureWidget>{
  PageController _pageController = PageController();
  List _adPictures = [];
  
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
       PageView(
          children: _adPictures.map((json) {
            var adPicture = AdPicture.fromJson(json);//可以先忽略这个实体类
            return Image.network(
              adPicture.imageUrl,
              fit: BoxFit.fill,//使照片占满整个屏幕
            );
          }).toList(),
          onPageChanged: _onPageChanged,
          controller: _pageController,
        ),
      ],
    );
  }
  
  void _onPageChanged(int index) {
   ...
  }
}
贰点叁、构建下方的Indicator布局

屏幕下方的一行指示小圆点可以直接使用flutter的TabPageSelector搞定,使用Align控制其显示在屏幕的下方。我们只需要使用TabPageSelector的三个属性即可,通过color属性设置其未被选中时的颜色,通过selectedColor设置选中时的颜色,那如何控制选中还是未被选中呢,答案是它的controller属性,我们直接new出一个TabController类,将其赋值给controller属性即可,代码如下:

class _AdPictureWidgetState extends State<AdPictureWidget>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  ...
  
  @override
  void initState() {
    _tabController = TabController(length: 0, vsync: this);
    super.initState();
  }

  @override
  void dispose() {
    ...
    _tabController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        PageView(
          ...
        ),
        Align(
          alignment: Alignment(0.0, 0.5),
          child: TabPageSelector(
            color: Colors.white,
            selectedColor: Colors.black,
            controller: _tabController,
          ),
        ),
      ],
    );
  }
贰点肆、PageViewTabPageSelector联动 & 定时自动翻页

二者的联动很简单,在PageView的滑动回调里调用_tabControlleranimateTo方法即可实现二者的联动。如果需要定时翻页,则需要使用到一个Timer的类,详细代码如下:

const timeout = const Duration(seconds: 2);
class _AdPictureWidgetState extends State<AdPictureWidget>
    with SingleTickerProviderStateMixin {
  ...
  Timer _timer;
  int _index = 0;

  @override
  void initState() {
    ...
    _timer = Timer.periodic(timeout, _handleTimeout);//一创建定时器就启动了,每过timeout时间就会调用_handleTimeout这个回调。
    super.initState();
  }

  @override
  void dispose() {
    ...
    _timer.cancel();
    super.dispose();
  }
  
  _handleTimeout(Timer timer) {
      _index++;
      _pageController.animateToPage(
        _index % (_adPictures.length),//跳转到的位置
        duration: Duration(milliseconds: 16),//跳转的间隔时间
        curve: Curves.fastOutSlowIn,//跳转动画
      );
      _tabController.animateTo(_index % (_adPictures.length));
  }
  
贰点五、循环翻页实现

在这里插入图片描述
在这里插入图片描述
假设只有三页,实现循环播放的原理是在原来的数据基础上,在最开始插入一张原本的尾页,在最末尾插入一张原本的首页(看上面两张图也许更形象),当用户滑动到现在的尾页时,程序自动的将其滑动到现在的第二页,滑动的很快对用户来说是无感之的,同理,当用户滑动到现在的首页时,程序自动滑动到现在的倒数第二页。这种方法在Android里也是挺常用的。

叁、可运行的完整代码

  • 依赖的第三方库:
  dio: 1.0.6  
  json_annotation: ^2.0.0
  • 代码及文件名:

///文件名:AdPictureWidget.dart
class AdPictureWidget extends StatefulWidget {
  @override
  _AdPictureWidgetState createState() => _AdPictureWidgetState();
}

const timeout = const Duration(seconds: 2);

class _AdPictureWidgetState extends State<AdPictureWidget>
    with SingleTickerProviderStateMixin {
  TabController _tabController;
  PageController _pageController = PageController();
  Timer _timer;

  List _adPictures = [];
  int _index = 0;

  @override
  void initState() {
    _tabController = TabController(length: 0, vsync: this);
    _timer = Timer.periodic(timeout, _handleTimeout);
    loadAdPictures();
    super.initState();
  }

  @override
  void dispose() {
    _tabController.dispose();
    _timer.cancel();
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        PageView(
          children: _adPictures.map((json) {
            var adPicture = AdPicture.fromJson(json);
            return Image.network(adPicture.imageUrl, fit: BoxFit.fill);
          }).toList(),
          onPageChanged: _onPageChanged,
          controller: _pageController,
        ),
        Align(
          alignment: Alignment(0.0, 0.5),
          child: TabPageSelector(
            color: Colors.white,
            selectedColor: Colors.black,
            controller: _tabController,
          ),
        ),
      ],
    );
  }

  _handleTimeout(Timer timer) {
    if (_adPictures.length - 2 != 0) {
      _index++;
      _pageController.animateToPage(
        _index % (_adPictures.length - 2),
        duration: Duration(milliseconds: 16),
        curve: Curves.fastOutSlowIn,
      );
    }
  }

  void _onPageChanged(int index) {
    _index = index;
    if (index == 0) {
      _tabController.animateTo(_tabController.length - 1);
      _pageController.jumpToPage(_adPictures.length - 2);
    } else if (index == _adPictures.length - 1) {
      _tabController.animateTo(0);
      _pageController.jumpToPage(1);
    } else {
      _tabController.animateTo(index - 1);
    }
  }

  void loadAdPictures() async {
    Dio dio = Dio();
    Response<List> response = await dio
        .get("http://www.wanandroid.com/tools/mockapi/2511/getAdPictures");

    List res = response.data;
    if (res.length != 0) {
      res.insert(0, res[res.length - 1]);
      res.add(res[1]);

      setState(() {
        _adPictures = res;
        _pageController.jumpToPage(1);
        _tabController =
            TabController(length: _adPictures.length - 2, vsync: this);
      });
    }
  }
}

///文件名:AdPicture.dart

library adpicture;

import 'package:json_annotation/json_annotation.dart';

part 'AdPicture.g.dart';

///首页轮播图
@JsonSerializable()
class AdPicture {
  final String imageUrl; //图片链接

  AdPicture({
    this.imageUrl,
  });

  factory AdPicture.fromJson(Map<String, dynamic> json) =>
      _$AdPictureFromJson(json);
}


///文件名:AdPicture.g.dart
part of adpicture;

AdPicture _$AdPictureFromJson(Map<String, dynamic> json) {
  return AdPicture(imageUrl: json['imageUrl'] as String);
}

Map<String, dynamic> _$AdPictureToJson(AdPicture instance) => <String, dynamic>{
      'imageUrl': instance.imageUrl,
    };

源码KIPageView,UITableView 很强大,可是只能竖向滚动;UICollectionView 可以解决各种布局难题,但是稍显复杂,对于一些简单的需求,有点杀鸡用牛刀的感觉。 在 iOS6 以前,还没有 UICollectionView,为了实现横向滚动的 UITableView,只有自己动手写组件。为了达到和 UITableView 差不多的效果,就得先弄清其内部实现机制是怎么回事。 在渲染 View 的时候,是很耗系统资源的,如果创建大量的 View, 系统运行将变得异常缓慢,甚至导致内存耗尽。但是,在实际应用中,我们难免会遇到大量的数据需要显示,如果每显示一个数据,我们都创建一个 View,那应用程序的体验将相当糟糕。所以 Apple 为 iOS 开发者提供了 UITableView,Google 为 Android 开发者提供了 ListView。 简单来讲,UITableView 采用复用机制,其只会显示其可见区域内的 UITableViewCell。我们在滑动的过程中,当超出 UITableView 可见区域的 Cell,将会从 UITableView 中移除,并加入回收池中以作复用。当 UITableView 需要显示新的 Cell,会先从回收池中查找是否有相应的 Cell 可以重用(通过 dequeueReusableCellWithIdentifier:)。如果有,则直接将其重新显示;如果没有,则创建新的 Cell。这样一来,就可以避免因创建过多的 View,导致内存耗尽的尴尬情况。 了解了其内部的运行原理,我们也可以实现一个自己的 UITableView。 很常见的一个应用场景——显示图片:如果显示一张图片,我们用一个 UIImageView 足矣,如果要显示多张图片,并且可以左右滚动,最简单的办法是用一个 UIScrollView 包含多个 UIImageView, 但是这样带来的后果则是,如果图片数据量较大,那这个程序根本没有办法正常使用。如果我们还需要实现无限循环滚动,那这个解决方案肯定是不行的。所以这时候,就得我们自己实现一个 UITableView。 最开始,我写了一个组件叫 KIFlowView,实现了上面讲的需求,但是都是 iOS5 时代的产物了,难免过于陈旧。在后续的工作中也发现,类似的需求其实挺多的,比如左右滑动的 View,如网易新闻客户端,可以左右滑动,在不同的新闻栏目之间进行切换;有时候我们也需要实现一些 Tab,如果 Tab 的项目比较多,也需要考虑复用的问题,所以决定重新写一个增强组件,作为其替代品,所以就产生了 KIPageView。 测试环境:Xcode 6.2,iOS 6.0 以上
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值