background
Industry status quo
RichText text mixing principle
The creation process

  1. RichText initialization process will all WidgetSpan recursive filtering out of the text, passed to the parent class MultiChildRenderObjectWidget.

  2. Create MultiChildRenderObjectElement, then RichText will pass createRenderObject, generate RenderParagraph.

  3. TextPainter is created during RenderParagraph initialization. This is the core of rendering. Layout, Paint, and event distribution are performed here. Metagspan is then recursively filtered (WidgetSpan).

Rendering process

  1. RenderParagraph performs performLayout as shown above. First, _layoutChildren: lays out the child control to get the size of the child control, and returns if there are no child controls. The child control in question is WidgetSpan.

  2. The second step _layoutTextWithConstraints, perform the _textPainter layout method, here will make the text (InlineSpan) to build, at this time will be carried out in accordance with its tree traversal.

  3. The TextWidget build will give the Builder its own text (which is a real string) addText.

  4. When WidgetSpan builds, addPlaceholder information for its PlaceholderDimensions widget to the builder. You are simply adding a placeholder, which will be the same size as the control.

  5. Next, the _Paragraph does a layout and takes the individual placeholder positions and stores them.

  6. The Paint process completes the text with placeholders, then iterates over the placeholder positions obtained by the child controls in steps 2-3, setting offsets.

Design ideas


     
    
      
    Hello [smile], your baby is very good [yi fang], free delivery? [Smirk][Smirk]
    
     
Copy the code

     
    
      
    </font><strong><fontcolor="#F54444"> </font></strong><fontcolor="# F54444"> </font></strong>< fontcolor="#F54444"> </font></strong>"
    
     
Copy the code

  1. First of all, for the control that is determined to be pure Text, the RichText of single TextSpan is directly used, without the encapsulation of Text.

  2. Use RegExp(r’\[[^\]\[]+\]’) to match emoji placeholders such as [smile] and replace them with
    =003_>

  3. Take the final HTMLString, using HTML | Dart Package, HTML parsing, generating HTML Node Tree

  4. Recursive HTML Node Tree

  5. Text labels are mapped to TextSpan

  6. Image labels are mapped to FDImageSpan; Replace the upgrade of Flutter with WidgetSpan and set its child to the Image Widget

  7. The link tag maps to TextSpan and defines GestureRecognizer’s corresponding gesture



The effect



The follow-up plan

Xianyu Technology team is not only the creator of alibaba Group’s idle trading community, but also the leader and innovator of new technologies for mobile and high-concurrency big data applications. We work closely with the Google Flutter/Dart team, contributing multiple high-star projects and a lot of PR to the community. We are actively exploring the innovative application of deep learning and visual technology in interactive, transactional and community scenarios. The FaaS platform built by Xianyu technology and the group middleware team supports high concurrent access scenarios of tens of millions of users every day.

Now! Client/server Java/architecture/front-end/quality engineer For the society + campus recruitment, base Hangzhou Alibaba Xixi Park, together to create creative space community products, do the depth of the top open source projects, together to expand the technical boundaries of the ultimate achievement!

* Send resumes to small idle fish →[email protected]



Please look for the idle fish technology