mobile_skt/lib/widgets/image_preview.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:photo_view/photo_view.dart';
import 'package:photo_view/photo_view_gallery.dart';
import 'package:sk_base_mobile/config.dart';
import 'package:sk_base_mobile/models/file.model.dart';
import 'package:sk_base_mobile/util/screen_adaper_util.dart';
import 'package:sk_base_mobile/widgets/fade_in_cache_image.dart';
import 'package:sk_base_mobile/widgets/loading_indicator.dart';

class ImagePreivew extends StatefulWidget {
  ImagePreivew({
    super.key,
    required this.galleryItems,
    this.backgroundDecoration,
    this.minScale,
    this.maxScale,
    this.initialIndex = 0,
    this.scrollDirection = Axis.horizontal,
  }) : pageController = PageController(initialPage: initialIndex);
  final BoxDecoration? backgroundDecoration;
  final dynamic minScale;
  final dynamic maxScale;
  final int initialIndex;
  final PageController pageController;
  final List<FileModel> galleryItems;
  final Axis scrollDirection;
  @override
  State<ImagePreivew> createState() => _ImagePreivewState();
}

class _ImagePreivewState extends State<ImagePreivew> {
  late int currentIndex = widget.initialIndex;
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: widget.backgroundDecoration,
      constraints: BoxConstraints.expand(
        height: MediaQuery.of(context).size.height,
      ),
      child: Stack(
        alignment: Alignment.bottomRight,
        children: <Widget>[
          PhotoViewGallery.builder(
            scrollPhysics: const BouncingScrollPhysics(),
            builder: _buildItem,
            itemCount: widget.galleryItems.length,
            loadingBuilder: (_, _1) => const LoadingIndicator(common: true),
            backgroundDecoration: widget.backgroundDecoration,
            pageController: widget.pageController,
            onPageChanged: onPageChanged,
            scrollDirection: widget.scrollDirection,
          ),
          Container(
            padding: const EdgeInsets.all(20.0),
            child: Text(
              "照片 ${currentIndex + 1}",
              style: TextStyle(
                decoration: TextDecoration.none,
                color: Colors.white,
                fontSize: ScreenAdaper.sp(20),
              ),
            ),
          )
        ],
      ),
    );
  }

  PhotoViewGalleryPageOptions _buildItem(BuildContext context, int index) {
    final FileModel item = widget.galleryItems[index];
    return PhotoViewGalleryPageOptions(
      onTapUp: (_, _1, _2) {
        Get.back();
      },
      imageProvider: Image.network('${GloablConfig.OSS_URL}${item.path}').image,
      initialScale: PhotoViewComputedScale.contained,
      minScale: PhotoViewComputedScale.contained * (0.5 + index / 10),
      maxScale: PhotoViewComputedScale.covered * 4.1,
      heroAttributes: PhotoViewHeroAttributes(tag: '${item.id}'),
    );
    // return item.isSvg
    //     ? PhotoViewGalleryPageOptions.customChild(
    //         child: Container(
    //           width: 300,
    //           height: 300,
    //           child: SvgPicture.asset(
    //             item.resource,
    //             height: 200.0,
    //           ),
    //         ),
    //         childSize: const Size(300, 300),
    //         initialScale: PhotoViewComputedScale.contained,
    //         minScale: PhotoViewComputedScale.contained * (0.5 + index / 10),
    //         maxScale: PhotoViewComputedScale.covered * 4.1,
    //         heroAttributes: PhotoViewHeroAttributes(tag: item.id),
    //       )
    //     : PhotoViewGalleryPageOptions(
    //         imageProvider: AssetImage(item.resource),
    //         initialScale: PhotoViewComputedScale.contained,
    //         minScale: PhotoViewComputedScale.contained * (0.5 + index / 10),
    //         maxScale: PhotoViewComputedScale.covered * 4.1,
    //         heroAttributes: PhotoViewHeroAttributes(tag: item.id),
    //       );
  }

  void onPageChanged(int index) {
    setState(() {
      currentIndex = index;
    });
  }
}