Flutter GestureDetector：如何使用两根手指捏合/缩小或放大/缩小文本？

Question

我正在创建一个文本字段，如 Text 或 RichText。之后，我想使用捏合来放大/缩小文本的大小。现在，我尝试实施，GestureDetector但它也可以用一根手指放大/缩小。而且真的很难瞄准捏人检测。有时很冷。我添加了一个视频，显示捏住它后它会冻结并突然变大。第二个视频是当我用一根手指点击文本并移动到左上角时图像才会放大的情况。理想的实现是检测捏合和放大/缩小所有文本区域。当我只使用一根手指时禁用缩放。你能给我一些提示、链接或代码如何解决或在哪里找到解决方案吗？

body: GestureDetector(
  onScaleUpdate: (details) {
    setState(() {
      _textSize =
          _initTextSize + (_initTextSize * (details.scale * .35));
    });
  },
  onScaleEnd: (ScaleEndDetails details) {
    setState(() {
      _initTextSize = _textSize;
    });
  },
  child: Center(
      child: SizedBox(
    height: _textSize,
    child: FittedBox(
      child: Text("Test"),
    ),
  ))),

Answer 1

在具有这些配置的有状态小部件中

double _scaleFactor = 1.0;
double _baseScaleFactor = 1.0;

并使用setState只在更新，使用scaleFactor上textScaleFactor的财产RichText。

只有一个 setState 来重建小部件并在缩放开始时存储初始因子

GestureDetector(
  onScaleStart: (details) {
    _baseScaleFactor = _scaleFactor;
  },
  onScaleUpdate: (details) {
    setState(() {
      _scaleFactor = _baseScaleFactor * details.scale;
    });
  },
  child: Container(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    color: Colors.red,
    child: Center(
      child: Text(
        'Test',
        textScaleFactor: _scaleFactor,
      ),
    ),
  ),
);

我放置的高度和宽度只是为了扩展和模拟手势检测器的区域。

Answer 2

Google 软件工程师 Gary Qian 和 Chris Yang 在他们的 Google Developer Days 演讲中展示了这一点。该视频可在此处观看：

• Flutter 中的文本：在 GDD 中国建立一个漂亮的聊天气泡

代码与此处的其他一些答案类似，但它们特别添加了一个夹子，使其不会变得太大或太小。

这是他们的可扩展文本气泡的摘要：

因为即使是单指触摸仍然会调用缩放，所以我添加了一个检查scaleUpdateDetails.scale == 1.0. 这意味着如果比例没有变化，UI 将不会更新。

class Bubble extends StatefulWidget {
  @override
  _BubbleState createState() => _BubbleState();
}

class _BubbleState extends State<Bubble> {
  double _fontSize = 20;
  final double _baseFontSize = 20;
  double _fontScale = 1;
  double _baseFontScale = 1;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleStart: (ScaleStartDetails scaleStartDetails) {
        _baseFontScale = _fontScale;
      },
      onScaleUpdate: (ScaleUpdateDetails scaleUpdateDetails) {
        // don't update the UI if the scale didn't change
        if (scaleUpdateDetails.scale == 1.0) {
          return;
        }
        setState(() {
          _fontScale = (_baseFontScale * scaleUpdateDetails.scale).clamp(0.5, 5.0);
          _fontSize = _fontScale * _baseFontSize;
        });
      },
      child: ...
        // descendant with a Text widget that uses the _fontSize
    );
  }
}

笔记：

• 使用 aStatefulWidget以便您可以随时存储当前字体大小和比例
• 使用两个额外的变量来记住原始字体大小以及收缩开始时的比例
• 将 Text 小部件包装在一个 GestureDetector
• 将原始比例保存在 onScaleStart
• 计算新的字体大小 onScaleUpdate
• 用于setState以新大小重建小部件

Answer 3

解决方案：两根手指放大和缩小。

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

  class TransformText extends StatefulWidget {
    TransformText({Key key}) : super(key: key); // changed

    @override
    _TransformTextState createState() => _TransformTextState();
  }

  class _TransformTextState extends State<TransformText> {
    double scale = 0.0;

    @override
    Widget build(BuildContext context) {
      final ValueNotifier<Matrix4> notifier = ValueNotifier(Matrix4.identity());

      return Scaffold(
        appBar: AppBar(
          title: Text('Single finger Rotate text'), // changed
        ),
        body: Center(
          child: MatrixGestureDetector(
            onMatrixUpdate: (m, tm, sm, rm) {
              notifier.value = m;
            },
            child: AnimatedBuilder(
              animation: notifier,
              builder: (ctx, child) {
                return Transform(
                  transform: notifier.value,
                  child: Center(
                    child: Stack(
                      children: <Widget>[
                        Container(
                          color: Colors.red,
                          padding: EdgeInsets.all(10),
                          margin: EdgeInsets.only(top: 50),
                          child: Transform.scale(
                            scale:
                                1, // make this dynamic to change the scaling as in the basic demo
                            origin: Offset(0.0, 0.0),
                            child: Container(
                              height: 100,
                              child: Text(
                                "Two finger to zoom!!",
                                style:
                                    TextStyle(fontSize: 26, color: Colors.white),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      );
    }
  }