时间戳

首页 > 解决方案 > 如何动态调整 CustomPainter 的大小

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

问题描述

我需要使用自定义画家在 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但为时已晚。

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

标签： flutterdartflutter-layout

解决方案

TL;博士

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

动态尺寸

这本质上是CustomPaint有其局限性的，因为它没有提供一种方法让您根据内容调整画家的大小。

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

恒定大小

您的情况不需要上述所有内容，因为您没有child自定义油漆。
您可以简单地向您提供size参数CustomPaint并在父小部件中计算所需的高度。

您可以使用 aLayoutBuilder来获取可用宽度：

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

现在，您TextPainter甚至可以在输入自定义绘画之前简单地使用 a 来检索所需的大小：

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.

推荐阅读