flutter - Paragraph 类的 Flutter 宽度指标是什么意思？

Question

documentation for Paragraph 有四种不同的方法来获取宽度距离:

width → double
The amount of horizontal space this paragraph occupies.

longestLine → double
The distance from the left edge of the leftmost glyph to the right edge of the rightmost glyph in the paragraph.

maxIntrinsicWidth → double
Returns the smallest width beyond which increasing the width never decreases the height.

minIntrinsicWidth → double
The minimum width that this paragraph could be without failing to paint its contents within itself.

注意 tightWidth 不再出现在 Flutter 1.7 稳定版中

不过，我仍然不清楚它们有何不同。 width 是否包含一些额外的填充？

Answer 1

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

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

红色矩形用于说明宽度指标。高度可以忽略不计。

宽度

这是段落布局时由 ParagraphConstraints 宽度参数定义的段落宽度。它不依赖于段落文本的内容。

最长的线

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

最大内在宽度

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

最小内在宽度

这是最窄的段落，不会导致某些单词不自然地断开。您可以在下面的示例中看到，minIntrinsicWidth 是单词“Another”的宽度。

补充代码

如果您想自己尝试一下，可以创建一个新的 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