text - Flutter 的 TextBaseline 枚举中的字母和表意字母有什么区别

标签 text flutter baseline fontmetrics

TextBaseline Flutter 中的 enum 有两个选项:

  • 字母
  • 表意

  • 这些值实际上如何改 rebase 线?

    最佳答案

    TextBaseline.alphabetic

    字母基线是字母表中的字母(如英语)所在的线。下面是一个例子:

    enter image description here

    你可以看到英文字母很好地排在一行上,但它贯穿了汉字。

    TextBaseline.ideographic

    但是,当您使用表意选项时,基线位于文本区域的底部。请注意,汉字实际上并没有直接放在行上。相反,该行位于文本行的最底部。

    enter image description here

    补充代码

    您可以将其插入 CustomPaint小部件(如 here 所述)重现上述示例。

    @override
    void paint(Canvas canvas, Size size) {
      final textStyle = TextStyle(
        color: Colors.black,
        fontSize: 30,
      );
      final textSpan = TextSpan(
        text: 'My text 文字',
        style: textStyle,
      );
      final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
      );
      textPainter.layout(
        minWidth: 0,
        maxWidth: size.width,
      );
    
      print('width: ${textPainter.width}');
      print('height: ${textPainter.height}');
    
      // draw a rectangle around the text
      final left = 0.0;
      final top = 0.0;
      final right = textPainter.width;
      final bottom = textPainter.height;
      final rect = Rect.fromLTRB(left, top, right, bottom);
      final paint = Paint()
        ..color = Colors.red
        ..style = PaintingStyle.stroke
        ..strokeWidth = 1;
      canvas.drawRect(rect, paint);
    
      // draw the baseline
      final distanceToBaseline =
          textPainter.computeDistanceToActualBaseline(TextBaseline.ideographic);
      print('distanceToBaseline: ${distanceToBaseline}');
      canvas.drawLine(
        Offset(0, distanceToBaseline),
        Offset(textPainter.width, distanceToBaseline),
        paint,
      );
    
      // draw the text
      final offset = Offset(0, 0);
      textPainter.paint(canvas, offset);
    }
    

    关于text - Flutter 的 TextBaseline 枚举中的字母和表意字母有什么区别,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56910191/

    相关文章:

    android - 使我的文本的特定部分可点击

    html - 如何对齐图像正下方的文本?

    flutter - 在 flutter 中设计响应式卡片以避免像素溢出错误或 _AssertionError 的最佳方法

    flutter - 如何使用 Flutter 将数据 SQLite(离线)发送到服务器 MySQL?

    android-studio - Dart - 如何在字符串中插入 "$"字?

    css - 将 div 与另一个 div 的第一行的基线对齐?

    PowerShell:如何将 $env:HOSTNAME/$env:Computer) 作为文本替换的一部分插入到文本文件中?

    java - 如何将文本从 Java 应用程序复制到写字板

    清除案例;如何使用 cleartool 建立基线

    Azure安全中心: Handle multiple databases with identical baseline