如何在flutter中将图像显示为TextFormField的一部分

Question

我想将图像显示为颤振中

TextFormField

的一部分。就像 ChatGPT 中的显示方式一样。我应该可以通过按退格键删除该图像。我不想按照许多情况下的建议将图像添加到前缀或后缀。我希望它成为聊天的一部分。

我遇到过像 flutter quill 这样的富文本编辑器，但我不确定它会有多好。还有其他方法可以达到同样的效果吗？

更新： 我正在寻找类似下图的东西。但使用退格键清除图像而不是关闭图标会更好。

Answer 1

您可以像这样在 TextField 中显示图像。

1. 创建一个扩展 TextEditingController 的类：

class ImageTextEditingController extends TextEditingController {}

2. 重写方法

   buildTextSpan

   。

@override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    final children = <InlineSpan>[];
    // ...Display image logic goes here
    return TextSpan(children: children, style: TextStyle(color: Colors.black));
  }

3. 添加占位符逻辑。当您覆盖 buildTextSpan 时，必须确保

   text

   中的

   TextEditingController

   值与

   TextSpan

   子级匹配。由于要添加图像，解决方案是在图像所在的

   text

   字符串中添加占位符。例如，您的文本可能是“查看这张照片：”并显示图像，因此我们添加一个字符，例如“ʉ”：“查看这张照片：ʉ”。

class ImageTextEditingController extends TextEditingController {

  void insertImage() {
    if(!selection.isValid) return;
    final cursorPos = selection.baseOffset;
    text = text.substring(0, cursorPos) + 'ʉ' + text.substring(cursorPos);
    selection = TextSelection.collapsed(offset: cursorPos + 1);
  }

  @override
  TextSpan buildTextSpan({
    required BuildContext context,
    TextStyle? style,
    required bool withComposing,
  }) {
    final children = <InlineSpan>[];
    final chars = text.split('');
    int currImageIndex = 0;
    for (int i = 0; i < chars.length; i++) {
      final char = chars[i];
      if (char == 'ʉ') {

        const url = 'https://picsum.photos/250?image=9';

        currImageIndex++;
        children.add(TextSpan(children: [
          WidgetSpan(child: SizedBox(width: 30, child: Image.network(url)))
        ]));

      } else {
        children.add(TextSpan(text: char));
      }
    }

    return TextSpan(children: children, style: TextStyle(color: Colors.black));
  }
}

现在每当调用方法

insertImage

时，字符“ʉ”就会被插入到光标位置。但它会显示为图像。现在在您的

TextField

控制器中使用此控制器。 现在也可以使用退格键删除。