如何创建打印点的 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;
  }
}

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

然后可以在 Row 中使用 Expanded:

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

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

How to create a Spacer style Widget that prints dots?

material-design

flutter

flutter-layout