首页
学习
活动
专区
工具
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,可以让文本在超出一定长度后自动截断,并显示省略号。...调整文件块大小 除了文本截断之外,我们还可以通过调整文件块大小来确保文件名可见性。如果文件名过长,可以增加文件块宽度,以容纳更多文本内容。

22412
  • 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 在旧有项目引入

    97330

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

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

    1.3K30

    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编辑器内容

    3K80

    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命令搜索_linuxvim

    例如,如果你想要搜索单词是 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

    70480

    第三章: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

    76970

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

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

    54620

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

    实现部分图片 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

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

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

    26710

    Flutter | 常用组件

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

    11.4K30

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

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

    35120

    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

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

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

    93530
    领券