feat:增加轮播图组件

2025-07-24 23:00:37 +08:00
parent 502bb9df52
commit a2ed0f3d98
8 changed files with 287 additions and 221 deletions
--- a/lib/widgets/common/image.dart
+++ b/lib/widgets/common/image.dart
@@ -0,0 +1,115 @@
+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<String> images;
+  final int initialIndex;
+
+  const ImagePreviewPage({
+    super.key,
+    required this.images,
+    required this.initialIndex,
+  }) : assert(initialIndex >= 0 && initialIndex < images.length);
+
+  @override
+  State<ImagePreviewPage> createState() => _ImagePreviewPageState();
+}
+
+class _ImagePreviewPageState extends State<ImagePreviewPage> {
+  // 声明 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,
+      ),
+    );
+  }
+}
+
+Widget networkImage(String url) {
+  return ClipRRect(
+    borderRadius: BorderRadius.circular(8),
+    child: Image.network(
+      url,
+      fit: BoxFit.cover,
+      loadingBuilder: (context, child, loadingProgress) {
+        // 加载中显示占位符
+        if (loadingProgress == null) return child;
+        return Center(
+          child: CircularProgressIndicator(
+            value: loadingProgress.expectedTotalBytes != null
+                ? loadingProgress.cumulativeBytesLoaded /
+                loadingProgress.expectedTotalBytes!
+                : null,
+          ),
+        );
+      },
+      errorBuilder: (context, error, stackTrace) {
+        return Container(
+          color: Colors.grey[200],
+          child: const Icon(Icons.image, color: Colors.grey, size: 30),
+        );
+      },
+    ),
+  );
+}