在 flutter 中捏合缩放列表视图

Question

所以我想做一个小部件，用捏合来放大列表视图，列表视图包含：包含文本的容器。所以你基本上可以捏住来缩放整个列表视图。我查看了 flutter interactive viewer 和 zoom library，但它似乎没有用。

来自以下内容：

以下内容：

任何想法和祈祷。

Answer 1

You Can pass any widget to this class and can zoom the widget as you can!!

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:vector_math/vector_math_64.dart';

class ZoomableWidget extends StatefulWidget {
  final Widget child;

   const ZoomableWidget({Key? key, required this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  double _scale = 1.0;
  late double _previousScale;
  @override
  Widget build(BuildContext context) {
    return ClipRect(
      child: GestureDetector(
        onScaleStart: (ScaleStartDetails details) {
          _previousScale = _scale;
        },
        onScaleUpdate: (ScaleUpdateDetails details) {
          setState(() {
            _scale = _previousScale * details.scale;
          });
        },
        onScaleEnd: (ScaleEndDetails details) {
          _previousScale = 0;
        },
        child: Transform(
          transform: Matrix4.diagonal3(Vector3(_scale.clamp(1.0, 5.0),
              _scale.clamp(1.0, 5.0), _scale.clamp(1.0, 5.0))),
          alignment: FractionalOffset.center,
          child: widget.child, **add your listview here**
        ),
      ),
    );
  }
}

Answer 2

为此我有 2 个解决方案，希望它对你也有用。

InteractiveViewer

InteractiveViewer 小部件支持开箱即用的平移和缩放。

要使任何小部件可缩放，您只需使用 InteractiveViewer.

包裹子项

@override
Widget build(BuildContext context) {
  return Center(
    child: InteractiveViewer(
      panEnabled: false, // Set it to false to prevent panning. 
      boundaryMargin: EdgeInsets.all(80),
      minScale: 0.5,
      maxScale: 4, 
      child: FlutterLogo(size: 200),
    ),
  );
}

matrix_gesture_detector

@pskink 创建的手势检测器包，用于处理旋转、缩放和缩放。

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

class ZoomableWidget extends StatefulWidget {
  final Widget child;

  const ZoomableWidget({Key key, this.child}) : super(key: key);
  @override
  _ZoomableWidgetState createState() => _ZoomableWidgetState();
}

class _ZoomableWidgetState extends State<ZoomableWidget> {
  Matrix4 matrix = Matrix4.identity();

  @override
  Widget build(BuildContext context) {
    return MatrixGestureDetector(
      onMatrixUpdate: (Matrix4 m, Matrix4 tm, Matrix4 sm, Matrix4 rm) {
        setState(() {
          matrix = m;
        });
      },
      child: Transform(
        transform: matrix,
        child: widget.child,
      ),
    );
  }
}

在 flutter 中捏合缩放列表视图

Pinch to zoom listview in flutter

flutter

flutter-layout

flutter-dependencies

flutter-animation

flutter-test