Flutter--RichText和TextSpan学习

一、RichText和TextSpan的介绍

RichText：如果想在一句话或者一段文字里面显示不同样式的文字,可以使用RichText
TextSpan：用于指定文本片段的风格及手势交互

二、RichText和TextSpan的源码

2.1、RichText的源码

RichText({
    Key key,
    @required this.text,//显示文本的组件
    this.textAlign = TextAlign.start,//对齐方式
    this.textDirection,//文本的方向
    this.softWrap = true,//文本是否应该在软换行处换行
    this.overflow = TextOverflow.clip,//溢出处理方式
    this.textScaleFactor = 1.0,//每个逻辑像素的字体像素数
    this.maxLines,//最大行数
    this.locale,
    this.strutStyle,//strut样式
    this.textWidthBasis = TextWidthBasis.parent,//文本的宽度
    this.textHeightBehavior,
  }) : assert(text != null),
       assert(textAlign != null),
       assert(softWrap != null),
       assert(overflow != null),
       assert(textScaleFactor != null),
       assert(maxLines == null || maxLines > 0),
       assert(textWidthBasis != null),
       super(key: key, children: _extractChildren(text));

2.2、TextSpan的源码

const TextSpan({
    this.text,//String类型的文本
    this.children,//子组件
    TextStyle? style,//文本的样式
    this.recognizer,
    this.semanticsLabel,//语义
}) : super(style: style);

三、RichText和TextSpan的属性简介

3.1、RichText的属性

属性	说明
text	显示文本的组件，一般放TextSpan组件
textAlign	文本对齐方式 TextAlign.left TextAlign.right TextAlign.cente TextAlign.justify TextAlign.start TextAlign.end
textDirection	文本的方向 TextDirection.ltr TextDirection.rtl
overflow	文字溢出的处理方式 TextOverflow.clip：剪切溢出的文本填满容器。 TextOverflow.fade：将溢出的文本淡化为透明。 TextOverflow.ellipsis：使用省略号表示文本已溢出。 TextOverflow.visible：呈现容器外溢出的文本
textScaleFactor	每个逻辑像素的字体像素数
maxLines	最大行数
textWidthBasis	文本的宽度
softWrap	文本是否应该在软换行处换行

3.1、TextSpan的属性

属性	说明
text	String类型的文本
children	子组件
style	TextStyle类型的文本样式可以设置文字的大小、颜色、样式等
recognizer	指定手势交互 recognizer: TapGestureRecognizer()..onTap = () {},可以监听点击事件
semanticsLabel	语义

四、Demo

return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text("RichText学习"),
          ),
          body: Container(
            padding: EdgeInsets.all(10),
            child: RichText(
                textScaleFactor: 5,
                overflow: TextOverflow.fade,
                textDirection: TextDirection.ltr,
                textAlign: TextAlign.left,
                text: TextSpan(
                  children: [
                    TextSpan(
                        text:
                            "《上阳赋》自然引来众多关注。章子怡早年凭借出演张艺谋的电影《我的父亲母亲》走红",
                        style: TextStyle(
                          color: Colors.black,
                        ),
                        recognizer: TapGestureRecognizer()..onTap = () {}),
                    TextSpan(
                        text: "安全协议",
                        style: TextStyle(
                          color: Colors.red,
                        ),
                        //点击事件
                        recognizer: TapGestureRecognizer()..onTap = () {
                          print("点击了安全协议");
                        })
                  ],
                )),
          )),
    );

085aee68fac02545f778d60fa977e93.png