本文主要通过flutter实现轮播图功能,主要是基础使用,如有疑问可留言讨论
一、Swiper引入
轮播图我们使用三方库flutter_swiper,首先在pubspec.yaml中配置依赖
flutter_swiper : 1.1.6
然后拉取三方仓库
flutter packages get
二、Swiper使用
必传参数主要有两个
1,itemBuilder用于返回Swiper的轮播图
2,itemCount为轮播的数量
全部代码如下
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new SwiperPage(),
);
}
}
class SwiperPage extends StatefulWidget {
@override
_SwiperPageState createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList = [
{"url": "http://img5.mtime.cn/mg/2021/08/24/141454.81651527_285X160X4.jpg"},
{"url": "http://img5.mtime.cn/mg/2021/08/24/134535.67957178_285X160X4.jpg"},
{"url": "http://img5.mtime.cn/mg/2021/08/24/112722.60735295_285X160X4.jpg"},
{"url": "http://img5.mtime.cn/mg/2021/08/24/110937.63038065_285X160X4.jpg"},
];
@override
Widget build(BuildContext context) {
var MySwiperWidget = Swiper(
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时,将i赋值给index
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
//指示器
pagination: new SwiperPagination(),
);
return Scaffold(
appBar: AppBar(
title: Text('轮播图组件演示'),
),
body: Container(
height: 250,
width: double.infinity,
child: MySwiperWidget,
));
}
}
三、Swiper动效
Swiper控件中有一个选择轮播动画的layout属性,该属性接收枚举值enum SwiperLayout { DEFAULT, STACK, TINDER, CUSTOM }
3.1、DEFAULT动效
DEFAULT就是上述动画效果,默认可省
var MySwiperWidget = Swiper(
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时,将i赋值给index
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemCount: imgList.length,
//指示器
pagination: new SwiperPagination(),
);
3.2、STACK动效
在上述效果上,我们接着改动MySwiperWidget变量。
STACK堆栈效果
var MySwiperWidget = Swiper(
layout: SwiperLayout.STACK,
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时,将i赋值给index
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemWidth: 300.0,
itemHeight: 200.0,
itemCount: imgList.length,
//指示器
pagination: new SwiperPagination(),
);
3.3、TINDER动效
var MySwiperWidget = Swiper(
layout: SwiperLayout.TINDER,
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时,将i赋值给index
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemWidth: 300.0,
itemHeight: 200.0,
itemCount: imgList.length,
//指示器
pagination: new SwiperPagination(),
);
3.4、CUSTOM动效
CUSTOM动效需要额外配置customLayoutOption属性,用于控制旋转角度、左右两侧的卡片是否可见等
var MySwiperWidget = Swiper(
layout: SwiperLayout.CUSTOM,
itemBuilder: (BuildContext context, int index) {
//每次循环遍历时,将i赋值给index
return new Image.network(
imgList[index]['url'],
fit: BoxFit.fill,
);
},
itemWidth: 300.0,
itemHeight: 200.0,
itemCount: imgList.length,
customLayoutOption: new CustomLayoutOption(
startIndex: -1,
stateCount: 3
).addRotate([
-45.0/180,
0.0,
45.0/180
]).addTranslate([
new Offset(-390.0, -40.0),
new Offset(0.0, 0.0),
new Offset(390.0, -40.0)
]),
//指示器
pagination: new SwiperPagination(),
);
三、Swiper其他配置
//左右的箭头
control: new SwiperControl(),
//循环
loop: true,
//自动轮播
autoplay: true,
更多可以参考Swiper源码构造函数