Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

You must have used Text when learning Flutter, and you may choose RichText to process some complex texts. Further, you must use TextSpan when using RichText. This dish thought it could be a simple knowledge point for learning. But as I went deeper, I realized that TextSpan covered a lot of things and was worth studying, so I put together a separate blog post.

The core of RichText is the TextSpan structure, which is similar to the ViewGroup tree structure in Android.

RichText for everyday use

RichText is an advanced version of Text.

  1. TextDirection is used to control the position of text, which is left or right; When co-existing with TextAlign, the TextAlign attribute takes precedence over the whole.
Widget richTextWid01() {return RichText(text: TextSpan(text: 'textdirection. LTR default left ', style: TextStyle(fontSize: Color: color.black), textDirection: textdirection.ltr); } Widget richTextWid02() {return RichText(text: TextSpan(text: 'textdirection.rtl default right ', style: TextStyle(fontSize: 16.0, color: color.black), textDirection: textdirection.rtl); } Widget richTextWid03() {return RichText(text: TextSpan(text: 'textDirection 'with textAlign), style: TextStyle(fontSize: 16.0, color: color.black), textDirection: Textdirection.rtl, textAlign: textalign.center); }Copy the code
  1. RichText can use TextSpan to achieve a variety of text effects, xiaocaie thinks it is a bit like text effect Mosaic, each TextSpan can be set to a separate effect;
Widget richTextWid04() {return RichText(text: TextSpan), style: TextStyle(fontSize: 16.0, color: Colors. Black), children: <TextSpan>[TextSpan(text: 'red ', style: TextSpan(fontSize: 18.0, color: Color.red), TextSpan(text: 'green ', style: TextStyle(fontSize: 18.0, color: color.green)), TextSpan(text:' green ', color: color.green) 'blue ', style: TextStyle(fontSize: 18.0, color: color.blue), TextSpan(text:' white ', style: TextStyle(fontSize: 18.0, color: color.blue)), Color: color.white), color: color.white), color: color.white), color: color.white Colors. Purple)), TextSpan(text: 'black ', style: TextStyle(fontSize: 18.0, color: color.black)]), textAlign: TextAlign.center); }Copy the code
  1. TextSpan recognspan is recognizer-set click events, including clicks/long presses, with the help of the izer;
final TapGestureRecognizer recognizer = TapGestureRecognizer(); void initState() { super.initState(); Recognizer.ontap = () {toasts. Show (' Hello, welcome to like or follow! ', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM); }; } Widget richTextWid05() {return RichText(text: TextSpan(text: 'recognizer is recognizer, set to click events, ', style: Text-align: left; text-justify: left; text-justify: left; text-justify: left; text-justify: left; text-justify: left; text-justify: left; TextStyle(fontSize: 17.0, color: color.blue), recognizer: recognizer)); }Copy the code

Everyday use of TextPainter

RichText is easy to use, but TextSpan is a lot more fun to look at in depth; Flutter provides a Canvas drawing method similar to Android, but Canvas does not support drawText. If you want to drawText, you need TextPainter, which is mainly implemented by TextSpan.

To use TextPainter, we need to inherit CustomPainter and implement paint and shouldRepaint methods, mainly drawing TextPainter in Paint. With RichText function is the same, can fully achieve RichText effect;

TextPainter painting requires the implementation of layout and Paint methods, that is, drawing position and drawing range.

  1. TextDirection and TextAlign have the same effect as RichText, but TextPainter needs to set the maximum and minimum range of layout. In this case, text position is related to layout. When the text length is less than the minWidth minimum, the minWidth is limited to the left/right/center, etc. When the text length is greater than the minimum minWidth set, the maximum width of maxWidth is used as the limit, including newline.
TextStyle(fontSize: 16.0, color: RGB (50, 50, 50)) Colors.black)), textDirection: TextDirection.ltr) .. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 0.0)); RTL ('TextDirection. RTL default right ', style: TextStyle(fontSize: 16.0, color: 0) Colors.black)), textDirection: TextDirection.rtl) .. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 24.0)); TextStyle(fontSize: 16.0, color: RGB (50, 50, 50), color: RGB (50, 50, 50) Colors.black)), textDirection: TextDirection.rtl, textAlign: TextAlign.center) .. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 48.0)); Font style (fontSize: 16.0, color: 0) Colors.black)), textDirection: TextDirection.rtl) .. Layout (maxWidth: screen.width-100.0, minWidth: screen.width-200.0).. Paint (canvas, Offset (0.0, 90.0)); TextStyle(fontSize: 16.0, color: color.black) TextDirection.rtl) .. Layout (maxWidth: screen.width-100.0, minWidth: screen.width-140.0).. Paint (canvas, Offset (0.0, 124.0));Copy the code
  1. It is also convenient for drawing multi-effect styles, which are basically the same as RichText;
Text painter (text: TextSpan, style: TextStyle(fontSize: 16.0, color: color.black), children: <TextSpan>[TextSpan(text: 'red ', style: TextStyle(fontSize: 18.0, color: color.red)), TextSpan(text:' green ', style: TextSpan(fontSize: 18.0, color: color.green), TextSpan(fontSize: 18.0, color: color.green), TextSpan(fontSize: 18.0, color: color.green) Color.blue), TextSpan(text: 'white ', style: TextStyle(fontSize: 18.0, color: color.white)), TextSpan(text: '\n purple ', style: TextStyle(fontSize: 18.0, color: color.purple), TextSpan(text: 'black ', style: TextStyle(fontSize: 18.0, color: color.purple)), Color: color.black))]), textDirection: textdirection.ltr, textAlign: textalign.center).. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 148.0));Copy the code
  1. Recognizer is recognizer, recognizer is recognizer, and recognizer is recognizer and RichText are recognizer and RichText is recognizer, but recognizer is recognizer and RichText is recognizer and RichText is recognizer and RichText is recognizer and RichText is recognizer.
Recognizer (text: TextSpan(text: 'recognizer is a gesture recognizer that sets click events, ', style: TextStyle(fontSize: 17.0, color: recognspan) Color.black), children: <TextSpan>, style: TextSpan(fontSize: 17.0, color: Colors.blue)) ], recognizer: TapGestureRecognizer() .. OnTap = () {print('=== '); }), textDirection: TextDirection.ltr, textAlign: TextAlign.center) .. Layout (maxWidth: screen.width-40.0, minWidth: screen.width-40.0).. Paint (canvas, Offset (20.0, 200.0));Copy the code
  1. The most interesting property is the height property of the style in TextSpan. In TextSpan, this value sets the line height and takes the text reference line as the minimum distance.
TextPainter(text: TextSpan(text: 'TextSpan ', style: TextStyle(fontSize: 20.0, color: Colors. Black54), children: <TextSpan>[TextSpan(TextSpan: '\n作者 : 微 博 (height:1.6)', style: TextSpan(fontSize: 14.0, color: Colors. Black54, height: 1.6))]), textDirection: textdirection.ltr, textAlign: textalign.center).. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 20.0)); TextPainter(text: TextSpan(text: 'TextSpan ', style: TextStyle(fontSize: 20.0, color: Colors. Black54), children: <TextSpan>[TextSpan(TextSpan: '\n作者 : 微 博 (height:3.0)', style: TextSpan(fontSize: 14.0, color: Colors. Black54, height: 3.0))]), textDirection: textdirection.ltr, textAlign: textalign.center).. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 90.0)); TextPainter(text: TextSpan(text: 'TextSpan'), style: TextStyle(fontSize: 20.0, color: 0) Colors. Black54, height:0.1), children: <TextSpan>[TextSpan(text: '\nTextPainter (height:0.1)', style: TextStyle(fontSize: 20.0, color: color.black54, height: 0.1) '\nTextPainter (height:0.1)', style: TextStyle(fontSize: 20.0, color: color.black54, height: TextDirection: textDirection.ltr, textAlign: Textalign.center).. layout(maxWidth: Screen.width, minWidth: Screen.width) .. Paint (canvas, Offset (0.0, 220.0));Copy the code

If there is something wrong, I hope to point it out.

Source: Little Monk A Ce