如何在Expanded组件包裹的Text组件后添加图标?
问题描述
- 文本内容较短时,arrow_right图标可正常紧跟在Text组件之后
- 需求:无论文本是否溢出,arrow_right图标都要紧贴Text组件末尾
- 问题点:为处理文本溢出用Expanded包裹Text后,图标被挤到容器最右侧,无法紧贴文本
解决方案
使用Flexible替代Expanded包裹Text组件,配合Text的溢出处理属性,即可实现图标紧跟文本末尾的效果:
Row( children: [ Flexible( child: Text( "需要展示的文本内容", overflow: TextOverflow.ellipsis, maxLines: 1, ), ), Icon(Icons.arrow_right), ], )
原理:Flexible会让Text组件占用剩余可用空间,但不会强制撑满整个Row的宽度,因此图标会自然紧跟在Text的末尾;当文本过长时,overflow和maxLines属性会处理溢出问题,同时保持图标位置不变。
内容的提问来源于stack exchange,提问作者chdo
相关产品推荐
相关产品推荐

