Flutter的TextBaseline枚举中的字母和表意字符有什么区别 [英] What is the difference between alphabetic and ideographic in Flutter's TextBaseline enum

问题描述

Flutter中的TextBaseline枚举有两个选项:

The TextBaseline enum in Flutter has two options:

• 字母
• 表意

这些值实际上如何改变基线?

How do these values actually change the baseline?

推荐答案

TextBaseline.alphabetic

字母基线是字母(如英语)中的字母所在的行.这是一个示例:

TextBaseline.alphabetic

The alphabetic baseline is the line that the letters in alphabets like English sit on. Here is an example:

您会看到英文字母恰好位于行上，但它会切穿中文字符.

You can see that the English letters sit nicely on the line, but it cuts through the Chinese characters.

但是，当使用表意选项时，基线位于文本区域的底部.请注意，中文字符实际上并不位于行上.相反，该行位于文本行的最底部.

When you use the ideographic option, though, the baseline is at the bottom of the text area. Note that the Chinese characters don't actually sit right on the line. Rather, the line is at the very bottom of the text line.

您可以将其插入CustomPaint小部件(如中所述这里)来重现以上示例.

You can plug this into a CustomPaint widget (as described here) to reproduce the above examples.

@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);
}

这篇关于Flutter的TextBaseline枚举中的字母和表意字符有什么区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！