段落 class 的 Flutter 宽度指标是什么意思？

Question

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

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 宽度参数定义的段落宽度。它不依赖于段落文本的内容。

最长的线路

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

最大内部宽度

如果可以选择，这是该段落的宽度。它是没有软线环绕时最长线的宽度。也就是说，它是 "A line of text that wraps around." 如果没有被强制换行的宽度。

最小内部宽度

这是在不导致某些单词不自然地断断续续的情况下段落的最窄长度。您可以在下面的示例中看到 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