作者：高红朋（小雨下雨的雨）
仓库地址：https://gitcode.com/feng8403000/FlutterfromBeginnertoAdvancedForHarmonyOS.git
联系邮箱：372699828@qq.com

概述

在Flutter中，当文本内容超出容器的显示范围时，需要对溢出部分进行处理。Text组件提供了多种溢出处理方式，包括裁剪、省略号、渐变淡出等。掌握文本溢出处理对于创建美观的UI界面至关重要。

基础用法

设置溢出处理

Text(
  "这是一段很长很长的文本内容，当超出显示区域时需要进行溢出处理。",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

默认行为

当不设置overflow属性时，文本默认会溢出显示区域。

Text(
  "这是一段很长很长的文本内容，默认会超出显示区域。",
  maxLines: 1,
);

overflow属性详解

TextOverflow.clip

clip模式会直接裁剪溢出的文本。

Text(
  "这是一段很长很长的文本内容，clip模式会直接裁剪。",
  maxLines: 1,
  overflow: TextOverflow.clip,
);

TextOverflow.fade

fade模式会在文本末尾添加渐变淡出效果。

Text(
  "这是一段很长很长的文本内容，fade模式会渐变淡出。",
  maxLines: 1,
  overflow: TextOverflow.fade,
);

TextOverflow.ellipsis

ellipsis模式会在文本末尾显示省略号。

Text(
  "这是一段很长很长的文本内容，ellipsis模式会显示省略号。",
  maxLines: 1,
  overflow: TextOverflow.ellipsis,
);

TextOverflow.visible

visible模式会让文本超出可见区域显示。

Text(
  "这是一段很长很长的文本内容，visible模式会超出显示区域。",
  maxLines: 1,
  overflow: TextOverflow.visible,
);

maxLines属性

限制显示行数

Text(
  "这是一段很长很长的文本内容，限制最多显示两行。",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
);

不限制行数

当maxLines为null时，文本会自动换行显示所有内容。

Text(
  "这是一段很长很长的文本内容，不限制显示行数。",
);

softWrap属性

自动换行

Text(
  "这是一段很长很长的文本内容，softWrap为true时会自动换行。",
  softWrap: true,
);

禁止换行

Text(
  "这是一段很长很长的文本内容，softWrap为false时不会换行。",
  softWrap: false,
);

实际应用示例

单行文本溢出

Container(
  width: 200,
  child: const Text(
    "这是一段很长的文本内容，超出部分显示省略号。",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
);

多行文本溢出

Container(
  width: 200,
  child: const Text(
    "这是一段很长很长的文本内容，限制最多显示两行，超出部分显示省略号。",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
);

渐变淡出效果

Container(
  width: 200,
  child: const Text(
    "这是一段很长很长的文本内容，超出部分会渐变淡出。",
    maxLines: 1,
    overflow: TextOverflow.fade,
  ),
);

列表项文本溢出

ListTile(
  leading: const Icon(Icons.file),
  title: const Text(
    "这是一个很长很长的文件名称，超出部分显示省略号。",
    maxLines: 1,
    overflow: TextOverflow.ellipsis,
  ),
  subtitle: const Text(
    "这是文件的描述信息，可能会比较长，限制显示两行。",
    maxLines: 2,
    overflow: TextOverflow.ellipsis,
  ),
);

卡片文本溢出

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text(
          "卡片标题",
          style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
        ),
        SizedBox(height: 8),
        Text(
          "这是卡片的内容描述，可能会比较长，需要限制显示行数并添加溢出处理。",
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          style: TextStyle(fontSize: 14, color: Colors.grey),
        ),
      ],
    ),
  ),
);

自定义溢出效果

ShaderMask(
  shaderCallback: (Rect rect) {
    return const LinearGradient(
      begin: Alignment.centerLeft,
      end: Alignment.centerRight,
      colors: [Colors.black, Colors.transparent],
    ).createShader(Rect.fromLTRB(0, 0, rect.width - 20, rect.height));
  },
  blendMode: BlendMode.dstIn,
  child: const Text(
    "这是一段很长很长的文本内容，使用ShaderMask实现自定义渐变效果。",
    maxLines: 1,
    overflow: TextOverflow.visible,
  ),
);

性能优化建议

避免频繁更改maxLines

// 不好的做法：在build中动态更改maxLines
Widget build(BuildContext context) {
  return Text(
    "文本内容",
    maxLines: isExpanded ? null : 2,
    overflow: TextOverflow.ellipsis,
  );
}

使用const修饰不变的文本

// 好的做法：使用const修饰
const Text(
  "常量文本内容",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
);

合理设置maxLines

// 根据实际需求设置maxLines
Text(
  "描述文本",
  maxLines: 2, // 不要设置过大的值
  overflow: TextOverflow.ellipsis,
);

常见问题

文本不显示省略号怎么办？

检查以下几点：

1. 是否设置了maxLines属性
2. 是否设置了overflow: TextOverflow.ellipsis
3. 父容器是否有足够的宽度

如何实现多行省略？

设置maxLines为大于1的数值。

Text(
  "多行文本内容",
  maxLines: 2,
  overflow: TextOverflow.ellipsis,
);

如何实现自定义溢出效果？

使用ShaderMask组件。

ShaderMask(
  shaderCallback: (Rect rect) {
    return const LinearGradient(
      colors: [Colors.black, Colors.transparent],
    ).createShader(rect);
  },
  blendMode: BlendMode.dstIn,
  child: const Text("文本内容"),
);

为什么overflow属性不生效？

当softWrap为false且没有设置maxLines时，文本不会换行，overflow属性也不会生效。

总结

文本溢出处理是Flutter UI开发中的重要环节，掌握各种溢出处理方式可以创建更美观的界面。以下是一些关键点：

1. overflow属性：clip、fade、ellipsis、visible
2. maxLines属性：限制显示行数
3. softWrap属性：控制是否自动换行
4. 实际应用：列表项、卡片、自定义效果
5. 性能优化：合理设置参数、使用const修饰

掌握文本溢出处理的方法对于创建专业的Flutter应用至关重要。

---

参考资料：

• Flutter官方文档：Text
• Flutter官方文档：TextOverflow