Flutter 文字溢出省略中间或前面

277 字

1 分钟

Flutter 文字溢出省略中间或前面

2022-02-21

prog

flutter

文字溢出#

当文字过长，通常会换行（softWrap）、以省略号替代溢出的部分（ellipsis）、渐隐（fade）。以上的方案，可以通过设置Text的overflow、softWrap属性实现。

TexrOverflow.ellipsis

想法#

但如果想要隐藏文字的中间部分，或者开头部分，该如何实现？

实现#

可以返回一个LayoutBuilder对象，通过内部的builder属性的size参数，测算可以显示多少个字符。

1
LayoutBuilder(builder: (context, size) {
2
    /// 是否溢出
3
    bool exceeded = false;
4
    /// 可以显示的文字长度
5
    int len = 0;
6

7
    for (; !exceeded && len < str!.length; len++) {
8
      // Build the textspan
9
      var span = TextSpan(
10
        text: '...' + str.substring(str.length - len),
11
        style: TextStyle(
12
            fontSize:
13
                Theme.of(context).textTheme.bodyText1?.fontSize ??
14
                    14),
15
      );
16
      // 使用[TextPainter]来校验文字是否超过了[maxLines]
17
      var tp = TextPainter(
18
        maxLines: 1,
19
        textAlign: TextAlign.left,
20
        textDirection: TextDirection.ltr,
21
        text: span,
22
      );
23
      // 使其布局来校验
24
      tp.layout(maxWidth: size.maxWidth);
25
      // 根据[tp]的布局结果的[didExceedMaxLines]属性来判断是否溢出
26
      exceeded = tp.didExceedMaxLines;
27
    }
28
    return Text(
29
      /// 构造Text，此处为省略前面的部分，替换为省略号
30
      (exceeded ? '...' : '') + str!.substring(str.length - len),
31
      overflow: TextOverflow.clip,
32
      maxLines: 1,
33
      style: const TextStyle(color: Colors.grey),
34
    );
35
  })