flutter - 如何创建打印点的 Spacer 样式的 Widget？

Question

我正在查看 Material.io Basil design study ，我正在尝试弄清楚如何让 Flutter Widget 像 Spacer 一样工作，但有内容。

Answer 1

您可以将 CustomPainter 与 TextPainter 结合使用，以使用 填充可用宽度。

例子:

class PointPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final point = TextPainter(
        text: TextSpan(text: ".", style: TextStyle(color: Colors.red)),
        textDirection: TextDirection.ltr);
    point.layout(maxWidth: size.width);

    for (double i = 0; i < size.width; i += point.width) {
      point.paint(canvas, Offset(i, .0));
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

您通常会将文本主题作为参数传递，但出于示例目的，让我们跳过它。

然后可以使用 Expanded 在 Row 中使用它:

Expanded(
  child: CustomPaint(
    painter: PointPainter(),
  ),
),