Paragraph.getBoxesForRange 实际上在 Flutter 中得到了什么

Question

Flutter 中的 Paragraph 类有一个名为 getBoxesForRange 的方法。

documentation 说：

返回包含给定文本范围的文本框列表。

但是，我不清楚这些框是包含给定范围的文本行周围的框，还是其他框。

经过进一步研究，我找到了答案，我将在下面添加。

Answer 1

简答

Paragraph.getBoxesForRange 为您提供给定范围的突出显示区域（如果它被选中）。如果范围换行到新行（或者如果它包含混合的双向文本），则会得到多个框。

更长的答案

给定字符串：

Hello, world.

如果您将范围从 1 到 8 像这样：

final boxes = paragraph.getBoxesForRange(1, 8);

这会给你一个盒子：

[
  TextBox.fromLTRBD(22.3, -0.3, 112.0, 35.0, TextDirection.ltr)
]

图形表示它看起来像这样：

这表明这些框不是整行，而是只换行指定的文本范围。

如果您限制宽度以强制段落对文本进行换行，则会得到以下结果：

[
  TextBox.fromLTRBD(22.3, -0.3, 47.0, 35.0, TextDirection.ltr), 
  TextBox.fromLTRBD(0.0, 34.7, 41.8, 70.0, TextDirection.ltr), 
  TextBox.fromLTRBD(0.0, 69.7, 23.2, 105.0, TextDirection.ltr)
]

完整代码

如果你想自己玩，这里是完整的代码。

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

void main() => runApp(MyApp());

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

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

class MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final textStyle = ui.TextStyle(
      color: Colors.black,
      fontSize: 30,
    );
    final paragraphStyle = ui.ParagraphStyle(
      textDirection: TextDirection.ltr,
    );
    final paragraphBuilder = ui.ParagraphBuilder(paragraphStyle)
      ..pushStyle(textStyle)
      ..addText('Hello, world.');
    final constraints = ui.ParagraphConstraints(width: 300);
    // final constraints = ui.ParagraphConstraints(width: 50);
    final paragraph = paragraphBuilder.build();
    paragraph.layout(constraints);
    canvas.drawParagraph(paragraph, Offset.zero);

    final boxes = paragraph.getBoxesForRange(1, 8);
    print(boxes);
    final paint = Paint()
      ..color = Colors.blue
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
    for (final box in boxes) {
      final rect = Rect.fromLTRB(box.left, box.top, box.right, box.bottom);
      canvas.drawRect(rect, paint);
    }
  }

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