Flutter实现可循环轮播图效果

更新时间：2019年07月25日 10:55:10 作者：LuodiJack

这篇文章主要介绍了Flutter实现可循环轮播图效果，本文图文并茂通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

壹、控件分解图

控件拆解图

贰、代码实现

贰点壹、构建根布局

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

贰点肆、PageView和TabPageSelector联动 & 定时自动翻页

二者的联动很简单，在PageView的滑动回调里调用_tabController的animateTo方法即可实现二者的联动。如果需要定时翻页，则需要使用到一个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,
  };

总结

以上所述是小编给大家介绍的Flutter实现可循环轮播图效果,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

您可能感兴趣的文章:

Android文本与视图基本操作梳理介绍
下面介绍一下android如何设置文本内容、设置文本字体大小、文本颜色、视图宽高、视图间距、和视图的对齐方式，只简单说明一下如何操作，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧
2022-09-09
JSON解析和XML解析区别对比
JSON解析和XML解析是较为普遍的两种解析方式，其中JSON解析的市场分额更大。这篇文章主要介绍了JSON解析和XML解析区别对比,需要的朋友可以参考下
2016-10-10
Android开发之组件GridView简单使用方法示例
这篇文章主要介绍了Android开发之组件GridView简单使用方法,涉及Android GridView组件图片浏览及保存图片等相关操作技巧,需要的朋友可以参考下
2019-03-03
Android编程实现仿易信精美弹出框效果【附demo源码下载】
这篇文章主要介绍了Android编程实现仿易信精美弹出框效果,涉及Android窗口及动画操作相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2017-01-01
Android Menu半透明效果的开发实例
这篇文章主要介绍了Android Menu半透明效果方法的相关资料,需要的朋友可以参考下
2016-09-09
Android开发之自定义UI组件详解
这篇文章主要给大家介绍了关于Android开发之自定义UI组件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
Android实现毛玻璃效果弹出菜单动画
这篇文章主要为大家详细介绍了Android实现毛玻璃效果弹出菜单动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-08-08
Android开发实现的电话窃听和拦截应用
这篇文章主要介绍了Android开发实现的电话窃听和拦截应用,结合实例形式分析了Android针对电话的监听与拦截的相关技巧,需要的朋友可以参考下
2016-08-08
Android编程实现带有单选按钮和复选按钮的dialog功能示例
这篇文章主要介绍了Android编程实现带有单选按钮和复选按钮的dialog功能,结合具体实例形式分析了Android实现带有单选按钮的dialog对话框及带有复选按钮的dialog对话框相关操作技巧,需要的朋友可以参考下
2017-09-09
Android编程常用技巧实例总结
这篇文章主要介绍了Android编程常用技巧实例总结,包括Android对话框、分辨率、资源、字体等操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-11-11