TextSpan

不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]。一个[TextSpan]对象可以只有纯文本，或者它可以有子[TextSpan]对象与他们自己的样式(可能只是部分)覆盖该对象的[样式]。如果[TextSpan]同时具有[text]和[children]，那么[text]在[children]列表的开始处被视为一个无样式的[TextSpan]。(TextSpan离开。text]字段null将导致[TextSpan]充当具有li的[InlineSpan]树中的一个空节点。

基本属性

  1.   const TextSpan({
  2.     this.text, // 文本  如果[text]和[children]都是非空的，则文本将位于这些子元素的前面
  3.     this.children, // 文本 如果[text]和[children]都是非空的，则文本将位于这些子元素的后面
  4.     TextStyle style, // 设置样式
  5.     this.recognizer, //  手势操作 先了解
  6.     this.semanticsLabel,  // 这个[TextSpan]的另一个语义标签。如果存在，此跨度的语义将包含此值，而不是实际的文本。
  7.   }) : super(style: style,);
  • recognizer : 接收达到此范围的事件的手势识别器。[InlineSpan]本身不实现命中测试或事件分派。管理[InlineSpan]绘制的对象还负责分派事件。在呈现库中，它是[render段落]对象，它对应于小部件层中的[RichText]小部件;这些对象不会在[InlineSpan]s中冒泡事件，所以[识别器]只对直接击中[InlineSpan]的[文本]的事件有效，而不是它的任何[子元素]。


基本用法

  1.  RichText(
  2.    text: TextSpan(
  3.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  4.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  5.      text: "小钟", 
  6.      children: <InlineSpan>[  
  7.        TextSpan(text: ","),
  8.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  9.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  10.        TextSpan(
  11.         text : "有脾气的程序员！",
  12.         recognizer: TapGestureRecognizer()..onTap = (){
  13.          print("手势点击操作！");
  14.         },
  15.      )
  16.      ],
  17.     //  接收达到此范围的事件的手势识别器, 需直接击中元素
  18.      recognizer: TapGestureRecognizer()..onTap = (){
  19.        print("手势点击操作,这里点击不了，因为点击的是子孩子，不存在冒泡行为");
  20.      }
  21.    )
  22.  ),

image.png

RichText

基本属性

  1. RichText({
  2.     Key key,
  3.     @required this.text,
  4.     this.textAlign = TextAlign.start, // 是否以及如何水平对齐文本。
  5.     this.textDirection, //文本的方向性。
  6.     this.softWrap = true, // 文本是否应该在软换行 
  7.     this.overflow = TextOverflow.clip, // 如何处理溢出的文本 
  8.     this.textScaleFactor = 1.0, 
  9.     this.maxLines, // 可选的最大文本行数，
  10.     this.locale, // 当相同的Unicode字符可以根据语言环境以不同的方式呈现时，用于选择字体。很少需要设置此属性。默认情况下，它的值通过Localizations.localeOf(context)继承自封闭的应用程序。看到[RenderParagraph。获取更多信息。
  11.     this.strutStyle,
  12.     this.textWidthBasis = TextWidthBasis.parent,
  13.     this.textHeightBehavior,
  14.   }) : assert(text != null),
  15.        assert(textAlign != null),
  16.        assert(softWrap != null),
  17.        assert(overflow != null),
  18.        assert(textScaleFactor != null),
  19.        assert(maxLines == null || maxLines > 0),
  20.        assert(textWidthBasis != null),
  21.        super(key: key, children: _extractChildren(text));
  • textDirection : 文本的方向性。这决定了[textAlign]值如何，比如[textAlign。开始]和[TextAlign。最终解释。这也用于消除如何呈现双向文本的歧义。例如，如果[text]是一个英语短语，后面跟着一个希伯来语短语，在[TextDirection。上下文英语短语将在它的左边和希伯来短语在它的右边，而在一个[文本方向。上下文，英语短语在右边，希伯来语短语在左边。如果有的话，默认为环境[方向性]。如果没有环境[方向性]，那么这一种
  • softWrap : 文本是否应该在软换行。如果为false，文本中的符号将被定位为没有限制的水平空间。
  • overflow : 如何处理溢出的文本。可以通过[Text]和[RichText]传递[TextOverflow]。溢出]和[RichText。分别溢出]属性.
  • textScaleFactor : 每个逻辑像素的字体像素数。例如，如果文本比例因子为1.5，文本将比指定的字体大小大50%。
  • macLine : 可选的最大文本行数，必要时可换行。如果文本超过了给定的行数，它将根据[overflow]被截断。如果这是1，文本将不会换行。否则，文本将被包装在框的边缘。

textDirection 文本方向

  1. RichText(
  2.    textAlign: TextAlign.start,
  3.    text: TextSpan(
  4.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  5.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  6.      text: "小钟", // 主文体，在最前面显示
  7.      children: <InlineSpan>[ // 子文本 
  8.        TextSpan(text: ","),
  9.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  10.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  11.        TextSpan(
  12.         text : "有脾气的程序员！",
  13.         recognizer: TapGestureRecognizer()..onTap = (){
  14.          print("手势点击操作！");
  15.         },
  16.        ),
  17.        TextSpan(
  18.         text : "TextSpan不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]",
  19.        )
  20.      ],
  22.    )
  23.  ),

WX20200924-180124.pngWX20200924-180103.png

softWrap 文本是否应该在软换行

  1. RichText(
  2.    textAlign: TextAlign.start,
  3.    softWrap: true,
  4.    text: TextSpan(
  5.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  6.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  7.      text: "小钟", // 主文体，在最前面显示
  8.      children: <InlineSpan>[ // 子文本 
  9.        TextSpan(text: ","),
  10.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  11.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  12.        TextSpan(
  13.         text : "有脾气的程序员！",
  14.         recognizer: TapGestureRecognizer()..onTap = (){
  15.          print("手势点击操作！");
  16.         },
  17.        ),
  18.        TextSpan(
  19.         text : "TextSpan不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]",
  20.        )
  21.      ],
  23.    )
  24.  ),

WX20200924-180518.pngWX20200924-180540.png

overflow 如何处理溢出的文本

  1. RichText(
  2.    textAlign: TextAlign.start,
  3.    softWrap: true,
  4.    overflow: TextOverflow.ellipsis,
  5.   //  maxLines : 2,
  6.    text: TextSpan(
  7.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  8.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  9.      text: "小钟", // 主文体，在最前面显示
  10.      children: <InlineSpan>[ // 子文本 
  11.        TextSpan(text: ","),
  12.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  13.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  14.        TextSpan(
  15.         text : "有脾气的程序员！",
  16.         recognizer: TapGestureRecognizer()..onTap = (){
  17.          print("手势点击操作！");
  18.         },
  19.        ),
  20.        TextSpan(
  21.         text : "TextSpan不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]",
  22.        )
  23.      ],
  25.    )
  26.  ),

WX20200924-180725.pngWX20200924-180818.png

textScaleFactor 每个逻辑像素的字体像素数

  1. RichText(
  2.    textAlign: TextAlign.start,
  3.    textDirection: TextDirection.ltr,
  4.     textScaleFactor: 1.0,
  5.   //  maxLines : 2,
  6.    text: TextSpan(
  7.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  8.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  9.      text: "小钟", // 主文体，在最前面显示
  10.      children: <InlineSpan>[ // 子文本 
  11.        TextSpan(text: ","),
  12.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  13.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  14.        TextSpan(
  15.         text : "有脾气的程序员！",
  16.         recognizer: TapGestureRecognizer()..onTap = (){
  17.          print("手势点击操作！");
  18.         },
  19.        ),
  20.        TextSpan(
  21.         text : "TextSpan不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]",
  22.        )
  23.      ],
  25.    )
  26.  ),

WX20200924-180928.pngWX20200924-180947.png

macLine 可选的最大文本行数

  1. RichText(
  2.    textAlign: TextAlign.start,
  3.    textDirection: TextDirection.ltr,
  4.    overflow: TextOverflow.ellipsis,
  5.    maxLines : 2,
  6.    text: TextSpan(
  7.       // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  8.      style: TextStyle( fontSize : 26, color : Colors.brown[600] ),
  9.      text: "小钟", // 主文体，在最前面显示
  10.      children: <InlineSpan>[ // 子文本 
  11.        TextSpan(text: ","),
  12.        TextSpan(text : "是个认真", style: TextStyle(color : Colors.green[300]) ),
  13.        TextSpan(text: "且", style: TextStyle(color : Colors.deepOrangeAccent[100])  ),
  14.        TextSpan(
  15.         text : "有脾气的程序员！",
  16.         recognizer: TapGestureRecognizer()..onTap = (){
  17.          print("手势点击操作！");
  18.         },
  19.        ),
  20.        TextSpan(
  21.         text : "TextSpan不可变的文本范围。一个[TextSpan]对象可以使用它的[style]属性设置样式。该样式将应用于[text]和[children]",
  22.        )
  23.      ],
  25.    )
  26.  ),

WX20200924-181424.png

示例

  1. RichText(
  2.     textAlign: TextAlign.start,
  3.     textDirection: TextDirection.ltr,
  4.     softWrap: true,
  5.     overflow: TextOverflow.ellipsis,
  6.     textScaleFactor: 1.0,
  7.     maxLines : 2,
  8.     text: TextSpan(
  9.        // style : DefaultTextStyle.of(context).style, // 程序的默认字体样式
  10.       style: TextStyle( fontSize : 26, color : Colors.black ),
  11.       text: "请阅读小种条约!", // 主文体，在最前面显示
  12.       children: <InlineSpan>[ // 子文本 
  13.         TextSpan(
  14.          text : "《条约明细》",
  15.          style: TextStyle(color : Colors.blue[300]),
  16.          recognizer: TapGestureRecognizer()..onTap = (){
  17.            showDialog(
  18.              context: context,
  19.              builder: (context) {
  20.                return AlertDialog(
  21.                  title: Text('小种条约'),
  22.                  content: Text('小种条约制定于202.09.24'),
  23.                  actions: <Widget>[
  24.                    FlatButton(child: Text('取消'),onPressed: (){},),
  25.                    FlatButton(child: Text('确认'),onPressed: (){},),
  26.                  ],
  27.                );
  28.              });
  29.          },
  30.         ),
  32.       ],
  34.     )
  35.   ),

WX20200924-182456.pngWX20200924-182504.png