flutter实现轮播图效果
1.在项目目录下的pubspec.yaml添加flutter_swiper依赖,然后点击Pub get
flutter_swiper: ^1.1.4
2.使用如下:
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
class SwiperDefaultPage extends StatefulWidget {
@override
_SwiperDefaultPageState createState() => _SwiperDefaultPageState();
}
class _SwiperDefaultPageState extends State<SwiperDefaultPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('SwiperTest'),
),
body: Column(
children: <Widget>[
Padding(padding: EdgeInsets.all(10.0)),
buildStyle1()
],
),
);
}
//banner 图
Widget buildStyle1() {
return Container(
height: 200.0,
child: Swiper(
// 横向
scrollDirection: Axis.horizontal,
// 布局构建
itemBuilder: (BuildContext context, int index) {
return Image.asset("resource/images/my_image.jpg", fit: BoxFit.fill);
},
//条目个数
itemCount: 6,
// 自动翻页
autoplay: true,
// 分页指示
pagination: _buildPlugin(),
// pagination: _buildSwiperPagination(),
// pagination: _buildNumSwiperPagination(),
//点击事件
onTap: (index) {
print(" 点击 " + index.toString());
},
// 相邻子条目视窗比例
viewportFraction: 1,
// 用户进行操作时停止自动翻页
autoplayDisableOnInteraction: true,
// 无限轮播
loop: true,
//当前条目的缩放比例
scale: 1,
),
);
}
//默认圆点指示器
_buildPlugin() {
return SwiperPagination();
}
//自定圆点分页指示器
_buildSwiperPagination() {
// 分页指示器
return SwiperPagination(
//指示器显示的位置 Alignment.bottomCenter 底部中间
alignment: Alignment.bottomCenter,
// 距离调整
margin: const EdgeInsets.only(bottom: 5),
// 指示器构建
builder: DotSwiperPaginationBuilder(
// 点之间的间隔
space: 2,
// 没选中时的大小
size: 6,
// 选中时的大小
activeSize: 12,
// 没选中时的颜色
color: Colors.black54,
//选中时的颜色
activeColor: Colors.white),
);
}
//自定义分页指示器
_buildNumSwiperPagination() {
return SwiperPagination(
//指示器显示的位置
alignment: Alignment.bottomCenter, // 位置 Alignment.bottomCenter 底部中间
// 距离调整
margin: const EdgeInsets.only(bottom: 5),
// 指示器构建
builder: FractionPaginationBuilder(
// 选中时字体大小
activeFontSize: 14,
// 字体大小
fontSize: 14,
// 字体颜色
color: Colors.red,
//选中时的颜色
activeColor: Colors.blue),
);
}
}
效果图:
3.基本参数说明:
参数 | 默认值 | 描述 |
---|---|---|
scrollDirection | Axis.horizontal | 滚动方向,设置为Axis.vertical如果需要垂直滚动 |
loop | true | 无限轮播模式开关 |
index | 0 | 初始的时候下标位置 |
autoplay | false | 自动播放开关 |
autoplayDely | 3000 | 自动播放延迟毫秒数 |
autoplayDiableOnInteraction | true | 当用户拖拽的时候,是否停止自动播放 |
onIndexChanged | void onIndexChanged(int index) | 当用户手动拖拽或者自动播放引起下标改变的时候调用 |
onTap | void onTap(int index) | 当用户点击某个轮播的时候调用 |
duration | 300.0 | 动画时间,单位是毫秒 |
pagination | null | 设置 new SwiperPagination() 展示默认分页指示器 |
control | null | 设置 new SwiperControl() 展示默认分页按钮 |