段落类的Flutter宽度度量是什么意思？

Question

段落的documentation有四种获取宽度距离的方法：

  

宽度→两倍
  此段占用的水平空间。

     

longestLine→双击
  在段落中从最左字形的左边缘到最右字形的右边缘的距离。

     

maxIntrinsicWidth→double
      返回最小宽度，超过该最小宽度将不会增加高度。

     

minIntrinsicWidth→double
      该段可以不小于其自身内容的最小宽度。

请注意，tightWidth不再出现在Flutter 1.7稳定版本中。

尽管如此，我还是不清楚。 width是否包含一些额外的填充？

Answer 1

在以下示例中，使用了以下文本：

Hello, world.
Another line of text.
A line of text that wraps around.

红色矩形用于说明宽度度量。高度可以忽略。

宽度

这是放置段落时由ParagraphConstraints width参数定义的段落宽度。它不取决于段落文本的内容。

longestLine

这是考虑到软包装的最长文本行的长度。小于或等于段落宽度。

maxIntrinsicWidth

如果可以选择的话，这就是段落的宽度。没有软线换行时，它是最长线的宽度。也就是说，它是“环绕的一行文本”的宽度。如果不是被迫改行的话。

minIntrinsicWidth

这是最窄的段落，不会导致某些单词自然破译。在下面的示例中，您可以看到minIntrinsicWidth是单词“另一个”的宽度。

补充代码

如果您想自己玩弄它，则可以创建一个新的Flutter项目，并用以下代码替换 main.dart 。

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'dart:ui' as ui;

void main() {
  debugPaintSizeEnabled = false;
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(300, 200),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {

    final text = 'Hello, world.\nAnother line of text.\nA line of text that wraps around.';

    // draw the text
    final textStyle = ui.TextStyle(
      color: Colors.black,
      fontSize: 30,
    );
    final paragraphStyle = ui.ParagraphStyle(
      textDirection: TextDirection.ltr,
    );
    final paragraphBuilder = ui.ParagraphBuilder(paragraphStyle)
      ..pushStyle(textStyle)
      ..addText(text);
    final constraints = ui.ParagraphConstraints(width: 300);
    final paragraph = paragraphBuilder.build();
    paragraph.layout(constraints);
    final offset = Offset(0, 0);
    canvas.drawParagraph(paragraph, offset);

    // draw a rectangle around the text
    final left = 0.0;
    final top = 0.0;
    //final right = paragraph.width;
    //final right = paragraph.longestLine;
    //final right = paragraph.maxIntrinsicWidth;
    final right = paragraph.minIntrinsicWidth;
    final bottom = paragraph.height;
    final rect = Rect.fromLTRB(left, top, right, bottom);
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    canvas.drawRect(rect, paint);
  }

  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

另请参见

• Unexpected behavior with ui.Paragraph.minIntrinsicWidth
• Meaning of Paragraph in Flutter classes