导入SDK
photo_view: ^0.15.0
单张图片预览,支持放大缩小
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view.dart';
...
...
class _MyHomePageState extends State<MyHomePage>{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('标题'),
),
body: Center(
child: PhotoView(
imageProvider: const NetworkImage('https://cdn.uviewui.com/uview/swiper/1.jpg'),
),
),
);
}
}
多张图片预览,支持放大缩小,滑动显示
class _MyHomePageState extends State<MyHomePage>{
var bannerList = [
'https://cdn.uviewui.com/uview/swiper/1.jpg',
'https://cdn.uviewui.com/uview/swiper/2.jpg',
'https://cdn.uviewui.com/uview/swiper/3.jpg',
];
int _current = 0;
@override
Widget build(BuildContext context) {
return Stack(
children: [
Scaffold(
appBar: AppBar(
title: const Text('标题'),
),
body: Center(
child: PhotoViewGallery.builder(
itemCount: bannerList.length,
builder: (context,index){
return PhotoViewGalleryPageOptions(imageProvider: NetworkImage(bannerList[index]));
},
onPageChanged: ((index){
setState(() {
_current = index;
print('图片滑动触发:$_current');
});
}),
pageController: PageController(initialPage: _current), // 可以配置默认显示第几张图片
)
),
),
Positioned(
left: 0,
bottom: 0,
right: 0,
child: Container(
alignment: Alignment.center,
child: Text('${_current+1}/${bannerList.length}',style: TextStyle(fontSize: 20,color: Colors.white,decoration: TextDecoration.none),),
)
)
],
);
}
}