文章目录
- 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".
我在这里就不演示程序的运行结果了，建议大家自己动手去实践。
4. 内容总结
最后，我们对本章回的内容做一个全面的总结：
- 我们可以通过readMore这个三方包折叠和隐藏长文本；
- 包中提供了ReadMoreText组件，可以用它来代替官方的Text组件；
- 包中的ReadMoreText组件提供了相关的参数来控制自己，用法类似Text组件；
- 我感觉Text组件也可以控制长文本，只是不能折叠和展开文本；
看官们，与"readMore简介"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!
