import 'package:flutter/material.dart'; import 'package:photo_view/photo_view.dart'; import 'package:photo_view/photo_view_gallery.dart'; class ImagePreviewPage extends StatefulWidget { final List images; final int initialIndex; const ImagePreviewPage({ super.key, required this.images, required this.initialIndex, }) : assert(initialIndex >= 0 && initialIndex < images.length); @override State createState() => _ImagePreviewPageState(); } class _ImagePreviewPageState extends State { // 声明 PageController 并初始化初始索引 late PageController _pageController; // 记录当前显示的图片索引(用于更新页码) int _currentIndex = 0; @override void initState() { super.initState(); // 初始化控制器,设置初始页面 _pageController = PageController(initialPage: widget.initialIndex); // 初始化当前索引为初始索引 _currentIndex = widget.initialIndex; // 监听页面切换事件 _pageController.addListener(() { // 取当前页面的整数索引(避免滑动过程中的小数) final currentPage = _pageController.page?.round() ?? 0; // 只有当索引变化时才更新状态 if (currentPage != _currentIndex) { setState(() { _currentIndex = currentPage; }); } }); } @override void dispose() { _pageController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, appBar: AppBar( backgroundColor: Colors.black54, elevation: 0, leading: IconButton( icon: const Icon(Icons.close, color: Colors.white), onPressed: () => Navigator.pop(context), ), // 显示实时更新的页码(当前索引+1 / 总数量) title: Text( '${_currentIndex + 1}/${widget.images.length}', style: const TextStyle(color: Colors.white), ), centerTitle: true, ), body: PhotoViewGallery( pageOptions: widget.images.map((url) { return PhotoViewGalleryPageOptions( imageProvider: NetworkImage(url), minScale: PhotoViewComputedScale.contained, maxScale: PhotoViewComputedScale.covered * 2, // 点击空白处关闭预览 onTapDown: (context, details, controllerValue) { Navigator.pop(context); }, ); }).toList(), pageController: _pageController, scrollDirection: Axis.horizontal, ), ); } }