Flutter 学习 - Widget 之 RichText

前言

我们在进行开发的时候经常会遇到一段文本中会有不同的字体，不同的颜色展示，在Android开发中我们会使用SpannableString或者Html.fronHtml来进行处理，那么在Flutter中如何处理来做这样的展示呢，Flutter为我们提供了一个可以展示多中样式的Widget - RichText。

使用

首先先看下在最简单的使用方法

          RichText(
              text: TextSpan(children: [
                TextSpan(
                    text: "我爱学习",
                    style: TextStyle(color: Colors.greenAccent, fontSize: 24)),
                TextSpan(
                    text: "我爱学习",
                    style: TextStyle(color: Colors.yellow, fontSize: 32)),
                TextSpan(
                    text: "我爱学习",
                    style: TextStyle(color: Colors.red, fontSize: 44),
                    semanticsLabel: "这是Flutter")
              ]),
            )

多种样式展示之 - RichText

下面看下RichText的源码

RichText({
    Key key, //Widget的标识
    @required this.text,//文字片段，类型 InlineSpan，通常我们会用TextSpan（它是InlineSpan的子类） 
    this.textAlign = TextAlign.start,//文本的对齐方式，类型 TextAlign
    this.textDirection,//文字方向，类型 TextDirection
    this.softWrap = true,//bool类型 是否支持软换行符，false表示只有一行，水平无限延伸
    this.overflow = TextOverflow.clip,// 文字的截断方式，类型TextOverflow
    this.textScaleFactor = 1.0,//double类型，代表相对于当前字体大小的缩放因子，默认值为1.0
    this.maxLines,//int类型 显示的最大行数   
    this.locale,//用于选择用户语言和格式设置首选项的标识符   类型 Locale
    this.strutStyle,//使用的支柱风格  类型StrutStyle
    this.textWidthBasis = TextWidthBasis.parent,
  }) : 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));

注：RichText 中除了text 是必选的，其他的都是可选参数
下面着重看下TextSpan这个Widget，另外几个在上一篇Flutter 学习 - Widget 之 Text中已进行详细介绍，这里不再赘述

• TextAlign
• TextDirection
• TextOverflow
• Locale
• StrutStyle
• TextSpan

TextSpan : 如果我们需要对一个Text内容的不同不分按照不同的样式显示，这时就可以使用TextSpan，它代表文本的一个片段，然后把不同的TextSpan组合起来

下面先看TextSpan的使用方法

TextSpan(
       text: "我爱学习",
       style: TextStyle(color: Colors.red, fontSize: 44)),

接下来看源码

const TextSpan({
    this.text, //类型String ，要显示的文字
    this.children,//子TextSpan 类型是List< TextSpan>
    TextStyle style,//文本样式 类型是TextStyle
    this.recognizer,//一个手势识别器，它将接收到达此文本范围的事件，类型是GestureRecognizer
    this.semanticsLabel,//语义标签，无实际用处，用于向Android上的TalkBack和iOS的VoiceOver提供图像描述
  }) : super(style: style,);

注：Talkback是一款由谷歌官方开发的系统软件,它的定位是帮助盲人或者视力有障碍的用户提供语言辅助
Voiceover功能是苹果公司在2009年4月新推出的一种语音辅助程序

结尾

截止到现在，RichText 就介绍完了。
以下是我的Flutter系列的链接，后续会持续更新，欢迎大家指正。

Flutter 系列文章

• Flutter 学习 - 开篇
• Flutter 学习 - 基础框架
• Flutter 学习 - 网络请求和数据解析
• Flutter 学习 - Widget 之 Text
• Flutter 学习 - Widget 之 RichText