food_hub_app/lib/widgets/common/image.dart

import 'dart:io';

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 buildFileImage(BuildContext context, File imageFile) {
  return GestureDetector(
    onTap: () => showFullScreenImage(context, FileImage(imageFile)),
    child: Image(
      image: FileImage(imageFile),
      width: 120,
      height: 120,
      fit: BoxFit.cover,
      loadingBuilder: (context, child, loadingProgress) {
        if (loadingProgress == null) return child;
        return buildImageLoadingIndicator(loadingProgress);
      },
    ),
  );
}

Widget buildNetworkImage(BuildContext context, String url) {
  return ClipRRect(
    borderRadius: BorderRadius.circular(8),
    child: GestureDetector(
      onTap: () {
        showFullScreenImage(context, NetworkImage(url));
      },
      child: Image.network(
        url,
        fit: BoxFit.cover,
        loadingBuilder: (context, child, loadingProgress) {
          if (loadingProgress == null) return child;
          return buildImageLoadingIndicator(loadingProgress);
        },
        errorBuilder: (context, error, stackTrace) => _buildErrorImage(),
      ),
    ),
  );
}

Widget buildImageLoadingIndicator(ImageChunkEvent? loadingProgress) {
  return Center(
    child: SizedBox(
      width: 30,
      height: 30,
      child: CircularProgressIndicator(
        value:
            loadingProgress?.expectedTotalBytes != null
                ? loadingProgress!.cumulativeBytesLoaded /
                    loadingProgress.expectedTotalBytes!
                : null,
      ),
    ),
  );
}

Widget _buildErrorImage() {
  return Container(
    color: Colors.grey[200],
    child: const Icon(Icons.image, color: Colors.grey, size: 30),
  );
}

Widget _buildPhotoView(ImageProvider imageProvider) {
  return PhotoView(
    imageProvider: imageProvider,
    backgroundDecoration: const BoxDecoration(color: Colors.transparent),
    minScale: PhotoViewComputedScale.contained,
    maxScale: PhotoViewComputedScale.covered * 2,
    initialScale: PhotoViewComputedScale.contained,
    loadingBuilder: (context, event) => buildImageLoadingIndicator(event),
    errorBuilder: (context, error, stackTrace) => _buildErrorImage(),
  );
}

Widget _buildCloseImage(BuildContext context) {
  return Positioned(
    top: MediaQuery.of(context).padding.top + 10,
    right: 20,
    child: IconButton(
      icon: Icon(Icons.close, color: Colors.white, size: 30),
      onPressed: () => Navigator.of(context).pop(),
    ),
  );
}

void showFullScreenImage(BuildContext context, ImageProvider imageProvider) {
  Navigator.of(context).push(
    PageRouteBuilder(
      opaque: false,
      pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
      ) {
        return Scaffold(
          backgroundColor: Colors.black.withAlpha(200),
          body: Stack(
            children: [
              // 可缩放图片
              Positioned.fill(child: _buildPhotoView(imageProvider)),
              // 关闭按钮
              _buildCloseImage(context),
            ],
          ),
        );
      },
    ),
  );
}

Widget buildImageUploadButton({required VoidCallback onPickImage}) {
  return InkWell(
    onTap: onPickImage,
    borderRadius: BorderRadius.circular(8),
    child: Container(
      width: 96,
      height: 96,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: Colors.black),
      ),
      child: const Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.add, color: Color(0xFF86909C)),
          SizedBox(height: 6),
          Text('添加图片', style: TextStyle(color: Color(0xFF86909C))),
        ],
      ),
    ),
  );
}

Widget buildDeleteImage({required VoidCallback onRemoveImage}) {
  return Positioned(
    top: 0,
    right: 0,
    child: GestureDetector(
      onTap: onRemoveImage,
      child: Container(
        width: 24,
        height: 24,
        decoration: const BoxDecoration(
          color: Colors.red,
          shape: BoxShape.circle,
        ),
        child: const Icon(Icons.close, color: Colors.white, size: 16),
      ),
    ),
  );
}