Блог

Я создаю текстовое поле типа 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"),
    ),
  ))),
  

В виджете с отслеживанием состояния с такой конфигурацией

 double _scaleFactor = 1.0;
double _baseScaleFactor = 1.0;
  

И использовать setState только при обновлении, используя свойство scaleFactor on 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,
      ),
    ),
  ),
);
  

Высота и ширина, которые я задаю, просто расширяют и имитируют область детектора жестов.

Инженеры-программисты Google Гэри Цянь и Крис Янг продемонстрировали это в своем выступлении в Google Developer Days. Видео можно посмотреть здесь:

• Текст в Flutter: создание необычного пузыря для чата в GDD China

Этот код похож на некоторые другие ответы здесь, но они, в частности, добавляют зажим, чтобы он не становился слишком большим или маленьким.

Вот краткое описание их масштабируемого текстового пузыря:

Поскольку масштабирование по-прежнему вызывается даже при касании одним пальцем, я добавил проверку для scaleUpdateDetails.scale == 1.0 . Это означает, что пользовательский интерфейс не будет обновляться, если не было изменений в масштабе.

 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
    );
  }
}
  

Примечания:

• Используйте StatefulWidget , чтобы всегда сохранять текущий размер шрифта и масштаб
• Используйте две дополнительные переменные, чтобы запомнить исходный размер шрифта, а также масштаб в начале сжатия
• Оберните текстовый виджет в GestureDetector
• Сохраните исходный масштаб в onScaleStart
• Рассчитайте новый размер шрифта onScaleUpdate
• Используйте setState для восстановления виджета с новым размером

Решение: увеличение и уменьшение масштаба двумя пальцами.

   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),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ),
                );
              },
            ),
          ),
        ),
      );
    }
  }
  

Полный код. Надеюсь, это поможет.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Demo';

    return MaterialApp(
      title: appTitle,
      home: MyHomePage(title: appTitle),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;

  MyHomePage({Key key, this.title}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: TransformText());
  }
}

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

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

class _TransformTextState extends State<TransformText> {
  double scale = 0.0;
  double _scaleFactor = 1.0;
  double _baseScaleFactor = 1.0;
  double _savedVal = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('GestureDetector Test'), // changed
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
              child: Text('get'),
              onPressed: () {
                _savedVal = _scaleFactor;
              }),
          RaisedButton(
              child: Text('set'),
              onPressed: () {
                setState(() {
                  _scaleFactor = _savedVal;
                });
              }),
          Expanded(
            child: Center(
                child: GestureDetector(
              behavior: HitTestBehavior.translucent,
              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,
                child: Center(
                  child: Text(
                    'Test',
                    textScaleFactor: _scaleFactor,
                  ),
                ),
              ),
            )),
          ),
        ],
      ),
    );
  }
}