第四百六十二回

文章目录

1. 概念介绍
2. 实现方法
3. 示例代码
4. 内容总结

我们在上一章回中介绍了"关于MediaQuery的优化"相关的内容，本章回中将介绍readMore这个三方包.闲话休提，让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在本章回中介绍的readMore是一个三方包，它主要用来折叠和展开长文本，比如文本太长时，超过了设置的行数，它会把文本中超过行数的文本折叠起来，同时显示
配置好的缩略语，比如More;点击More就会显示完整的文本内容。点击文本内容最后的位置就会折叠超过行数的文本。这个功能在显示一些超级长的文本时十分有用，我
们将在本章回中详细介绍如何通过readMore这个三方包来实现这个功能。

2. 实现方法

包中提供了ReadMoreText组件来实现折叠和展开长文本的功能，该组件提供了相关的属性来控制自己，详细如下：

trimLines属性：表示显示文本的行数；
trimMode属性：需要将它设置为TrimMode.Line，否则不会折叠长文本；
trimCollapsedText属性：长文本被折叠后显示的内容，比如More;
colorClickableText属性:长文本被折叠后显示内容的颜色；

3. 示例代码

ReadMoreText("Flutter is Google's mobile UI open source framework to build high-quality native(super fast) interfaces for IOS and Android Apps with the unified codebase",trimLines: 2,///切换成length后不会省略内容trimMode: TrimMode.Line,colorClickableText: Colors.pink,trimCollapsedText: "Show more",trimExpandedText: "Show Less",moreStyle: TextStyle(color: Colors.purpleAccent),///在正常文本前面显示的内容preDataText: "AMANDA",
),

上面的示例代码演示了ReadMoreText组件的用法，代码中添加了注释，这样有助于大家理解代码。代码中的文本比较长，超过两行的文本将会被折叠，同时显示粉红色
的"Show more"，点击该文字时该文字会消失，同时会显示被折叠的文本。在文本末尾空白处点击时超过两行的文本会被折叠起来，同时显示粉红色的"Show more".
我在这里就不演示程序的运行结果了，建议大家自己动手去实践。