Flutter如何将文本与图片混合编辑？（功能扩展篇）

前言

一个优秀的富文本，应该包含优秀的排版算法、丰富的功能和渲染的高性能。在上一篇中，我们实现了可扩展的、基础的富文本编辑器。那么在本文中，让我们对富文本进行更多功能的扩展。

注：

— 为了在阅读本文时有更好的体验，请先阅读本专栏第一篇，前文涉及到的知识点，本文不再赘述。（摸鱼的朋友请忽略）

— 完整代码太多， 文章只分析核心代码，需要源码请到 代码仓库

文本与图片混排

在有关富文本的业务需求中，或其他文章渲染中，图文混排的功能是十分重要的。在Flutter中，为了解决这个图文混排的问题，有一个很方便的组件：WidgetSpan。而在本专栏的第一篇的文本基础知识中，已经分析了TextSpan在文本渲染过程中的作用。那么WidgetSpan是如何被渲染的呢，Flutter又是如何将TextSpan与WidgetSpan混合渲染在一起的呢？

—— 效果图完整代码在仓库demo/image_text

因为Flutter提供了WidgetSpan，所以效果图中的布局十分简单：

Widget _widgetSpan() {

  return Text.rich(TextSpan(

    children: <InlineSpan>[

      const TextSpan(text: 'Hello'),

      WidgetSpan(

        child:  

          ...

          //显示本地图片

          Image.file(

               _image!,

               width: width,

               height: height,

            ),

         ...

      ),

      const TextSpan(text: 'Taxze!'),

    ],

  ));

}

在之前的文章中，我们已经知道RichText实际上是需要一个InlineSpan，而TextSpan和WidgetSpan（中间还有个PlaceholderSpan）都是InlineSpan的子类实现。RichText最后会将InlineSpan传入RenderParagraph中。那么这个InlineSpan是一个什么样的呢？

InlineSpan树的结构

现在将目光先移到Text()和Text.rich()的构造函数上，我们可以看到，在Text()组件中，它的构造函数只有一个必要参数：data，且textSpan = null，而在Text.rich()的构造函数中，也只有一个必要参数：textSpan。

const Text(

  String this.data, {

  super.key,

  ...

}) : textSpan = null;


const Text.rich(

    InlineSpan this.textSpan, {

    super.key,

    ...

  }) : data = null;

然后将目光移到build上，在其主要逻辑中，我们可以发现，RichText在构造时传入的text是一个TextSpan，当采用data作为必要参数传入时，text参数才会有值，当采用textSpan作为参数传入时，children才不会为null。

@override

Widget build(BuildContext context) {

  Widget result = RichText(

    ...

    text: TextSpan(

      style: effectiveTextStyle,

      text: data,

      children: textSpan != null ? <InlineSpan>[textSpan!] : null,

    ),

  );

  ...

  return result;

}

经过上面的分析之后，我们可以将树的结构总结为两张图：

• 
  
• 当采用data作为必要参数传入时，树中只会存在一个根节点
  

• 
  
• 当采用textSpan作为参数传入时，树中会存在多个子树
  

树中的每一个TextSpan都包含text和style，其中的style是文本样式，如果没有设置某一个节点的样式，那么它会继承父节点中的样式。若根节点也没有自定义样式，那么就会采用默认的样式值。

WidgetSpan混入InlineSpan树结构

将目光移到RichText的createRenderObject方法上，可以看到RichText创建的渲染对象为RenderParagraph，并且将InlineSpan传入。

@override

RenderParagraph createRenderObject(BuildContext context) {

  return RenderParagraph(

    text, //InlineSpan

    ...

  );

}

再将目光移到RenderParagraph的performLayout函数上，它是RenderParagraph的重要逻辑，用于计算RenderParagraph的尺寸和child的绘制位置。

@override

void performLayout() {

  final BoxConstraints constraints = this.constraints;

  _placeholderDimensions = _layoutChildren(constraints);

  _layoutTextWithConstraints(constraints);

  _setParentData();


  final Size textSize = _textPainter.size;

  final bool textDidExceedMaxLines = _textPainter.didExceedMaxLines;

  size = constraints.constrain(textSize);

  ...

}

但是，这里计算的child不是TextSpan，而是PlaceholderSpan。通过_extractPlaceholderSpans挑选出所有的PlaceholderSpan，visitChildren是InlineSpan中的方法，通过该方法能遍历InlineSpan树。

late List<PlaceholderSpan> _placeholderSpans;

void _extractPlaceholderSpans(InlineSpan span) {

  _placeholderSpans = <PlaceholderSpan>[];

  span.visitChildren((InlineSpan span) {

    //判断是否为PlaceholderSpan

    if (span is PlaceholderSpan) {

      _placeholderSpans.add(span);

    }

    return true;

  });

}

到这里，对于InlineSpan树的结构已经清晰了，在树中，除了TextSpan，还存在着PlaceholderSpan类型的节点，而WidgetSpan又是继承于PlaceholderSpan的。

不过，PlaceholderSpan只是一个占位节点，RenderParagraph并不会对其进行绘制，RenderParagraph只负责确定它的大小和需要绘制的位置。RenderParagraph只需在布局的时候，将这个绘制的区域预留给WidgetSpan，这样绘制时就不会改变树的结构。

计算WidgetSpan的绘制区域

performLayout是RenderParagraph的布局函数，performLayout内部主要调用了三个函数：

final BoxConstraints constraints = this.constraints;

_placeholderDimensions = _layoutChildren(constraints);

_layoutTextWithConstraints(constraints);

_setParentData();

• 
  
• 
  

  _layoutChildren函数主要是用于计算确认PlaceholderSpan占位节点的大小。

  
  

  List<PlaceholderDimensions> _layoutChildren(BoxConstraints constraints, {bool dry = false}) {
  
  final List<PlaceholderDimensions> placeholderDimensions = List<PlaceholderDimensions>.filled(childCount, PlaceholderDimensions.empty);
  
    while (child != null) {
  
      if (!dry) {
  
        ...
  
        childSize = child.size;
  
      } else {
  
        childSize = child.getDryLayout(boxConstraints);
  
      }
  
      placeholderDimensions[childIndex] = PlaceholderDimensions(
  
        size: childSize,
  
        alignment: _placeholderSpans[childIndex].alignment,
  
        baseline: _placeholderSpans[childIndex].baseline,
  
        baselineOffset: baselineOffset,
  
      );
  
      child = childAfter(child);
  
      childIndex += 1;
  
    }
  
    return placeholderDimensions;
  
  }

  
  
  
• 
  

  _setParentData此函数用于将父节点的设置给子节点，具体的计算（尺寸计算、偏移计算）都在_layoutTextWithConstraints函数中完成。

  
  

  void _setParentData() {
  
    ...
  
    while (child != null && childIndex < _textPainter.inlinePlaceholderBoxes!.length) {
  
      final TextParentData textParentData = child.parentData! as TextParentData;
  
      textParentData.offset = Offset(
  
        _textPainter.inlinePlaceholderBoxes![childIndex].left,
  
        _textPainter.inlinePlaceholderBoxes![childIndex].top,
  
      );
  
      textParentData.scale = _textPainter.inlinePlaceholderScales![childIndex];
  
      child = childAfter(child);
  
      childIndex += 1;
  
    }
  
  }

  
  
  
• 
  

  _layoutTextWithConstraints此函数包含主要的布局逻辑。其中的_textPainter是RichText将text传入RenderParagraph时，RenderParagraph将text保存在_textPainter中。setPlaceholderDimensions方法用于设置InlineSpan树中每个占位符的尺寸。

  
  

  void _layoutTextWithConstraints(BoxConstraints constraints) {
  
    _textPainter.setPlaceholderDimensions(_placeholderDimensions);
  
    _layoutText(minWidth: constraints.minWidth, maxWidth: constraints.maxWidth);
  
  }

  
  

  在setPlaceholderDimensions将各占位节点尺寸设置完成之后，会调用_layoutText来进行 布局。

  
  

  void _layoutText({ double minWidth = 0.0, double maxWidth = double.infinity }) {
  
    final bool widthMatters = softWrap || overflow == TextOverflow.ellipsis;
  
    //_textPainter包含节点的尺寸。
  
    _textPainter.layout(
  
      minWidth: minWidth,
  
      maxWidth: widthMatters ?
  
        maxWidth :
  
        double.infinity,
  
    );
  
  }

  
  

  调用layout方法，就代表着进入了TextPainter，开始创建ParagraphBuilder，然后进入引擎层开始绘制。

  
  
  

到这里，我们已经了解了图文混排中的图，是如何被混入文本一起渲染的了。下面让我们开始探索，如何将文本与图片放在一起编辑。

文本与图片混合编辑

要想将文本与图片混合编辑，就要在构建InlineSpan树时，在Image()外嵌套一层WidgetSpan，并将其混入InlineSpan树。而其中较为复杂的是对TextRange的位置改变的计算（添加图片、删除图片）。接下让我们一起探索，文本与图片混合编辑的秘密。

输入为图像时的Style处理

若用户操作为插入图片，则该操作不存入Style，若为文本的插入，根据TextRange，判断所需要的Style。

List<TextStyle> getReplacementsAtSelection(TextSelection selection) {

  // 只有[left replacement]才会被记录

  final List<TextStyle> stylesAtSelection = <TextStyle>[];


  for (final TextEditingInlineSpanReplacement replacement in replacements!) {

    if (replacement.isWidget == true) {

        //若为非编辑文本操作，则暂不处理。

    } else {

        ...

        ///保存style

        stylesAtSelection

          .add(replacement.generator('', replacement.range).style!);

        ...

  }

  return stylesAtSelection;

}

构建InlineSpan树

• 
  
• 
  

  定义行为添加函数，将用户行为通过该函数保存。

  
  

  void applyReplacement(TextEditingInlineSpanReplacement replacement) {
  
    if (replacements == null) {
  
      replacements = [];
  
      replacements!.add(replacement);
  
    } else {
  
      replacements!.add(replacement);
  
    }
  
  }

  
  
  
• 
  

  将用户行为映射到生成的InlineSpan

  
  

  static void _addToMappingWithOverlaps(
  
      InlineSpanGenerator generator,
  
      TextRange matchedRange,
  
      Map<TextRange, InlineSpan> rangeSpanMapping,
  
      String text,
  
      //非文本编辑行为
  
      {bool? isWidget}) {
  
    // 在某些情况下，应该允许重叠。
  
    // 例如在两个TextSpan匹配相同的替换范围的情况下，
  
    // 尝试合并到一个TextStyle的风格，并建立一个新的TextSpan。
  
    bool overlap = false;
  
    List<TextRange> overlapRanges = <TextRange>[];
  
    //遍历索引
  
    for (final TextRange range in rangeSpanMapping.keys) {
  
      if (math.max(matchedRange.start, range.start) <=
  
          math.min(matchedRange.end, range.end)) {
  
        overlap = true;
  
        overlapRanges.add(range);
  
      }
  
    }
  
     ...
  
   //更新TextRanges到InlineSpan的映射。
  
   rangeSpanMapping[uniqueRange] =
  
                TextSpan(text: uniqueRange.textInside(text), style: mergedStyles);
  
     ...
  
  }

  
  
  
• 
  

  构建InlineSpan树

  
  

  @override
  
  TextSpan buildTextSpan({
  
    required BuildContext context,
  
    TextStyle? style,
  
    required bool withComposing,
  
  }) {
  
      //该函数其他逻辑在上一篇文章中已分析
  
  }

  
  
  

通过image_picker插件，实现插入图片

getImage(BuildContext context) async {

  //获取Editable的controller

  final ReplacementTextEditingController controller =

      _data.replacementsController;

  //定义当前行为TextRange

  final TextRange replacementRange = TextRange(

    start: controller.selection.start,

    end: controller.selection.end,

  );

  File? image;

  //默认尺寸

  double width = 100.0;

  double height = 100.0;

  //从相册获取图片

  var getImage = await ImagePicker().pickImage(source: ImageSource.gallery);

  image = File(getImage!.path);

  //调用applyReplacement函数，保存用户行为

  controller.applyReplacement(

    TextEditingInlineSpanReplacement(

        replacementRange,

        (string, range) => WidgetSpan(

                child: GestureDetector(

              onTap: () {

                ...

              },

              child: Image.file(

                image!,

                width: width,

                height: height,

              ),

            )),

        true,

        isWidget: true),

  );

  _data = _data.copyWith(replacementsController: controller);

  setState(() {});

}

尾述

在这篇文章中，我们实现了将文本与图片混合编辑的功能，其他需要插入的模块也能举一反三实现，例如插入视频。本专栏实现的富文本编辑器对于真实的复杂需求也只是一个小玩意，也有着较多的缺陷，依靠我一个人的力量也是很难实现标题中说的《高性能、多功能的富文本编辑器》，本专栏旨在于引领大家走入Flutter富文本编辑器的世界，而不单单只是学会使用已有的插件，却不了解其中的实现原理，当然这是一个超级大坑🤣。例如文本与图片的排版问题...这些缺陷都需要很多的时间一点点处理解决，也希望在将来能有更多的朋友与我一起探索文本的世界。而在后续的系列文章中，将会把富文本更加的完善，完成一个笔记的Demo，也会有对富文本性能的优化与分析。希望这篇文章能对你有所帮助，有问题欢迎在评论区留言讨论~

参考

flutter_quill

zefyrka

关于我

Hello，我是Taxze，如果您觉得文章对您有价值，希望您能给我的文章点个❤️，有问题需要联系我的话：我在这里 ，也可以通过掘金的新的私信功能联系到我。如果您觉得文章还差了那么点东西，也请通过关注督促我写出更好的文章——万一哪天我进步了呢？😝