机缘巧合，我了解到 packages 下的轮播组件 swiper，记录一下。
packages 链接：flutter_swiper
Github 链接：best-flutter/flutter_swiper
Get
在项目目录中的pubspec.yaml文件中的dependencies里导入flutter_swiper: ^1.1.6。运行flutter packages get。
dependencies:
# 最新的版本，版本会迭代，需保持最新的
flutter_swiper: ^1.1.6
属性解读（常用）
Swiper(
scrollDirection: Axis.horizontal,// 方向 Axis.horizontal Axis.vertical
itemCount: 4, // 展示数量
autoplay: true,// 自动翻页
itemBuilder:(){...},// 布局构建
onTap:(){...}, // 点击时间
pagination: SwiperPagination(), // 分页指示
viewportFraction: 0.8, // 视窗比例
layout: SwiperLayout.STACK, // 布局方式
itemWidth: MediaQuery.of(context).size.width, // 条目宽度
itemHeight: MediaQuery.of(context).size.height, // 条目高度
autoplayDisableOnInteraction: true, // 用户进行操作时停止自动翻页
loop: true, // 无线轮播
indicatorLayout: PageIndicatorLayout.SLIDE, // 指标布局 试了半天也没试出来这是啥
)
使用示例
在这展示几个小栗子，可直接拿去复制。
示例一 四张图片 自动翻页 左右控制按钮 页面指示器（点）
去掉
control:属性，图上的左右控制翻页按钮就会消失了。
Container(
height: ScreenUtil().setHeight(300), // 高度 插件 flutter_screenutil
child: Swiper(
scrollDirection: Axis.horizontal,// 横向
itemCount: 4,// 数量
autoplay: true, // 自动翻页
itemBuilder: (BuildContext context, int index) {
return Image.network("https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=500542857,4026327610&fm=26&gp=0.jpg",
fit: BoxFit.fill);
}, // 构建
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
pagination: SwiperPagination(// 分页指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),// 距离调整
builder: DotSwiperPaginationBuilder( // 指示器构建
space: ScreenUtil().setWidth(5),// 点之间的间隔
size: ScreenUtil().setWidth(10), // 没选中时的大小
activeSize: ScreenUtil().setWidth(12),// 选中时的大小
color: Colors.black54,// 没选中时的颜色
activeColor: Colors.white)),// 选中时的颜色
control: new SwiperControl(color: Colors.pink), // 页面控制器 左右翻页按钮
scale: 0.95,// 两张图片之间的间隔
),
),
示例二 四张图片 自动翻页 页面指示器（数字）
Container(
height: ScreenUtil().setHeight(300), // 高度
child: Swiper(
scrollDirection: Axis.horizontal,// 横向
itemCount: imageList.length,// 数量
autoplay: true,// 自动翻页
itemBuilder: (BuildContext context, int index) {return imageList[index];},// 构建
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
// 分页指示器
pagination: SwiperPagination(
alignment: Alignment.bottomRight,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 20, 10),// 距离调整
builder: FractionPaginationBuilder( // 指示器构建
color: Colors.white,// 字体颜色
activeColor: Colors.yellow, // 当前的指示字体颜色
fontSize: ScreenUtil().setSp(30),// 字体大小
activeFontSize: ScreenUtil().setSp(35),// 当前的指示字体大小
)
),
scale: 0.95,// 两张图片之间的间隔
),
)
示例三
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 横向
itemCount: 4,// 数量
autoplay: true,// 自动翻页
itemBuilder: (BuildContext context, int index) {// 构建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3932546523,304539533&fm=26&gp=0.jpg'),
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
pagination: SwiperPagination( // 分页指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
builder: DotSwiperPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
size: ScreenUtil().setWidth(15),
activeSize: ScreenUtil().setWidth(25),
space: ScreenUtil().setWidth(10),
)),
viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
scale: 0.8, // 两张图片之间的间隔
),
)
示例四
代码中的
_imageHttpsList是一个存储了四个图片链接的List：
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 横向
itemCount: _imageHttpsList.length,// 数量
autoplay: false,// 自动翻页
itemBuilder: (BuildContext context, int index) {// 构建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(_imageHttpsList[index]),fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
pagination: SwiperPagination( // 分页指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
builder: FractionPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
fontSize: ScreenUtil().setSp(15),
activeFontSize: ScreenUtil().setSp(25),
)),
viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
scale: 0.8, // 两张图片之间的间隔
layout: SwiperLayout.TINDER,
itemWidth: MediaQuery.of(context).size.width,
itemHeight: MediaQuery.of(context).size.height,
),
)
示例五
这里面有个很神奇的地方
itemWidth: MediaQuery.of(context).size.width - 100，以后某些特殊的宽度可以这样设置。
Container(
color: Colors.black,
padding: const EdgeInsets.only(top: 10),
height: ScreenUtil().setHeight(380), // 高度
child: Swiper(
scrollDirection: Axis.horizontal, // 横向
itemCount: _imageHttpsList.length,// 数量
autoplay: false,// 自动翻页
itemBuilder: (BuildContext context, int index) {// 构建
return Container(
margin: const EdgeInsets.only(bottom: 30),
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
_imageHttpsList[index]),
fit: BoxFit.fill),
borderRadius: BorderRadius.all(Radius.circular(10))),
);
},
onTap: (index) {print('点击了第${index}');},// 点击事件 onTap
pagination: SwiperPagination( // 分页指示器
alignment: Alignment.bottomCenter,// 位置 Alignment.bottomCenter 底部中间
margin: const EdgeInsets.fromLTRB(0, 0, 0, 5), // 距离调整
builder: FractionPaginationBuilder(
activeColor: Colors.yellow,
color: Colors.white,
fontSize: ScreenUtil().setSp(15),
activeFontSize: ScreenUtil().setSp(25),
)),
viewportFraction: 0.8,// 当前视窗展示比例 小于1可见上一个和下一个视窗
scale: 0.8, // 两张图片之间的间隔
layout: SwiperLayout.STACK,
itemWidth: MediaQuery.of(context).size.width - 100,
itemHeight: MediaQuery.of(context).size.height,
),
)
示例六
这个只是把示例五的
scrollDirection改成Axis.vertical。
Container(
...
child: Swiper(
scrollDirection: Axis.vertical, // 竖向
...
),
)
网友评论