You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在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

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.26 00:45:25