Flutter开发中如何给CachedNetworkImage加载的图片添加缩放功能

直接使用Flutter SDK内置的InteractiveViewer组件包裹现有CachedNetworkImage即可实现双指缩放、拖动平移的交互效果，无需引入额外第三方依赖，修改后完整代码如下：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class ImageScreen extends StatelessWidget {
  final String url;

  ImageScreen({
    Key? key,
    required this.url,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InteractiveViewer(
        // 最小缩放比例，可自定义调整
        minScale: 1.0,
        // 最大缩放比例，可自定义调整
        maxScale: 4.0,
        child: CachedNetworkImage(
          imageUrl: url,
          fit: BoxFit.contain,
        ),
      ),
    );
  }
}

可选调整项 #

• 若你的项目还未适配空安全，可以去掉参数的非空标识?和required，还原成你原有代码的参数写法即可
• 可自行修改minScale、maxScale参数调整缩放的区间范围，也可以配置panEnabled参数控制是否允许图片缩放后拖动平移
• 可根据展示需求调整CachedNetworkImage的fit参数，可选值包括BoxFit.cover、BoxFit.fill等适配不同的展示效果

内容的提问来源于stack exchange，提问作者Giovanny