puzzleweave/lib/collection/grid_item.dart

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:image_puzzle/collection/detail_dialog.dart';
import 'package:image_puzzle/config/device.dart';
import 'package:image_puzzle/models/items.dart';
import 'package:image_puzzle/skin/skin.dart';
import 'package:provider/provider.dart';

class GridItem extends StatefulWidget {
  final ListItem item;
  final bool lock;
  final int index;
  const GridItem({super.key, required this.item, required this.lock, required this.index});

  @override
  State<StatefulWidget> createState() {
    return _GridItemState();
  }
}

class _GridItemState extends State<GridItem> {
  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Hero(
          tag: widget.item.id,
          child: Material(
            color: Colors.transparent,
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
            elevation: 1,
            clipBehavior: Clip.hardEdge,
            child: Listener(
              child: GestureDetector(
                onTapUp: (details) {
                  if (widget.lock) {
                    ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('这个合集还未解锁！')));
                  } else {
                    // 跳转到大图页面 (以全屏 Dialog 形式)
                    Navigator.push(
                      context,
                      PageRouteBuilder(
                        opaque: false, // 允许背景半透明
                        pageBuilder: (context, animation, secondaryAnimation) => FadeTransition(
                          opacity: animation,
                          child: ImageDetailDialog(item: widget.item),
                        ),
                      ),
                    );
                  }
                },
                child: LayoutBuilder(
                  builder: (context, constraints) {
                    if (widget.lock) {
                      return _buildLockedPlaceholder(constraints.biggest);
                    } else {
                      return _buildImage(constraints.biggest);
                    }
                  },
                ),
              ),
            ),
          ),
        ),

        Positioned(
          bottom: 0,
          right: 0,
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: SkinHelper.color5,
              borderRadius: const BorderRadius.only(bottomRight: Radius.circular(4), topLeft: Radius.circular(10)),
            ),
            child: Padding(
              padding: const EdgeInsets.all(6),
              child: Text(
                badgeStr,
                style: TextStyle(color: Colors.white, fontSize: 16, fontWeight: FontWeight.bold),
              ),
            ),
          ),
        ),
      ],
    );
  }

  String get badgeStr => '${widget.index * 25 + 1}-${(widget.index + 1) * 25}';

  Widget _buildImage(Size size) {
    final device = context.read<Device>();
    int cacheWidth = (size.width * device.devicePixelRatio).toInt();
    int cacheHeight = (size.height * device.devicePixelRatio).toInt();

    if (widget.item is AssetItem) {
      AssetItem assetItem = widget.item as AssetItem;
      return Image.asset(assetItem.thumb, cacheWidth: cacheWidth, cacheHeight: cacheHeight);
    } else {
      return network(widget.item, size.width, size.height, cacheWidth, cacheHeight);
    }
  }

  Widget network(ListItem item, double width, double height, int cacheWidth, int cacheHeight) {
    return CachedNetworkImage(
      imageUrl: item.thumb,
      fit: BoxFit.fill,
      width: width,
      height: height,
      memCacheWidth: cacheWidth,
      memCacheHeight: cacheHeight,
      // placeholder: (context, url) => JigsawPiece.placeHolder(scale: 0.6),
    );
  }

  Widget _buildLockedPlaceholder(Size size) {
    return Container(
      width: size.width,
      height: size.height,
      decoration: BoxDecoration(color: SkinHelper.slotBorderColor, borderRadius: BorderRadius.circular(8)),
      child: const Center(
        child: Icon(
          Icons.lock,
          size: 60, // 锁图标大小
          color: Colors.white, // 锁图标颜色
        ),
      ),
    );
  }
}