在画布上颤动可编辑文本

sam*_*ous 6 custom-painting dart flutter

我正在尝试在 Flutter 中的画布上添加一个可编辑的文本框,一旦选择就会弹出键盘。

我正在使用自定义画家将文本打印到画布上(如下面的代码所示)。是否可以使该文本可编辑,或者在画布上以特定偏移量添加文本输入元素?

import 'package:flutter/material.dart' as Material;

class CanvasPainter extends Material.ChangeNotifier implements Material.CustomPainter {
..

void paint(Canvas canvas, Size size) {

      Material.TextSpan textSpan = new Material.TextSpan(style: new material.TextStyle(color: new Maaterial.Color.fromRGBO(r, g, b, 1.0), fontSize: font.fontSize.toDouble(), fontFamily: 'Roboto'),text: "Hello there");
      Material.TextPainter tp = new Material.TextPainter( text: textSpan, textAlign: TextAlign.left, textDirection: TextDirection.ltr, textScaleFactor: ratio);
      tp.layout();
      tp.paint(canvas, new Offset(50.0,50.0));
}

}
Run Code Online (Sandbox Code Playgroud)

Dán*_*zsa 0

不是最好的解决方案,但我可以使用 OverlayEntry 解决类似的问题。

脚步:

  1. 创建一个 OverlayEntry,将一个(隐藏的)TextField 与 FocusNode 和 TextEditController 放入其中。
  2. 添加覆盖条目后,请求焦点放在 focusNode 上,因此键盘将打开。
  3. 将 onChanged 添加到 TextField,并以某种方式通知画家(例如 valueNotifier)文本更改。
  4. 在 TextPainer 中使用 TextEditController.text 值