flutter - Flutter：如何向图像添加缩放功能

Question

在我的颤振应用程序中，使用以下代码构建了一个自定义图像

customImage.dart

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

Widget cachedNetworkImage(mediaUrl) {
  return CachedNetworkImage(
    imageUrl: mediaUrl,
    fit: BoxFit.cover,
    placeholder: (context, url)=>
    Padding(padding: EdgeInsets.all(20.0),
    child: CircularProgressIndicator(),
    ),
    errorWidget: (context, url, error) => Icon(Icons.error) ,
  );
}

我想添加一个功能来缩放此图像，我该如何实现？

Answer 1

用于photo_view此。它允许您创建可缩放的图像小部件，而无需处理捏合手势或某事。

import 'package:photo_view/photo_view.dart';

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

来源：https ://pub.dev/packages/photo_view

Answer 2

您可以在下面复制粘贴运行完整代码
您可以使用 Flutter 的内置InteractiveViewer https://api.flutter.dev/flutter/widgets/InteractiveViewer-class.html
一个小部件，该小部件可以与其子级进行平移和缩放交互。

工作演示

完整代码

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

Widget cachedNetworkImage(mediaUrl) {
  return CachedNetworkImage(
    imageUrl: mediaUrl,
    fit: BoxFit.cover,
    placeholder: (context, url) => Padding(
      padding: EdgeInsets.all(20.0),
      child: CircularProgressIndicator(),
    ),
    errorWidget: (context, url, error) => Icon(Icons.error),
  );
}

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatelessWidget(),
      ),
    );
  }
}

/// This is the stateless widget that the main application instantiates.
class MyStatelessWidget extends StatelessWidget {
  MyStatelessWidget({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: InteractiveViewer(
        boundaryMargin: EdgeInsets.all(20.0),
        minScale: 0.1,
        maxScale: 1.6,
        child: cachedNetworkImage("https://picsum.photos/250?image=9"),
      ),
    );
  }
}