Flutter 对 Paragraph 类的宽度度量是什么意思？答案

【问题标题】：What is the meaning Flutter's width metrics for the Paragraph class?Flutter 对 Paragraph 类的宽度度量是什么意思？
【发布时间】：2019-07-17 20:26:22
【问题描述】：

Paragraph 的documentation 有四种不同的方式来获取宽度距离：

宽度 → 双倍
此段落占用的水平空间量。

longestLine → double
段落中从最左侧字形的左边缘到最右侧字形的右边缘的距离。

maxIntrinsicWidth → 双倍
返回最小宽度，超过该宽度增加宽度不会降低高度。

minIntrinsicWidth → double
该段落可以在不绘制其内容的情况下的最小宽度。

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

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

【问题讨论】：

标签： flutter dart typography

【解决方案1】：

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

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

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

宽度

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

最长线

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

maxIntrinsicWidth

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

minIntrinsicWidth

这是最窄的段落，不会导致某些单词不自然地被打断。您可以在下面的示例中看到 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;
  }
}

另见

【讨论】：