Flutter纯文本Hit-Test实现方案问询：字母描画应用触控精准判定需求

下面是两种可直接落地的高效方案，无需手动处理64个字符的路径转换：

方案1：使用Flutter原生API动态生成字符路径 （推荐，适配Flutter 3.10+） #

Flutter 3.10及以上版本已经新增了ui.Paragraph.getPathsForRange方法，可以直接获取文本的轮廓路径，无需外部预转换所有字符：

• 步骤1：将Nilam Tracing Font字体加载到项目中
• 步骤2：构建文本对应的ui.Paragraph实例，设置好字体、字号、字符内容等参数
• 步骤3：调用getPathsForRange(TextRange(start: 0, end: 字符长度))直接获取字符的轮廓路径集合
• 步骤4：在自定义CustomPainter的hitTest方法中，调用Path.contains(localPosition)判断触控点是否落在字符路径内

相关代码示例：

class CharHitTestPainter extends CustomPainter {
  final String char;
  final TextStyle textStyle;
  Path? _charPath;

  CharHitTestPainter({required this.char, required this.textStyle}) {
    _generateCharPath();
  }

  void _generateCharPath() async {
    final builder = ui.ParagraphBuilder(ui.ParagraphStyle(
      fontFamily: textStyle.fontFamily,
      fontSize: textStyle.fontSize,
    ))
      ..pushStyle(textStyle.getTextStyle())
      ..addText(char);
    final paragraph = builder.build();
    paragraph.layout(const ui.ParagraphConstraints(width: double.infinity));
    // 合并所有字符轮廓路径
    _charPath = paragraph.getPathsForRange(TextRange(start: 0, end: char.length)).fold(Path(), (prev, path) => prev..addPath(path, Offset.zero));
  }

  @override
  void paint(Canvas canvas, Size size) {
    if (_charPath != null) {
      canvas.drawPath(_charPath!, Paint()..color = Colors.black);
    }
  }

  @override
  bool hitTest(Offset position) {
    return _charPath?.contains(position) ?? false;
  }

  @override
  bool shouldRepaint(covariant CharHitTestPainter oldDelegate) {
    return oldDelegate.char != char || oldDelegate.textStyle != textStyle;
  }
}

使用时只需要传入对应的字符和字体样式即可，自动生成路径和命中检测逻辑，适配所有64个字符仅需修改传入的char参数即可。

方案2：像素颜色检测方案 （兼容低版本Flutter） #

如果项目需要兼容Flutter 3.10以下版本，可以使用画布像素采样的方式实现命中检测：

• 步骤1：绘制字符时，将字符内部填充为唯一的、不会和其他UI元素重合的特殊颜色（比如纯红色Color(0xFFFF0000)）
• 步骤2：重写CustomPainter的hitTest方法，调用canvas.toImage()获取当前绘制区域的图像，采样触控点位置的像素颜色，判断是否为预设的字符内部色即可
• 注意：可以将生成的图像缓存起来，避免每次触控都重新生成图像，提升性能

原生Text组件命中检测替代方案 #

如果不想自定义绘制文本，也可以通过RenderParagraph的原生方法判断触控点是否落在字符范围内：

final renderParagraph = context.findRenderObject() as RenderParagraph;
final textPosition = renderParagraph.getPositionForOffset(localOffset);
// 判断获取到的文本位置是否对应有效字符
final isInChar = renderParagraph.text.toPlainText().isNotEmpty 
  && textPosition.offset < renderParagraph.text.toPlainText().length;

内容的提问来源于stack exchange，提问作者rexloxrix