Flutter - 控件之 RichText

RichText

RichText富文本，可以显示多个不同样式的文本，如一段文本中显示不同字体颜色，可点击交互等。
1、RichText参数解析：

RichText({
        Key key,
        @required this.text, //文本部件，TextSpan
        this.textAlign = TextAlign.start,
        this.textDirection, //文本方向
        this.softWrap = true, //文本换行处是否断行，默认true
        this.overflow = TextOverflow.clip, //文本溢出处理,TextOverflow.ellipsis省略号
        this.textScaleFactor = 1.0, //文本缩放系数，默认1.0，如设置为2，则，文本大小是指定fontSize的2倍。
        this.maxLines, //最多显示行数，溢出部分依据overflow样式处理
        this.locale,
        this.strutStyle,
        })

2、代码示例：

    Widget _buildRichText() {
      return Container(
        color: Colors.orange,
        child: RichText(
          text: TextSpan(
            children: [
              TextSpan(
                text: "小花花",
                style: TextStyle(
                    fontWeight: FontWeight.w500, color: Colors.black87),
              ),
              TextSpan(
                text: " 回复 ",
                style: TextStyle(color: Colors.black87),
              ),
              TextSpan(
                text: "@小红红点我",
                style: TextStyle(
                  fontWeight: FontWeight.w500,
                  color: Colors.blue,
                ),
                recognizer: _tapGestureRecognizer,
              ),
              TextSpan(
                text: "：",
                style: TextStyle(color: Colors.black87),
              ),
              TextSpan(
                text: "琼花，木棉花，鸢尾花，彼岸花，山茶花，曼陀罗。",
                style: TextStyle(color: Colors.black54),
              ),
              TextSpan(
                text: "长按我",
                style: TextStyle(color: Colors.blue),
                recognizer: _longPressGestureRecognizer,
              ),
            ],
          ),
        ),
      );
    }

TextSpan

TextSpan通常作为RichText的文本部件；
通过参数style设置样式，作用于TextSpan的text和子项children；
通过参数recognizer添加点击TapGestureRecognizer、长按LongPressGestureRecognizer等手势交互。
1、TextSpan参数解析：

	TextSpan({
        this.style,
        this.text, //文本内容,
        this.children, //内容，TextSpan列表
        this.recognizer, //给文本添加手势，如点击、长按手势等
        this.semanticsLabel,
        })

2、代码示例：

TextSpan(
	text: "@小红红点我",
	style: TextStyle(
		fontWeight: FontWeight.w500,
		color: Colors.blue,
		),
	recognizer: _tapGestureRecognizer,
	)

添加手势

  LongPressGestureRecognizer _longPressGestureRecognizer; //长按手势
  TapGestureRecognizer _tapGestureRecognizer; //点击手势

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _longPressGestureRecognizer = LongPressGestureRecognizer();
    _longPressGestureRecognizer.onLongPress = _handlePress;
    _tapGestureRecognizer = TapGestureRecognizer();
    _tapGestureRecognizer.onTap = _handleTap;
  }

  @override
  void dispose() {
    // TODO: implement dispose
    _longPressGestureRecognizer.dispose();
    _tapGestureRecognizer.dispose();
    super.dispose();
  }

  //长按触发事件
  void _handlePress() {
    print("长按文本");
  }
  //点击触发事件
  void _handleTap() {
    print("点击文本");
    Fluttertoast.showToast(msg: "我是小红花");
  }

效果图

Text.rich

创建带有TextSpan的文本部件。
1、参数解析：

	Text.rich(
        this.textSpan,  //不可为null
        {
        Key key,
        this.style, //文本样式
        this.strutStyle, //支柱样式
        this.textAlign, //文本水平对齐方式
        this.textDirection,  //文本方向
        this.locale,
        this.softWrap, //换行处是否断行
        this.overflow, //文本溢出处理,TextOverflow.ellipsis省略号
        this.textScaleFactor, //文本缩放系数，默认1.0，如设置为2，则，文本大小是指定fontSize的2倍。
        this.maxLines, //最多显示行数，溢出部分依据overflow样式处理
        this.semanticsLabel,
        })

2、代码示例：

    Widget _buildTextRich() {
      return Container(
        color: Colors.orange,
        child: Text.rich(
          TextSpan(
            text: "易方达创业板ETF连接A\n",
            children: [
              TextSpan(text: "持有收益率："),
              TextSpan(text: "15.3%", style: TextStyle(color: Colors.red)),
            ],
          ),
          textDirection: TextDirection.rtl,
          style: TextStyle(color: Colors.blue),
        ),
      );
    }

3、效果图：