广州响应式网站制作,查询域名是否备案?,网页设计与制作100例图片,免费的行情软件网站下载入口文章目录 1. 概念介绍2. 实现方法3. 示例代码4. 内容总结 我们在上一章回中介绍了关于MediaQuery的优化相关的内容#xff0c;本章回中将介绍readMore这个三方包.闲话休提#xff0c;让我们一起Talk Flutter吧。 1. 概念介绍
我们在本章回中介绍的readMore是一个… 文章目录 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 Googles 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简介相关的内容就介绍到这里欢迎大家在评论区交流与讨论!
