Flutter 中的TextBaseline
枚举有两个选项:
- alphabetic(字母基线)
- ideographic(表意基线)
这些值实际上如何改变基线呢?
Flutter 中的TextBaseline
枚举有两个选项:
这些值实际上如何改变基线呢?
字母基线是像英语这样的字母所在的行。以下是一个例子:
您可以看到,英文字母很好地放置在该行上,但是却穿过了中文字。
如果使用表意选项,则基线位于文本区域底部。请注意,中文字符实际上并不完全位于该行上。相反,该行位于文本行的最底部。
您可以将此代码插入到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);
}