Flutter 中如何为 Wrap 组件内超出2行的内容添加省略号效果

核心说明 #

Flutter原生Wrap组件本身不支持超出指定行数后自动追加省略标识的能力，要实现你需要的两行后显示省略的效果，可以选择以下两种方案：

方案1：使用第三方依赖（推荐，实现简单） #

使用专门适配该场景的wrap_with_overflow包即可快速实现：

1. 先在pubspec.yaml中添加依赖：

dependencies:
  wrap_with_overflow: ^最新版本号

2. 替换你原来的Wrap代码即可，示例如下：

WrapWithOverflow(
  maxLines: 2,
  spacing: -1,
  overflowWidget: Chip(
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
    materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
    backgroundColor: Colors.transparent,
    shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
        side: BorderSide(
          color: lightFonts60,
          width: 1,
        )),
    label: Text('...',
      style: TextStyle(
        color: lightFonts60,
        fontSize: text12,
        fontFamily: KOREAN,
        fontWeight: semiBold,
      ),),
  ),
  children: hashTagList
      .map((element) => Container(
    padding: EdgeInsets.only(top:8,right:4),
    child: Chip(
      padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      backgroundColor: Colors.transparent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(12),
          side: BorderSide(
            color: lightFonts60,
            width: 1,
          )),
      label: Text('#'+element,
        style: TextStyle(
          color: lightFonts60,
          fontSize: text12,
          fontFamily: KOREAN,
          fontWeight: semiBold,
        ),),
    ),
  )).toList(),
)

方案2：自定义实现（不引入第三方依赖） #

如果不想引入额外依赖，可以自己提前计算所有标签的宽度，结合父容器宽度统计两行可容纳的标签总数，超出的部分截断后手动追加省略标识的Chip即可，实现逻辑如下：

• 先通过TextPainter计算每个标签文本加内边距后的总宽度
• 结合父容器的最大宽度，累加计算前两行能放下的标签数量
• 若标签总数超过可容纳数量，取前N个标签，最后追加一个显示...的Chip即可

内容的提问来源于stack exchange，提问作者aimyon