首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在结尾处显示更多的文本来代替TextOverflow.ellipsis inFlutter?

在Flutter中,可以使用Text组件来显示文本。默认情况下,如果文本内容超出了可显示的区域,Flutter会自动将超出部分用省略号(...)表示,这就是TextOverflow.ellipsis的效果。

如果你想在结尾处显示更多的文本而不是省略号,可以使用RichText组件来实现。RichText允许你自定义文本的样式,并且可以根据需要添加更多的文本。

以下是一个示例代码,演示如何在结尾处显示更多的文本:

代码语言:txt
复制
import 'package:flutter/material.dart';

class ExpandableText extends StatefulWidget {
  final String text;
  final int maxLines;

  ExpandableText({required this.text, required this.maxLines});

  @override
  _ExpandableTextState createState() => _ExpandableTextState();
}

class _ExpandableTextState extends State<ExpandableText> {
  bool isExpanded = false;

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        final textSpan = TextSpan(
          text: widget.text,
          style: DefaultTextStyle.of(context).style,
        );

        final textPainter = TextPainter(
          text: textSpan,
          maxLines: widget.maxLines,
          textDirection: TextDirection.ltr,
        );
        textPainter.layout(maxWidth: constraints.maxWidth);

        if (textPainter.didExceedMaxLines) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              RichText(
                text: TextSpan(
                  text: isExpanded ? widget.text : widget.text.substring(0, textPainter.getPositionForOffset(Offset(constraints.maxWidth, constraints.maxHeight)).offset),
                  style: DefaultTextStyle.of(context).style,
                ),
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    isExpanded = !isExpanded;
                  });
                },
                child: Text(
                  isExpanded ? '收起' : '展开',
                  style: TextStyle(
                    color: Colors.blue,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ],
          );
        } else {
          return Text(widget.text);
        }
      },
    );
  }
}

在上面的代码中,我们创建了一个名为ExpandableText的自定义组件。它接受两个参数:text表示要显示的文本内容,maxLines表示最大显示行数。

build方法中,我们使用LayoutBuilder来获取父容器的约束条件。然后,我们使用TextPainter来测量文本的大小,并判断是否超出了最大行数。如果超出了最大行数,我们就使用RichText来显示部分文本,并在结尾处添加一个GestureDetector,用于切换展开和收起状态。如果没有超出最大行数,我们直接使用Text组件显示全部文本。

使用示例:

代码语言:txt
复制
ExpandableText(
  text: '这是一段很长的文本...',
  maxLines: 2,
)

这样就可以在结尾处显示更多的文本来代替TextOverflow.ellipsis了。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

构建实用的Flutter文件列表:从简到繁的完美演进

希望通过本文,读者可以了解到构建文件列表的基本原理和方法,以及如何在自己的应用中应用这些技术,提升用户体验,提高工作效率。...通过以上步骤,我们已经成功创建了一个简易的文件列表页面。但是列式文件列表更适合屏幕更长的移动端,对于屏幕更宽的桌面端,大多数网盘使用的更多的是网格布局来展示更多的文件内容。...均匀布局 目前我们的文件列表是按照固定数量的文件数来显示的,但是在不同设备上,可能会出现文件块大小不一致的情况,导致布局不够美观。...通过设置overflow为TextOverflow.ellipsis,可以让文本在超出一定长度后自动截断,并显示省略号。...调整文件块大小 除了文本截断之外,我们还可以通过调整文件块的大小来确保文件名的可见性。如果文件名过长,可以增加文件块的宽度,以容纳更多的文本内容。

26612
  • Flutter 即学即用系列博客——05 StatelessWidget vs StatefulWidget

    , style: TextStyle(fontWeight: FontWeight.bold), ); } } 可以看到我们这个 Widget 应该会显示成上篇我们界面所见的粗体文本...具体更多构造函数写法可以查看 dart 官网? https://www.dartlang.org/guides/language/language-tour#constructors ? 2....tooltip 是长按之后会显示的提示文字。 child 是这个按钮显示的图标。...StatelessWidget vs StatefulWidget 好了,上面讲解完了 StatelessWidget 和 StatefulWidget,相信大家应该知道如何自定义一个 Widget 了,也知道如何在其他页面引入了...更多阅读: Flutter 即学即用系列博客——01 环境搭建 Flutter 即学即用系列博客——02 一个纯 Flutter Demo 说明 Flutter 即学即用系列博客——03 在旧有项目引入

    99030

    WordPress 创建简码-建立自定义短码显示文字及图片

    WordPress shortcode 在网页设计时是非常弹性的功能,当需要在特定位置加入想要呈现的内容,却受限于网站主题框架无法以内建编辑器或区块小工具完成时,就可以选择自行创建shortcode 函式定义想要显示的内容...函数 第一步:在下方的函式中,dh_first_shortcode 是可以自定义的名称,但要注意如果有更改,函式结尾处的add_shortcode 内容也必须要替换成一样的名称。...(){ //在這裡放任何圖文 echo 'shortcode教学'; echo '本来的函式中,我们只单纯输出文字,因此在外观上不会套用网站主题既有的CSS 样式表,此时只需要为文字加入HTML 标签以及CSS 类名称,以下图为例,设定文字为h2 就会套用网站中对h2 既有的样式...,shortcode 看起来就会像[dcat cat=”cat_id”],只要输入文章分类id ,就能只显示特定分类的文章,这是属于比较进阶的写法,之后鹄学苑也会陆续分享喔!

    1.3K30

    鸿蒙-元服务-坚果派-第四章 基础控件

    初心目标:持续输出,为技术人创造更多的价值。 第四章 基础控件 1、创建文本(Text) Text是文本组件,通常用于展示用户视图,如显示文章的文字。...resources/base/element/string.json】 Text($r('app.string.module_desc')) 添加子组件 Span只能作为Text和RichEditor组件的子组件显示文本内容...可以在一个Text内添加多个Span来显示一段信息,会取消Text显示文字。...Text("1").fontSize(14).fontColor(Color.Red).margin({ left: 10, right: 10 }) Text("河北文旅杀疯了...Popup 用于为指定的组件做信息提示。如点击一个问号图标弹出一段气泡提示。 Menu/ContextMenu 用于给指定的组件绑定用户可执行的操作,如长按图标展示操作选项等。

    4600

    linux(五)之vi编译器

    vi file1 如果file1文件不存在,将建立此文件;如该文件存在,则将其拷贝到一个临时缓冲区。光标定位在该缓冲区第1行第1列的位置上。  ...vi +N file1(N:为数字) 如果file1文件不存在,将建立此文件;如该文件存在,则将其拷贝到一个临时缓冲区。光标定位在文件第N行第1列的位置上。...vi +/string file1 如果file1文件不存在将建立此文件;如该文件存在则将其拷贝到一个临时缓冲区。光标定位在文件中第一次出现字符串string的行首位置。  ...$(即Shift+4):移动到当前行的结尾处 H(大写):使光标移动到屏幕的顶部 M(大写):使光标移动到屏幕的中间 L(大写):使光标移动到屏幕的底部 Ctrl+b:上滚一屏。.../gc(需按两次回车)  3.8、设置vi 显示行号:set number(nu) 取消行号显示:set nonumber(nonu) 设置文件只读:set readonly 更多关于vi编辑器的内容

    3.1K80

    Flutter中 Text 与 Container 组件

    ; (1). clip 裁剪; (2). fade 渐隐; (3). ellipsis 省略号; 4. textScaleFactor:字体显示倍率; 5. maxLines:文字显示最大行数; 6..... normal 正常体; (7). fontSize 文字大小; (8). color 文字颜色; (9). fontWeight 字体粗细; A. bold 粗体; B. normal 正常体; 更多参数参考...(3). borderRadius: 倒圆色,值如:BorderRadius.all( Radius.circular(8.0) ); 3. margin 表示Container 与外部其他组件的距离...,值如:EdgeInsets.all(20.0); 4. padding 表示Container 边缘与 Child 之间的距离,值如:EdgeInsets.all(10.0); 5. transform...让Container进行一些旋转与平移之类的操作,值如:Matrix4.rotationZ(0.2); 6. height 容器高度; 7. width 容器宽度; 8. child 容器子元素; 3

    3.6K20

    vim命令搜索_linux的vim

    例如,如果你想要搜索的单词是 linux,下图显示的就是在 Vim 窗口底部的搜索命令: 敲击回车键之后,你会看到 Vim 会将光标停留在从光标在插入模式中的位置开始,找到的包含此单词的第一行。...同时,值得注意的是不管在什么时候,你都可以输入 ggn 来跳转到第一个匹配处,或者 GN 来跳转到最后一处。 当你恰好在文件的底部,而且想要逆向搜索的情况下,使用 ? 代替 / 来开始搜索。...如下图是一个列表结果如何在 Vim 窗口底部被分组和显示的例子: 接下来,你可能已经得知,Vim 默认是环形搜索的,意味着在到达文件结尾处(或者被搜索单词的最后一处匹配)时,如果继续按 “搜索下一个”...如果想要获得更多小技巧(包括如何使用鼠标来使在 Vim 中的操作变得简单),请前往 Vim 官方文档。 结语 当然,没有人希望你死记硬背这里提到的所有小技巧。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    10.2K20

    第三章:Shiro的配置——深入浅出学Shiro细粒度权限开发框架

    这使得Shiro几乎能使用任何配置格式,如regular Java,XML(Spring, JBoss, Guice,等等),YAML,JSON,Groovy Builder markup,以及更多的配置...默认是Base64 是因为Base64 编码只需较少的文本来表示值——它拥有一个较大的编码表,意味着你的token 都是较短的。...默认情况下,密码字符串是16 进制编码,但可以使用Base64 编码代替16进制编码来配置。   一旦你指定了文本密码散列值,你得告诉Shiro 这些都是加密的。...因此,除了授予用户“printer:print”和“printer:query”权限外,你可以简单地授予他们一个   printer:print, query 3:还可以用*号代替所有的值,如:printer...printer:*:* 但是请记住:只能从字符串的结尾处省略部件,也就是说 printer:lp7200  并不等价于 printer:*:lp7200

    71180

    第三章:Shiro的配置——深入浅出学Shiro细粒度权限开发框架

    这使得Shiro几乎能使用任何配置格式,如regular Java,XML(Spring, JBoss, Guice,等等),YAML,JSON,Groovy Builder markup,以及更多的配置...默认是Base64 是因为Base64 编码只需较少的文本来表示值——它拥有一个较大的编码表,意味着你的token 都是较短的。如: ?...默认情况下,密码字符串是16 进制编码,但可以使用Base64 编码代替16进制编码来配置。   一旦你指定了文本密码散列值,你得告诉Shiro 这些都是加密的。...因此,除了授予用户“printer:print”和“printer:query”权限外,你可以简单地授予他们一个   printer:print, query 3:还可以用*号代替所有的值,如:printer...printer:*:* 但是请记住:只能从字符串的结尾处省略部件,也就是说 printer:lp7200  并不等价于 printer:*:lp7200

    78470

    编程能力超GPT-4,羊驼代码版“超大杯”来了,小扎还亲自剧透Llama3

    其中击败GPT-4的是Instruct版本,它取得了67.8分的pass@1成绩,胜过了GPT-4的67分。 与34B模型相比,基础版和Instruct版的成绩分别提高了8.6%和63.4%。...这意味着,除了生成更长的代码,Code Llama还可以从用户的自定义代码库读取更多内容,将其传递到模型中。...而小扎的这则帖文,也被细心的网友发现了玄机。 Llama 3要来了? 等一下……他说的是……Llama……3? 的确,在帖文的结尾处,小扎说希望这些成果能够应用到Llama 3当中。...如果将其他显卡也折算成H100,Meta总计将拥有等效于60万块H100的算力。 不过小扎透露的消息似乎没有满足网友的好奇心,关于Llama 3究竟何时能上线的讨论也不绝于耳。...也有人质疑这种想法是过度乐观,4090能带动的量化程度可能并不适用于这款模型。 但如果愿意用运算速度换取显存空间,用两块3090来代替也未尝不可。

    28510

    前端中台化,把格局做大:Node.js与测试服务探索

    但同时一定有工程师不禁要质疑——Node.js真的已经开辟天地,占据架构体系的一席之地了吗?听说Node.js在国外早已如火如荼,国内现在到底是个什么状态?...但当争议和浮华褪去,技术的落地:就让上帝的归上帝,撒旦的归撒旦。那么,究竟应该如何在公司业务中落地Node.js呢?本篇我们就来共同探讨。...端到端测试有着肉眼可见的优势,比如,项目经过不断的开发最终肯定会趋于稳定,在适当的时机引入端到端测试能及早发现问题,进而保证产品的质量。这种让软件代替人工,实施快速、反复测试的方案,收益非常明显。...具体来说,相当多的团队会将端到端测试放到本地执行,和项目代码强耦合。比如,本地通过npm script脚本来实施端到端测试。...(扫码了解本书详情) 如果喜欢本文 欢迎 在看丨留言丨分享至朋友圈 三连 热文推荐  小白数据分析师的快速上手指南 博文视点卓越书单丨Python技术成长加油站 培养一个数据人才需要多少年?

    56520

    雅虎十四条性能优化原则「建议收藏」

    实现部分图片 Combined files :组合多个脚本文件到单一文件,同样的,样式也可以采用类似的方式处理 描述:40-60% 据的日常访问是首次访问,因此为首次访问者加快页面访问速度是用户体验的关键...,所以暂未测试 4 Expires Header 通过使用Expires header, 在客户端缓存更多的脚本文件、样式表、图像文件和 Flash Expires header常用于图像文件,但是它也应该用于脚本文件...根据文件类型来决定是否压缩: 一般HTML、脚本文件、样式表文件等进行压缩 图像文件和 PDF 文件一般不应该被压缩,因为它 们本来就是压缩格式保存的 6 把样式表放在头部 浏览器会阻塞显示直到样式表下载完毕...CSS 表达式是功能强大的(同时也是危险的)用于动态设置CSS属性的方式 直接以明确的数值来写,不写表达式 如果必须动态设置的话,可使用事件处理函数代替 9 把JavaScript和CSS放到外部文件中...icon字体图标 尽量用css3代替, 比如说要实现修饰效果,如半透明、边框、圆角、阴影、渐变等 优化图片格式为常用格式 精灵图 用CSS或JavaScript实现预加载 在保证最不失真的情况下尽可能压缩图像文件的大小

    1.3K20

    妙用CSS变量,让你的CSS变得更心动

    浏览器原生特性,无需经过任何转译就可直接运行 DOM对象一员,极大便利了CSS与JS之间的联系 认识 本来打算用一半篇幅讲述「CSS变量」的规范和用法,但是网上一搜一大把就感觉没必要了,贴上阮一峰老师写的教程...对于CSS部分的修改,就需要分析哪些属性是随着index递增而发生规律变化的,对规律变化的部分使用「CSS变量」表达式代替即可。...表示Tab当前的索引,当点击按钮时重置--tab-index的值,就可实现不操作DOM来移动的位置显示指定的Tab。...其实可结合鼠标事件来完成更多的酷炫效果,例如动画关联、事件响应等操作。...关注IQ前端 「关注公众号IQ前端,一个专注于CSS/JS开发技巧的前端公众号,更多前端小干货等着你喔」

    94430

    国标设备接入EasyCVR平台通道信息不显示是什么原因?

    EasyCVR视频融合云服务平台的设备接入方式十分广泛,可支持主流标准协议如国标GB28181、RTSP/Onvif、RTMP等,还能支持厂家的私有协议与SDK接入,比如海康Ehome、海康SDK、大华...SDK等(更多SDK与私有协议也在持续拓展中)。?...有用户反馈设备通过国标GB28181接入EasyCVR平台,出现了设备不显示通道信息的情况。我们对此进行了排查。初步猜测可能是用户的设备没有上报通道信息,也可能是上报的信息不是标准的国标协议。?...于是通过抓包数据排查,发现的确是设备上报的通道信息字段不准确,在数据体body的结尾处多了\的分割符,导致程序无法解析。?...添加如下代码,在接入设备上报的通道数据中,过滤掉非法的字符,然后再进行对应的解析。?修改后,设备通道信息已经正常显示了。?

    37020

    Flutter | 常用组件

    :省略号代替 Text( "hello!...,若不指定,图片图片会根据当前父容器的限制,尽可能的显示其原始大小,如果只设置了其中的一个,则另一个则会按比例缩放,但是可通过 fit 属性来适应规则 fit:用于在图片的显示空间和图片本身大小不同的时候指定图片的适应模式...,使用 FadeInImage 之后会在图片的加载过程中显示一个占位符,在图片加载完成之后显示淡入 ICON 在 Flutter 中,可以直接使用 字体图标,它是将图标做成字体文件,然后通过指定不同的字符而现实不同的图片...InputDecoration:用于控制 TextField 的外观显示,如提示文本,背景颜色,边框等 keyboardType :用于设置该输入框的键盘输入类型,取值如下: image.png...obscureText :是否隐藏正在编辑的文本,如输入密码等。

    11.4K30

    Yahoo! 十三条 : 前端网页优化(13+1)条原则

    Combined files通过组合多个脚本文件到单一文件来减少HTTP请求次数,样式表也可采用类似方法处理,这个方法虽然简单,但没有得到大规模的使用。...文件不应该被压缩,因为它们本来就是压缩格式保存的,对它们进行压缩,不但浪费CPU,而且还可能增加文件的大小。...在很多浏览器下,如IE,把样式表放在document的底部的问题在于它禁止了网页内容的顺序显示,浏览器阻止显示以免重画页面元素,那用户只能看到空白页了,Firefox不会阻止显示,但这意味着当样式表下载后...浏览器会阻塞显示直到样式表下载完毕,因此需要把样式表放在HEAD部分,而对于脚本来说,脚本后面内容的顺序显示将被阻塞,因此把脚本尽量放在底部意味着更多内容能被快速显示。   ...一种减少CSS表达式执行次数的方法是一次性表达式,即当第一次执行时就以明确的数值代替表达式,如果必须动态设置的话,可使用事件处理函数代替,如果必须使用CSS表达式的话,请记住它们可能被执行上千次,从而影响页面性能

    1.1K30

    雅虎Yahoo 前段优化 14条军规

    这将增大 HTML 文 件的大小。组合 inline images 到你的(缓存)样式表是既能较少 HTTP 请求, 又能避免加大 HTML 文件大小的方法。...增加 Expires Header 网页内容正变得越来越丰富,这意味着更多的脚本文件、样式表、图像文件和 Flash。...在很多浏览器下,如 IE,把样式表放在 document 的底部的问题在于它禁止了网 页内容的顺序显示。 浏览器阻止显示以免重画页面元素,那用户只能看到空白页 了。...浏览器会阻塞显示直到样式表下载完毕,因此我们需要把样式表放在 HEAD 部分。 而对于脚本来说,脚本后面内容的顺序显示将被阻塞,因此把脚本尽量放在底 部意味着更多内容能被快速显示。...一种减少 CSS 表达式执行次数的方法是一次性表达式,即当第一次执行时就以 明确的数值代替表达式。如果必须动态设置的话,可使用事件处理函数代替。

    1.1K100
    领券