food_hub_app/lib/widgets/common/image.dart

import 'package:flutter/material.dart';
import 'package:food_hub_app/config/app_config.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('${AppConfig.imageBaseUrl}$url'),
                minScale: PhotoViewComputedScale.contained,
                maxScale: PhotoViewComputedScale.covered * 2,
                // 点击空白处关闭预览
                onTapDown: (context, details, controllerValue) {
                  Navigator.pop(context);
                },
              );
            }).toList(),
        pageController: _pageController,
        scrollDirection: Axis.horizontal,
      ),
    );
  }
}

class CommonImage extends StatelessWidget {
  final List<String> imageUrls;
  final int index;

  const CommonImage({super.key, required this.imageUrls, required this.index});

  Widget _buildImageLoadingIndicator(ImageChunkEvent? progress) {
    final value =
        progress?.expectedTotalBytes != null
            ? progress!.cumulativeBytesLoaded / progress.expectedTotalBytes!
            : null;

    return Center(
      child: SizedBox(
        width: 30,
        height: 30,
        child: CircularProgressIndicator(value: value),
      ),
    );
  }

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

  void _navigateToImagePreview(
    BuildContext context,
    List<String> imageUrls,
    int index,
  ) {
    final route = MaterialPageRoute(
      builder:
          (context) => ImagePreviewPage(images: imageUrls, initialIndex: index),
    );

    Navigator.push(context, route);
  }

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 4 / 3,
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: GestureDetector(
          onTap: () {
            _navigateToImagePreview(context, imageUrls, index);
          },
          child: Image.network(
            '${AppConfig.imageBaseUrl}${imageUrls[index]}',
            fit: BoxFit.cover,
            loadingBuilder: (context, child, loadingProgress) {
              if (loadingProgress == null) return child;
              return _buildImageLoadingIndicator(loadingProgress);
            },
            errorBuilder: (context, error, stackTrace) => _buildErrorImage(),
          ),
        ),
      ),
    );
  }
}

class ImagePreview extends StatelessWidget {
  final List<String> imageUrls;
  final int index;
  final VoidCallback onRemoveImage;

  const ImagePreview({
    super.key,
    required this.imageUrls,
    required this.index,
    required this.onRemoveImage,
  });

  Widget _buildDeleteImage() {
    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),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(8),
        child: Stack(
          children: [
            CommonImage(imageUrls: imageUrls, index: index),
            _buildDeleteImage(),
          ],
        ),
      ),
    );
  }
}

Widget buildImageUploadButton({required VoidCallback onTap}) {
  return InkWell(
    onTap: onTap,
    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))),
        ],
      ),
    ),
  );
}