显示更多组件

我们在上一章回中介绍了"关于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简介"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!