flutter - 如何动态调整 CustomPainter 的大小

Question

我需要使用自定义画家在 ListTile 内呈现我的自定义对象，以便绘制一些自定义文本。

ListTile(
  title: CustomPaint(
    painter: RowPainter.name(
      _titleFontSelected,
      _titleFont,
      text,
      index,
      MediaQuery.of(context),
      currentRow,
    ),
  ),
);

在我的 RowPainter 里面我用选定的字体绘制文本。
当行太大时，它会自动换行并绘制到给定的油漆尺寸之外。

void paint(Canvas canvas, Size size)

我喜欢这种行为，但如何调整绘画区域的高度？因为这是一个问题，因为它与下一个 List 行重叠。
我知道 CustomPaint有房产 Size可设置，但我只知道使用 TextPainter getBoxesForSelection 的绘制函数内的文本尺寸但为时已晚。

如果文本换行，如何动态“调整”行画家的高度？

Answer 1

TL; 博士

您不能动态调整自定义画家的大小，但是可以使用 CustomPaint 解决您的问题。 .
我将首先详细说明动态调整大小，然后解释如何使用恒定大小解决这个问题。

动态尺寸

这基本上是，其中 CustomPaint 有其局限性，因为它无法让您根据内容调整画家的大小。

正确的做法是实现你自己的 RenderBox 和覆盖 performLayout 根据内容调整渲染对象的大小。
RenderBox documentation对此非常详细，但是，您可能仍然会发现很难进入它，因为它与构建小部件完全不同。

恒定尺寸

以上都是不应该在您的情况下需要，因为您没有 child 为您的定制油漆。
您可以简单地提供 size parameter给您的 CustomPaint并计算父小部件中所需的高度。

您可以使用 LayoutBuilder 获取可用宽度:

LayoutBuilder(
  builder: (context, constraints) {
    final maxWidth = constraints.maxWidth;
    ...
  }
)

现在，您可以简单地使用 TextPainter 在输入自定义油漆之前检索所需的尺寸:

builder: (context, constraints) {
  ...
  final textPainter = TextPainter(
    text: TextSpan(
      text: 'Your text',
      style: yourTextStyle,
    ),
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(maxWidth: maxWidth); // This will make the size available.

  return CustomPaint(
    size: textPainter.size,
    ...
  );
}

现在，您甚至可以通过您的 textPainter直接传递给您的自定义画家，而不是传递样式参数。

您的逻辑可能有点复杂，但是，关键是您可以在创建 CustomPaint 之前计算大小。 ，它允许您设置大小。
如果您需要更复杂的东西，您可能必须实现自己的 RenderBox .