flutter text文本展开、收起功能实现

一、功能预览

1. 收起状态

WechatIMG2.png

2. 限制展开后最大显示行数

WechatIMG6.jpeg

3. 最大行数无限制的展开状态

WechatIMGn.jpeg

二、使用

TextLimitDisplay(
    text: desc,
    minLines: 2, // 收起状态下最大展示行数
    maxLines: 6, // 展开后最大展示行数限制
    textStyle: TextStyle(
        fontWeight: FontWeight.w600,
        fontSize: 20,
    ),
)

三、实现原理

使用 TextPainter 对文字宽度进行计算后,从原文本中截取出部分文本,然后使用富文本Text.rich拼接上结尾的展开/收起按钮

四、完整代码链接

完整代码码云链接

五、写在结尾

命名比较随意...

你可能感兴趣的:(flutter text文本展开、收起功能实现)