В чем разница между алфавитным и идеографическим в перечислении Flutter TextBaseline

Question

Перечисление TextBaseline в Flutter имеет две опции:

• алфавитный
• идеографическая

Как эти значения фактически изменяют базовую линию?

Я добавляю свой ответ ниже.

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