美文网首页
flutter text文本展开、收起功能实现

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

作者: 不过从心而已 | 来源:发表于2020-10-18 10:33 被阅读0次

    一、功能预览

    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文本展开、收起功能实现

          本文链接:https://www.haomeiwen.com/subject/yenqmktx.html