Flutter GestureDetector:如何用两根手指捏/扩或放大/缩小文本? [英] Flutter GestureDetector: How to pinch in/out or zoom in/out Text using two fingers?

问题描述

我正在创建一个文本字段，例如Text或RichText.然后，我想使用捏放大/缩小文本的大小.现在，我尝试实现GestureDetector，但是它也可以用一根手指放大/缩小.而且，目标锁定检测确实很困难.有时会冻结.我添加了一个视频，该视频显示捏后何时冻结并突然变大.第二个视频是这样的情况:仅当我用一根手指点击文本并向上移动到左上角时，图像才会放大.理想的实现是检测捏和放大/缩小所有文本区域.当我仅使用一根手指时，请禁用缩放功能.您能否给我一些提示，链接或代码，以解决问题或在哪里找到解决方案?

I'm creating a text field like Text or RichText. And after that, I want to zoom in/out the size of text using pinching. For now, I tried implementing GestureDetector but it zooms in/out with one finger too. And it is really hard to aim pinching detection. Sometimes is freezing. I added a video that shows when after pinching it freezes and suddenly get bigger. The second video is with the case that image zoom in only when I tap on the text with one finger and move to up left corner. The ideal implementation is to detect pinch and zoom in/out all text area. And disable zooming when I use only one finger. Could you send me some hints, link or code how to solve or where to find the solution?

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"),
    ),
  ))),

推荐答案

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

double _scaleFactor = 1.0;
double _baseScaleFactor = 1.0;

并且仅在更新时使用setState，并使用RichText的textScaleFactor属性上的scaleFactor.

And use setState only on update, using the scaleFactor on textScaleFactor property of 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,
      ),
    ),
  ),
);

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

The height and width I put just to expand and simulate area of gesture detector.

这篇关于Flutter GestureDetector:如何用两根手指捏/扩或放大/缩小文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！