Swiper支持多图片预览、左右切换
flutter_swiper插件传送地址
先上效果图
1.导入引用到pubspec.yaml文件里面,引入后记得pub get
flutter_swiper: ^1.1.6
2.写一个图片的集合,可以使用本地的,也可以使用网络的,我本次使用的是网络图片
List<Map> imgList=[
{
"url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
},
{
"url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
},
{
"url":"https://pic4.zhimg.com/80/v2-9cf53967a3825fb27b4199b771cb692b_720w.jpg"
},
{
"url":"https://pic3.zhimg.com/80/v2-130838b9c036021e3656b30b01e55ce2_720w.jpg"
},
{
"url":"http://picture.name/images/2019/01/24/21515938.jpg"
}
];
3.把图片放到swiper上显示出来
Swiper(
itemBuilder: (BuildContext context,int index){
return Container(
width: double.infinity,
child:Image.network(imgList[index]["url"],fit: BoxFit.contain,)
);
},
itemCount: imgList.length,
pagination: SwiperPagination(),//下面的分页小点
// control: new SwiperControl(), //左右的那个箭头,在某模拟器中会出现蓝线
)
4.基本上就运行就可以实现查看大图了,然后你们说了,这也不能关闭页面啊,没有跟微信朋友圈一样,点击任意地方让其消失,别急,马上奉上完成代码。
import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
///查看大图使用
class SwiperPage extends StatefulWidget {
const SwiperPage({Key? key}) : super(key: key);
@override
State<SwiperPage> createState() => _SwiperPageState();
}
class _SwiperPageState extends State<SwiperPage> {
List<Map> imgList=[
{
"url":"https://pic2.zhimg.com/v2-848ed6d4e1c845b128d2ec719a39b275_b.jpg"
},
{
"url":"https://pic2.zhimg.com/80/v2-40c024ce464642fcab3bbf1b0a233174_hd.jpg"
},
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: null,
backgroundColor: Colors.black87,
body:GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: ((){
//点击任意地方都能关闭页面,并且不影响你的滑动查看
Navigator.pop(context);
}),
child: Swiper(
itemBuilder: (BuildContext context,int index){
return Container(
width: double.infinity,
child:Image.network(imgList[index]["url"],fit: BoxFit.contain,)
);
},
itemCount: imgList.length,
pagination: SwiperPagination(),//下面的分页小点
// control: new SwiperControl(), //左右的那个箭头,在某模拟器中会出现蓝线
),
),
);
}
}