首页 > 其他分享 >显示更多组件

显示更多组件

时间:2024-05-23 22:30:50浏览次数:14  
标签:显示 readMore 折叠 ReadMoreText 内容 组件 文本

文章目录


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

标签:显示,readMore,折叠,ReadMoreText,内容,组件,文本
From: https://blog.csdn.net/talk_8/article/details/139159035

相关文章

  • 定时器组件设计方案
    层级时间轮实现高性能定时器此篇介绍时间轮,它的时间复杂度是最优的,插入、查找(最小)、删除都是O(1),很恐怖的性能这里示例一个三层时间轮,模拟时钟表盘的运作方式,便于理解且性能不低设计思路:1.根据定时任务的超时时间,按超时时间范围存入不同的链表中,处于同一个链表的任务的超......
  • netcore webapi部署到docker容器,api调用后显示中文乱码
    vs2022webapi部署到docker容器,api调用后显示中文乱码。原因是:源代码文件不是utf-8编码(用vscode打开是乱码,在vscode修改后,再提交,正常)解决方法:在中文环境下用过微软家Visualstudio的都知道,新建文件的保存编码都默认为当前系统语言,所以你的文件编码永远都是GB2312,非常令人蛋......
  • Flutter笔记:Widgets Easier组件库-使用隐私守卫
    Flutter笔记WidgetsEasier组件库:使用隐私守卫-文章信息-Author:李俊才(jcLee95)VisitmeatCSDN:https://jclee95.blog.csdn.netMyWebSite:http://thispage.tech/Email:[email protected]:https://blog.csdn.net......
  • vue3 设置 表单或者页面 懒加载 (或者组件的异步加载)
    用到的工具库  vueUse和useIntersectionObserver1.UseIntersectionObserver函数参数:observerList:由被观察目标所组成的数组,数组项是由React.createRef构建出来的对象callback:当目标元素被曝光所需要触发的函数,该函数接受一个参数indexList,由被曝光元素在observerList......
  • uni-app 样式穿透修改第三方组件 不生效
    问题描述:在uni-app+vue3+less项目中,修改第三方组件的样式使用/deep/ 或者!important都不管用 解决办法: 问题原因:如果你使用的是css,没有使用css预处理器,则可以使用>>>,/deep/,::v-deep。如果你使用的是less或者node-sass,那么可以使用/deep/,::v-deep都可以生效。如果......
  • 百问网,T113 usb摄像头使用cpu解码显示
    1资料下载https://download.100ask.net/boards/Allwinner/T113/index.html2软件安装资料下载完毕后,根据说明,安装vmware,安装win驱动3配置开发环境为了方便,建议将sdk文件上传到目录/home/book/安装必要的工具包,如果出现问题Couldnotgetlock/var/lib/dpkg/lock-......
  • uniapp实现左滑显示编辑删除按钮
     【使用时可删除不必要的内容,我就是记录一下】方法一:详细借鉴(app):http://www.aliyue.net/10130.html方法二:详细借鉴(微信小程序):https://blog.csdn.net/weixin_41579185/article/details/117747252?spm=1001.2101.3001.6650.2&utm_medium=distribute.pc_relevant.none-task-blog-......
  • NPOI创建word文档,使用unicode写入打勾的小方框,word2021显示异常问题解决
    word2019查看NPOI创建的word中打勾方框,显示正常,但是word2021显示就变成下面这个样子了,应该是word2021对这个特殊字符的渲染导致的 想要普通的效果,白色背景黑边黑勾的效果,换一个字体可以解决 c# 代码XWPFDocumentdocument=newXWPFDocument();XWPFParagraphparagrap......
  • Java如何显示不同字体的文字?
    Java如何显示不同字体的文字?在Java的GUI编程中,如何显示不同字体的文字?以下示例演示如何使用Font类的setFont()方法显示不同字体的文本。packagecom.yiibai;importjava.awt.*;importjava.awt.event.*;importjavax.swing.*;publicclassDisplayTextFontextendsJPane......
  • vant组件库按需加载
    使用 unplugin-vue-components 插件,它可以自动引入组件,并按需引入组件的样式1、安装插件npmiunplugin-vue-components-D2、vite.config.js 文件中配置插件import{fileURLToPath,URL}from'node:url'import{defineConfig}from'vite'importvuefrom'@vit......