Flutter的TextBaseline枚举中，字母基线和表意基线有什么区别？

Question

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

• alphabetic（字母基线）
• ideographic（表意基线）

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

- Suragch

---

我在我的行小部件中使用了枚举。但是基线属性似乎不起作用。请帮忙检查一下我的问题，链接在这里：https://dev59.com/G7voa4cB1Zd3GeqP2mOf - user1506104

Answer 1

TextBaseline.alphabetic

字母基线是像英语这样的字母所在的行。以下是一个例子：

您可以看到，英文字母很好地放置在该行上，但是却穿过了中文字。

TextBaseline.ideographic

如果使用表意选项，则基线位于文本区域底部。请注意，中文字符实际上并不完全位于该行上。相反，该行位于文本行的最底部。

补充代码

您可以将此代码插入到CustomPaint小部件中（如此处所述）以重现上述示例。

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

- Suragch