Flutter-多行文字展开收起

大家先看gif图，如果是自己想要的效果就可以往下面看了，不是想要的效果的话，就点赞离开。

文字折叠视频.gif

使用

//属性说明
@required this.expandText,//展开自定义文字，如图的全文
@required this.collapseText,//收起自定义文字，如图的收起
 this.expanded = false,//是否展开，默认是不展开
 this.linkColor,//展开/收起文字颜色
 this.style,//字体样式
 this.maxLines = 2,//展开前展示的行数


//使用
import 'package:flutter/material.dart';
import 'package:flutter_learn/widgets/tq_expandableText.dart';

class ExpandText extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('文字折叠'),
      ),
      body: Container(
        padding: EdgeInsets.all(20),
        child: TQExpandableText(
            '测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠测试长文字折叠',
            expandText: '全文',
            collapseText: '收起'),
      ),
    );
  }
}

本库需要注意的地方

//88行
final link = TextSpan(
      text: _expanded ? '' : '\u2026 ',
      style: effectiveTextStyle,
      children: <TextSpan>[
        TextSpan(
          text: linkText,
          style: effectiveTextStyle.copyWith(
            color: linkColor,
          ),
          recognizer: _tapGestureRecognizer,
        )
      ],
    );
//110行
TextPainter textPainter = TextPainter(
          text: link,
          textAlign: textAlign,
          textDirection: textDirection,
          textScaleFactor: textScaleFactor,
          maxLines: widget.maxLines,
          locale: locale,
        );

这段代码是根据expanded判断是否展开，在没有展开的情况下，会加上省略号然后拼接expandText，然后通过TextPainter来计算link的文字长textPainter.width。
如果我们不展开情况下只想显示2行文字，就如图所示那样，我们就需要对正文进行截掉，截掉的位置就需要计算出正文显示文字的宽度。

//计算正文显示区域的宽度,123行
textPainter.text = text;
textPainter.layout(minWidth: constraints.minWidth, maxWidth: maxWidth);
final textSize = textPainter.size;

然后计算正文不展开的情况下需要截掉的endOffset,可以理解为一个点，这个点就在下图的红点位置。

image.png
红点的位置的y点就是正文不展开情况下的高度textSize.height,x点就是正文的宽度减去link的宽度textSize.width-linkWidth。这样就实现了文字折叠展开的功能了。
喜欢的伙伴可以点个赞。