使用Flexible + IntrinsicWidth

Row(children: [Text('第一个text'),IntrinsicWidth(child: ConstrainedBox(constraints: BoxConstraints(maxWidth: 200), // 最大宽度限制child: Text('中间的text可能很长也可能很短',overflow: TextOverflow.ellipsis,maxLines: 1,),),),Text('第三个text'),],
)

使用LayoutBuilder + 自定义计算

LayoutBuilder(builder: (context, constraints) {final firstText = '第一个text';final middleText = '中间的text可能很长也可能很短';final thirdText = '第三个text';// 计算文本宽度final textPainter = TextPainter(text: TextSpan(text: middleText),textDirection: TextDirection.ltr,);textPainter.layout();final middleTextWidth = textPainter.width;final maxWidth = 200.0;// 使用实际宽度或最大宽度中的较小值final actualWidth = middleTextWidth < maxWidth ? middleTextWidth : maxWidth;return Row(children: [Text(firstText),SizedBox(width: actualWidth,child: Text(middleText,overflow: TextOverflow.ellipsis,maxLines: 1,),),Text(thirdText),],);},
)

使用CustomMultiChildLayout

CustomMultiChildLayout(delegate: _ThreeTextLayoutDelegate(maxWidth: 200),children: [LayoutId(id: 'first',child: Text('第一个text'),),LayoutId(id: 'middle',child: Text('中间的text可能很长也可能很短',overflow: TextOverflow.ellipsis,maxLines: 1,),),LayoutId(id: 'third',child: Text('第三个text'),),],
)class _ThreeTextLayoutDelegate extends MultiChildLayoutDelegate {final double maxWidth;_ThreeTextLayoutDelegate({required this.maxWidth});@overridevoid performLayout(Size size) {// 获取第一个text的尺寸final firstSize = layoutChild('first', BoxConstraints.loose(size));// 获取第三个text的尺寸final thirdSize = layoutChild('third', BoxConstraints.loose(size));// 计算中间text可用的最大宽度final availableWidth = size.width - firstSize.width - thirdSize.width;// 计算中间text的实际宽度(不超过maxWidth)final middleConstraints = BoxConstraints(maxWidth: availableWidth.clamp(0, maxWidth),minWidth: 0,);final middleSize = layoutChild('middle', middleConstraints);// 布局positionChild('first', Offset.zero);positionChild('middle', Offset(firstSize.width, 0));positionChild('third', Offset(firstSize.width + middleSize.width, 0));}@overridebool shouldRelayout(covariant MultiChildLayoutDelegate oldDelegate) => false;
}

使用StatefulWidget + 动态计算

class AdaptiveTextRow extends StatefulWidget {final String firstText;final String middleText;final String thirdText;final double maxMiddleWidth;const AdaptiveTextRow({super.key,required this.firstText,required this.middleText,required this.thirdText,this.maxMiddleWidth = 200,});@overrideState<AdaptiveTextRow> createState() => _AdaptiveTextRowState();
}class _AdaptiveTextRowState extends State<AdaptiveTextRow> {double? middleTextWidth;@overridevoid initState() {super.initState();WidgetsBinding.instance.addPostFrameCallback((_) {_calculateMiddleTextWidth();});}void _calculateMiddleTextWidth() {final textPainter = TextPainter(text: TextSpan(text: widget.middleText),textDirection: TextDirection.ltr,);textPainter.layout();setState(() {middleTextWidth = textPainter.width;});}@overrideWidget build(BuildContext context) {if (middleTextWidth == null) {return Row(children: [Text(widget.firstText),Flexible(child: Text(widget.middleText,overflow: TextOverflow.ellipsis,maxLines: 1,),),Text(widget.thirdText),],);}final actualWidth = middleTextWidth! < widget.maxMiddleWidth ? middleTextWidth! : widget.maxMiddleWidth;return Row(children: [Text(widget.firstText),SizedBox(width: actualWidth,child: Text(widget.middleText,overflow: TextOverflow.ellipsis,maxLines: 1,),),Text(widget.thirdText),],);}
}// 使用方式
AdaptiveTextRow(firstText: '第一个text',middleText: '中间的text可能很长也可能很短',thirdText: '第三个text',maxMiddleWidth: 200,
)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/web/95654.shtml
繁体地址,请注明出处:http://hk.pswp.cn/web/95654.shtml
英文地址,请注明出处:http://en.pswp.cn/web/95654.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TDengine 时间函数 DAYOFWEEK 用户手册

DAYOFWEEK 函数使用手册 函数描述 DAYOFWEEK 函数用于返回指定日期是一周中的第几天。该函数遵循标准的星期编号约定&#xff0c;返回值范围为 1-7&#xff0c;其中&#xff1a; 1 星期日 (Sunday)2 星期一 (Monday)3 星期二 (Tuesday)4 星期三 (Wednesday)5 星期四 (T…

【STM32】贪吃蛇 [阶段 3] 增强模块结构(架构优化)

这篇博客是 承接&#xff1a;【项目思维】贪吃蛇&#xff08;嵌入式进阶方向&#xff09;中 聚焦于 &#x1f9f1; 阶段 3&#xff1a;增强模块结构&#xff08;架构优化&#xff09; 中的 菜单系统&#xff08;Menu System&#xff09;&#xff0c;这部分的结构优化可以学到的…

江协科技STM32学习笔记补充之004

STM32 ISP 一键下载电路&#xff08;按功能、逻辑与时序拆解&#xff09;

数据库小册(1)

1. 关系型数据库主要考点关系型数据库&#xff1a;架构索引锁语法理论规范2. 如何设计一个关系型数据库设计即模块划分。数据库最主要的功能是存储我们的数据&#xff0c;所以需要一个存储的文件系统。我们要把涉及到的物流数据提供逻辑的形式给组织和表示出来&#xff0c;这是…

记录收入最高的一次私活 选号网,需要大量卖号的人可能需要,比如游戏脚本批量跑的号

选号网管理后台(上传游戏信息、账号信息、 查看记录) http://124.223.214.5:180/admin1 选号网客户端(PC/H5页面 给客户筛选商品用) http://124.223.214.5:181/ 该在线地址仅供低频率测试&#xff0c;正式使用需要另外部署。 功能不满足可以联系开发者定制 一、项目的由来 …

热烈庆祝“中国抗战胜利80周年”,织信低代码助力国之重器砥砺前行!

“从保家卫国到科技强军&#xff0c;织信低代码平台为军工企业数字化转型注入新动能。”80年后的今天&#xff0c;国人记忆从未褪色。2025年9月3日&#xff0c;正值中国抗战胜利80周年阅兵之际&#xff0c;我国国防军工力量在经历长期的艰苦奋斗后&#xff0c;现今终于迎来了曙…

PostgreSQL与SQL Server:B树索引差异及去重的优势

PostgreSQL与SQL Server&#xff1a;B树索引差异及去重的优势 在优化查询性能方面&#xff0c;索引是数据库工程师可使用的最强大工具之一。PostgreSQL和Microsoft SQL Server&#xff08;或Azure SQL&#xff09;都将B树索引用作其默认索引结构&#xff0c;但每个系统实现、维…

【微实验】使用MATLAB制作一张赛博古琴?

当一个理工音乐人没钱去买古琴&#xff0c;我直接用代码画一个古琴&#xff01;目录 零、总脚本&#xff1a; 一、核心功能&#xff1a;交互模块拆解 二、核心价值 一、初始化脚本&#xff1a;参数配置与启动界面 ①废话不说&#xff0c;直接上代码 ②代码模块拆解与详细解…

毕业项目推荐:67-基于yolov8/yolov5/yolo11的大棚黄瓜检测识别系统(Python+卷积神经网络)

文章目录 项目介绍大全&#xff08;可点击查看&#xff0c;不定时更新中&#xff09;概要一、整体资源介绍技术要点功能展示&#xff1a;功能1 支持单张图片识别功能2 支持遍历文件夹识别功能3 支持识别视频文件功能4 支持摄像头识别功能5 支持结果文件导出&#xff08;xls格式…

无人机小尺寸RFSOC ZU47DR板卡

整板尺寸&#xff1a;120*120mmFPGA: XCZU47DR-2FFVE1156I;DDR&#xff1a;PS侧8GB 2400Mhz*64bit / PL侧 4GB 2400Mhz*32bit&#xff1b;2路(QSP0QSPI1)/单片512Mb、共计1Gb&#xff1b;千兆以太网&#xff1a;1路&#xff08;PS侧&#xff09;&#xff1b;主要接口资源如下&a…

LangGraph(一):入门从0到1(零基础)

文章目录LangGraph入门从0到10️⃣ 安装 & 确认环境1️⃣ 把 LangGraph 想象成「自动化的做菜流水线」2️⃣ 最小可运行例子&#xff1a;一句话复读机3️⃣ 加一个小节点&#xff1a;把用户输入变大写4️⃣ 条件边&#xff1a;如果用户说 quit 就结束&#xff0c;否则复读5…

学习数据结构(16)快速排序

快速排序的基本思想&#xff1a;快速排序是Hoare于1962年提出的一种二叉树结构的交换排序方法&#xff0c;其基本思想为&#xff1a;任取待排序元素序列中的某元素作为基准值&#xff0c;按照该基准值将待排序集合分割成两子序列&#xff0c;左子序列中所有元素均小于基准值&am…

uni-app iOS 上架常见问题与解决方案,实战经验全解析

uni-app 让开发者能够“一套代码&#xff0c;多端运行”&#xff0c;极大降低了开发成本。 但当应用进入 iOS 上架阶段 时&#xff0c;不少团队发现流程并没有想象中那么顺利&#xff1a;证书问题、打包失败、上传出错、审核被拒……这些都可能让项目卡壳。 本文结合实际案例&a…

洗衣机的智能升级集成方案WT2606B屏幕驱动+AI语音控制

2025&#xff0c;洗衣机市场正从功能满足转向体验升级&#xff0c;企业正面临哪些转型难点?一文为您解读洗衣机行业智能化升级之路。传统洗衣机就像是一个"沉默的工人"&#xff0c;只能通过简单的LED指示灯告诉你它在工作&#xff0c;却无法让你真正了解它在干嘛。用…

机器学习进阶,梯度提升机(GBM)与XGBoost

梯度提升机&#xff08;Gradient Boosting Machine, GBM&#xff09;&#xff0c;特别是其现代高效实现——XGBoost。这是继随机森林后自然进阶的方向&#xff0c;也是当前结构化数据竞赛和工业界应用中最强大、最受欢迎的算法之一。为什么推荐XGBoost&#xff1f; 与随机森林互…

【ARMv7】开篇:掌握ARMv7架构Soc开发技能

本专栏&#xff0c;开始与大家共同总结使用ARMv7系列CPU的Soc开发技能。大概汇总了一下&#xff0c;后面再逐步完善下面的思维导图。简单说说&#xff1a;与通用的ARMv7-A/R相比&#xff0c;以STM32F为代表的ARMv7-M架构有以下关键区别和重点&#xff1a;无MMU&#xff0c;有MP…

【学术会议论文投稿】JavaScript在数据可视化领域的探索与实践

【ACM出版 | EI快检索 | 高录用】2024年智能医疗与可穿戴智能设备国际学术会议&#xff08;SHWID 2024&#xff09;_艾思科蓝_学术一站式服务平台 更多学术会议请看 学术会议-学术交流征稿-学术会议在线-艾思科蓝 目录 引言 JavaScript可视化库概览 D3.js基础入门 1. 引入…

CSS基础学习步骤

好的&#xff0c;这是一份为零基础初学者量身定制的 **CSS 学习基础详细步骤**。我们将从最根本的概念开始&#xff0c;通过一步一步的实践&#xff0c;带你稳稳地入门。 第一步&#xff1a;建立核心认知 - CSS 是做什么的&#xff1f; 1. 理解角色&#xff1a; HTML&…

MTK Linux DRM分析(三十七)- MTK phy-mtk-hdmi.c 和 phy-mtk-hdmi-mt8173.c

一、简介 HDMI PHY驱动 HDMI 的物理层接口主要就是 HDMI Type-A 接口(19 pin),除此之外还有 Type-B、Type-C(Mini HDMI)、Type-D(Micro HDMI)、Type-E(车载专用)。 1. HDMI Type-A(常见 19-pin 标准接口) HDMI Type-A Connector Pinout ========================…

【人工智能学习之MMdeploy部署踩坑总结】

【人工智能学习之MMdeploy部署踩坑总结】报错1&#xff1a;TRTNet: device must be a GPU!报错2&#xff1a;Failed to create Net backend: tensorrt报错3&#xff1a;Failed to load library libonnxruntime_providers_shared.so1. 确认库文件是否存在2. 重新安装 ONNX Runti…