文章目录
- 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简介"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!