如何在 Flutter 中实现类似照片应用（iphone）的平滑捏合缩放动画？

Question

我正在 Flutter 中构建一个照片库应用程序，用户可以通过捏合来放大/缩小，以 GridView 格式动态调整列数。我的目标是创建流畅的动画来调整照片大小和更改列数（最多 4 个，最少 1 个），类似于 iPhone 上的“照片”应用程序。

我目前使用 AnimatedBuilder 在列数变化时重建布局，并结合 GestureDetector 来检测捏合手势。以下是我的方法的简要概述：

• 使用 GestureDetector 捕获捏合手势和缩放值。
• 根据捏合比例动态调整 _columnCount。
• 使用AnimatedBuilder重建GridView并确保过渡过程中动画流畅。

虽然这有效，但我正在寻找更好或替代的方法：

• 减少每次规模更新时持续重建整个小部件的次数
• 优化动画的性能和流畅度。
• 与照片应用程序类似，有效管理网格大小调整和照片缩放 这是我当前实现的简化版本：

Widget _buildAnimatedGrid() {
  return AnimatedBuilder(
    animation: _animationController,
    builder: (context, child) {
      return LayoutBuilder(
        builder: (context, constraints) {
          const double itemSpacing = 10.0;
          return GridView.builder(
            physics: const ClampingScrollPhysics(),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: _columnCount,
              mainAxisSpacing: itemSpacing,
              crossAxisSpacing: itemSpacing,
              childAspectRatio: (604 / 960),
            ),
            itemCount: _images.length,
            itemBuilder: (context, index) {
              return AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                curve: Curves.easeOutCubic,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(6),
                  color: Colors.grey[900],
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(6),
                  child: Image.network(
                    _images[index],
                    fit: BoxFit.cover,
                  ),
                ),
              );
            },
          );
        },
      );
    },
  );
}

我很好奇：

• 是否有替代动画策略或库可以增强平滑度？
• 针对此用例，是否有更好的方法将捏合缩放与 GridView 集成？

任何见解、建议或替代实施都将不胜感激！ 感谢任何演示或示例工作代码的数百万人。谢谢你

Answer 1

如果使用包会简单很多这里是建议

photo_view: ^0.15.0

点击这里查看

这里是基本使用代码，您可以探索更多这里

@override
Widget build(BuildContext context) {
  return Container(
    child: PhotoView(
      imageProvider: AssetImage("assets/large-image.jpg"),
    )
  );
}

享受编码的乐趣