Flutter画布添加可编辑文本框：选中唤起键盘方案咨询

嘿，你遇到的这个问题其实很典型——CustomPainter绘制的文本只是静态的像素，本身没有交互和输入能力，所以没法直接让它变成可编辑的。不过有两种靠谱的方案可以实现你想要的效果：

方案一：在Canvas上层叠TextField（简单易实现） #

这是最快捷的方式：用Stack把你的CustomPaint和一个TextField叠在一起，把TextField定位到你原本绘制文本的偏移位置。这样既能保留Canvas的绘制内容，又能借助原生TextField的输入、键盘唤起等能力。

示例代码 #

import 'package:flutter/material.dart';

class EditableCanvasText extends StatefulWidget {
  @override
  _EditableCanvasTextState createState() => _EditableCanvasTextState();
}

class _EditableCanvasTextState extends State<EditableCanvasText> {
  final TextEditingController _textController = TextEditingController(text: "Hello there");
  final FocusNode _focusNode = FocusNode();
  // 文本的绘制偏移
  final Offset _textOffset = const Offset(50.0, 50.0);
  // 文本样式要和Canvas里的保持一致
  final TextStyle _textStyle = const TextStyle(
    color: Color.fromRGBO(0, 0, 0, 1.0),
    fontSize: 14.0,
    fontFamily: 'Roboto',
  );

  @override
  void dispose() {
    _textController.dispose();
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // 你的自定义Canvas绘制
        CustomPaint(
          painter: CanvasPainter(
            text: _textController.text,
            textOffset: _textOffset,
            textStyle: _textStyle,
          ),
        ),
        // 定位到文本位置的TextField
        Positioned(
          left: _textOffset.dx,
          top: _textOffset.dy,
          child: GestureDetector(
            // 点击Canvas文本区域时唤起键盘
            onTap: () => FocusScope.of(context).requestFocus(_focusNode),
            child: TextField(
              controller: _textController,
              focusNode: _focusNode,
              style: _textStyle,
              decoration: const InputDecoration(
                border: InputBorder.none,
                contentPadding: EdgeInsets.zero,
              ),
              onChanged: (value) {
                // 文本变化时通知Canvas重绘
                setState(() {});
              },
            ),
          ),
        ),
      ],
    );
  }
}

// 修改你的CustomPainter，支持外部传入文本、偏移和样式
class CanvasPainter extends CustomPainter {
  final String text;
  final Offset textOffset;
  final TextStyle textStyle;

  CanvasPainter({required this.text, required this.textOffset, required this.textStyle});

  @override
  void paint(Canvas canvas, Size size) {
    TextSpan textSpan = TextSpan(style: textStyle, text: text);
    TextPainter tp = TextPainter(
      text: textSpan,
      textAlign: TextAlign.left,
      textDirection: TextDirection.ltr,
    );
    tp.layout();
    tp.paint(canvas, textOffset);
  }

  @override
  bool shouldRepaint(covariant CanvasPainter oldDelegate) {
    return oldDelegate.text != text || 
           oldDelegate.textOffset != textOffset || 
           oldDelegate.textStyle != textStyle;
  }

  @override
  bool shouldRebuildSemantics(covariant CanvasPainter oldDelegate) => true;
}

注意点 #

• 要让TextField的样式（字体、大小、颜色）和Canvas绘制的完全一致，避免视觉错位
• 用onChanged回调通知Canvas重绘，保证绘制的文本和输入框内容同步
• 可以给TextField设置透明背景，让它看起来像是直接在Canvas上编辑

方案二：完全自定义可编辑文本（适合高度定制场景） #

如果你需要完全控制文本的绘制逻辑（比如自定义光标样式、特殊排版），可以自己实现输入交互：

• 用GestureDetector监听Canvas上的文本区域点击，唤起键盘
• 用TextEditingController管理输入文本，监听输入变化
• 在CustomPainter中绘制文本和自定义光标
• 借助FocusNode管理焦点状态，控制键盘的唤起和收起

核心思路示例 #

// 简化版示例，只展示关键逻辑
class CustomEditableText extends StatefulWidget {
  @override
  _CustomEditableTextState createState() => _CustomEditableTextState();
}

class _CustomEditableTextState extends State<CustomEditableText> {
  final TextEditingController _controller = TextEditingController(text: "Hello there");
  final FocusNode _focusNode = FocusNode();
  Offset _textOffset = const Offset(50, 50);
  bool _hasFocus = false;

  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {
        _hasFocus = _focusNode.hasFocus;
      });
    });
    // 唤起键盘
    WidgetsBinding.instance.addPostFrameCallback((_) {
      FocusScope.of(context).requestFocus(_focusNode);
    });
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => FocusScope.of(context).requestFocus(_focusNode),
      child: CustomPaint(
        painter: _EditableTextPainter(
          text: _controller.text,
          offset: _textOffset,
          hasFocus: _hasFocus,
          textStyle: const TextStyle(fontSize: 14, color: Colors.black),
        ),
        child: TextField(
          controller: _controller,
          focusNode: _focusNode,
          // 隐藏原生输入框，只借用它的键盘输入能力
          style: const TextStyle(color: Colors.transparent),
          decoration: const InputDecoration(border: InputBorder.none),
          onChanged: (value) => setState(() {}),
        ),
      ),
    );
  }
}

class _EditableTextPainter extends CustomPainter {
  final String text;
  final Offset offset;
  final bool hasFocus;
  final TextStyle textStyle;

  _EditableTextPainter({required this.text, required this.offset, required this.hasFocus, required this.textStyle});

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制文本
    TextSpan textSpan = TextSpan(style: textStyle, text: text);
    TextPainter tp = TextPainter(text: textSpan, textDirection: TextDirection.ltr);
    tp.layout();
    tp.paint(canvas, offset);

    // 绘制自定义光标（如果有焦点）
    if (hasFocus) {
      final cursorOffset = offset + Offset(tp.width, 0);
      canvas.drawLine(
        cursorOffset,
        cursorOffset + const Offset(0, tp.height),
        Paint()..color = Colors.black..strokeWidth = 1,
      );
    }
  }

  @override
  bool shouldRepaint(covariant _EditableTextPainter oldDelegate) {
    return oldDelegate.text != text || oldDelegate.hasFocus != hasFocus;
  }
}

这种方案的优势是完全自定义绘制，但需要处理更多细节（比如光标位置计算、文本选中逻辑等），适合对UI有特殊要求的场景。

总结一下：如果只是需要简单的可编辑文本，方案一足够好用；如果需要高度定制，再考虑方案二。

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