使用photo_view插件绊袋,預(yù)覽圖片,可放大铸鹰、縮小、滑動(dòng)
1皂岔、在pubspec.yaml添加依賴(lài)
# 圖片預(yù)覽
photo_view: ^0.13.0
獲取插件
flutter pub get
2蹋笼、多張圖片預(yù)覽
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:photo_view/photo_view_gallery.dart';
typedef PageChanged = void Function(int index);
class PictureOverview extends StatefulWidget {
final List imageItems; //圖片列表
final int defaultIndex; //默認(rèn)第幾張
final PageChanged pageChanged; //切換圖片回調(diào)
final Axis direction; //圖片查看方向
final Decoration decoration; //背景設(shè)計(jì)
PictureOverview(
{this.imageItems,
this.defaultIndex = 1,
this.pageChanged,
this.direction = Axis.horizontal,
this.decoration})
: assert(imageItems != null);
@override
_PictureOverviewState createState() => _PictureOverviewState();
}
class _PictureOverviewState extends State<PictureOverview> {
int currentIndex;
@override
void initState() {
super.initState();
// TODO: implement initState
currentIndex = widget.defaultIndex;
}
@override
Widget build(BuildContext context) {
return Material(
child: Stack(
children: [
Container(
child: PhotoViewGallery.builder(
scrollPhysics: const BouncingScrollPhysics(),
builder: (BuildContext context, int index) {
return PhotoViewGalleryPageOptions(
imageProvider: NetworkImage(widget.imageItems[index]),
);
},
scrollDirection: widget.direction,
itemCount: widget.imageItems.length,
backgroundDecoration:
widget.decoration ?? BoxDecoration(color: Colors.black),
pageController:
PageController(initialPage: widget.defaultIndex),
onPageChanged: (index) => setState(() {
currentIndex = index;
if (widget.pageChanged != null) {
widget.pageChanged(index);
}
}))),
Positioned(
bottom: 20,
child: Container(
alignment: Alignment.center,
width: MediaQuery.of(context).size.width,
child: Text("${currentIndex + 1}/${widget.imageItems.length}",
style: TextStyle(
decoration: TextDecoration.none,
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w400,
shadows: [
Shadow(color: Colors.black, offset: Offset(1, 1)),
],
))),
),
Positioned(//右上角關(guān)閉
top: 40,
right: 40,
child: Container(
alignment: Alignment.centerLeft,
width: 20,
child: GestureDetector(
onTap: () {
//隱藏預(yù)覽
Navigator.pop(context);
},
child: Icon(Icons.close_rounded, color: Colors.white),
),
),
),
Positioned(//數(shù)量顯示
right: 20,
top: 20,
child: Text(
'${currentIndex + 1}/${widget.imageItems.length}',
style: TextStyle(color: Colors.black),
),
)
],
),
);
}
}