美文网首页
Flutter Text: 扶我起来

Flutter Text: 扶我起来

作者: 法的空间 | 来源:发表于2021-04-25 22:08 被阅读0次

    前言

    Flutter 中的 Text 一直都有一些不尽如意的地方,而大家又会经常会跟原生平台作对比,

    为什么支付宝,微信可以,Flutter 不可以 ?Flutter 辣鸡。

    不行就只能乖乖被Flutter 何时能站起来?

    文本溢出(省略号)没法自定义

    文本溢出(省略号)没法自定义,该问题 ExtendedText 已解决,你可以通过设置 ExtendedText.overflowWidget 来自定义任意溢出内容。

        ExtendedText(
          overflowWidget: TextOverflowWidget(
            align: TextOverflowAlign.center,
            child: Container(
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const Text(
                    '\u2026 ',
                    style: TextStyle(height: 1),
                  ),
                  InkWell(
                    child: Image.asset(
                      'assets/candies.png',
                      width: 20,
                      height: 20,
                    ),
                    onTap: () {
                      launch('https://github.com/fluttercandies/extended_text');
                    },
                  )
                ],
              ),
            ),
          ),
        );
    
    image.png

    无法指定文本溢出(省略号)的位置

    无法指定文本溢出(省略号)的位置,比如下面两种常见场景。

    1. 省略号在中间
    image.png
    1. 省略号在前面
    image.png

    Flutter 不支持,那么下面我们看看 原生 以及 web 端是否支持。(如有不对,望指正。)

    平台 开头 中间 结尾
    android android:ellipsize = "start" android:ellipsize = "middle" android:ellipsize = "end"
    Ios NSLineBreakByTruncatingHead NSLineBreakByTruncatingMiddle NSLineBreakByTruncatingTail
    web text-overflow: ellipsis clip 不支持 text-overflow: clip ellipsis
    flutter 不支持 不支持 TextOverflow.ellipsis

    注意的是 android 只有在一行的情况才有效,需要设置 android:singleline = "true"web 不支持中间;Ios 是其中支持最好的。

    可以看到,原生 以及 web 端对该功能的支持比 Flutter 好太多了。那么我们 Flutter 就没办法了吗?当然不是,之前解决 文本溢出(省略号)没法自定义 ,其原理完全可以应用在这个功能上面,以下为最终效果图。

    image.png

    原理

    performLayout

    performLayout 方法中,TextPainter 经过 layout 就可以知道当前文本是否有溢出。

        final Size textSize = _textPainter.size;
        final bool textDidExceedMaxLines = _textPainter.didExceedMaxLines;
        size = constraints.constrain(textSize);
    
        final bool didOverflowHeight = size.height < textSize.height || textDidExceedMaxLines;
        final bool didOverflowWidth = size.width < textSize.width;
        // TODO(abarth): We're only measuring the sizes of the line boxes here. If
        // the glyphs draw outside the line boxes, we might think that there isn't
        // visual overflow when there actually is visual overflow. This can become
        // a problem if we start having horizontal overflow and introduce a clip
        // that affects the actual (but undetected) vertical overflow.
        final bool hasVisualOverflow = didOverflowWidth || didOverflowHeight;
    
    

    计算不溢出的情况

    这个还是要依靠 TextPainter,通过二分查找,找到 不溢出的溢出 临界点 X

    开头 中间 结尾
    [0,X] [m,X]m 为中间文本的索引位置 文本不需要改变,无需计算

    Range 范围内的文本将不会显示。

    处理文本

    比如 abcdef, 我们找到的 Range[2,3] ,即最终显示 ab...ef。考虑支持选择复制,所以我们这里不能简单丢掉 cd。这里利用到 SpecialTextSpan 的一个功能。

    你见到的并不是真实的

     SpecialTextSpan(
       'abef',
       actualText: 'abcdef',
      );
    

    溢出内容绘制

    开头 中间 结尾
    画在文本开始位置 画在文本中间位置 画在文本结尾位置

    实际上,我们要做的时候,在这些位置绘制溢出内容,并且遮住下面的文字。为了达到这个目的,

    1. 根据 Range 获得 TextSelection,利用 TextPainter.getBoxesForSelection 获取该段遮蔽文字的区域 overflowRect
    2. overflowRect 跟溢出内容的大小取并集。
    3. 移动 Range 继续取并集, 直到 overflowRect 跟溢出内容的大小完全包容。(确保溢出内容显示以及遮蔽文字不会露出来)

    代码在_setOverflowRect 方法中。

    遮蔽文字

    在之前的版本中,由于 Paint()..blendMode = BlendMode.clear 无法对文字进行清除,只好利用 canvas.clipPath(path)overflowRect 部分的文字裁剪掉。现在官方已经修复掉这个问题,现在你可以这样做。(实际中小伙伴经常提起不知道怎么做摄像头的蒙层,其实你可以利用这个办法,将蒙层挖一个孔。)

        if (_overflowRect != null) {
          context.canvas.saveLayer(_offset & size, Paint());
        }
        // 绘制文字
        _paint(context, offset);
        if (_overflowRect != null) {
          // 清除掉这块区域的文字
          context.canvas.drawRect(
              _overflowRect!.shift(_offset), Paint()..blendMode = BlendMode.clear);
          context.canvas.restore();
        }
    

    更多的细节

    其实上面只是大概讲了一下思路,其中是包含很多计算的,感兴趣的童鞋,可以看看这个文件.

    缺点

    • 利用 TextPainter 的一些方法来实现最终计算,TextPainter 其实也是有很多限制的,比如 对 WidgetSpan 的计算错误,虽然已经利用一些 workaround 来规避了。但是官方引擎的每次改动都可能对结果有影响,反正是被坑过,懂的都懂。
    • 对面 middle 这种情况,文字每一行行高如果相差太大的话,极可能会导致计算失败,TextPainter 并没有提供一个 api,来直接告诉我们这些信息。

    换行和溢出不友好

    换行和溢出不友好, 比如在 Flutter 中显示下面一段话。

    您的糖果服务已续期,服务订单号: 12345678910987654321110。

    现实 期望
    image.png image.png
    image.png image.png

    这个问题也不是 Flutter 独有的,关系到对 word 排版的处理。目前的解决方案,是向文本中插入 zero-width space(\u{200B}).

    Characters('abc').join('\u{200B}');
    

    当然你可以直接将 ExtendedText.joinZeroWidthSpace 设置为
    true

      ExtendedText(
          joinZeroWidthSpace: true,
      )
    

    或者你也可以利用 ExtendedTextLibrary 库中的扩展方法。

    1. 文本
      String input='abc'.joinChar('\u{200B}');
    
    1. InlineSpan
        InlineSpan innerTextSpan;
         innerTextSpan = joinChar(
            innerTextSpan,
            Accumulator(),
            '\u{200B}',
        );
    

    但是你需要注意以下问题:

    1. word 不再是 word,你将无法通过双击选择 word

    2. 文本被修改了, 如果 ExtendedText.selectionEnabledtrue, 你需要重写 TextSelectionControlshandleCopy,将 zero-width space(\u{200B}) 去掉。

    
    class MyTextSelectionControls extends TextSelectionControls {
    
      @override
      void handleCopy(TextSelectionDelegate delegate,
          ClipboardStatusNotifier? clipboardStatus) {
        final TextEditingValue value = delegate.textEditingValue;
    
        String data = value.selection.textInside(value.text);
        // remove zeroWidthSpace
        data = data.replaceAll('\u{200B}', '');
    
        Clipboard.setData(ClipboardData(
          text: value.selection.textInside(value.text),
        ));
        clipboardStatus?.update();
        delegate.textEditingValue = TextEditingValue(
          text: value.text,
          selection: TextSelection.collapsed(offset: value.selection.end),
        );
        delegate.bringIntoView(delegate.textEditingValue.selection.extent);
        delegate.hideToolbar();
      }
    }
    
    

    最终效果图如下,可以看到文字排版更加紧凑了。

    image.png

    结语

    ExtendedText 不算完美,但是应该算是能够用了吧。有些时候,想法只有去实现才会成真,当思路在大脑中一步一步确认之后,就剩下实践了,从最简单的场景到复杂场景,脚踏实地,做人不也是这样吗?

    Flutter,爱糖果,欢迎加入Flutter Candies,一起生产可爱的Flutter小糖果[图片上传失败...(image-543384-1619359908929)]QQ群:181398081

    最最后放上 Flutter Candies 全家桶,真香。

    [图片上传失败...(image-e51cba-1619359908929)]

    相关文章

      网友评论

          本文标题:Flutter Text: 扶我起来

          本文链接:https://www.haomeiwen.com/subject/ddbjrltx.html