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

【问题标题】：How to create a Spacer style Widget that prints dots?如何创建打印点的 Spacer 样式 Widget？
【发布时间】：2019-03-27 13:38:34
【问题描述】：

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

【问题讨论】：

标签： flutter material-design flutter-layout

【解决方案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(),
  ),
),

【讨论】：

如何让它垂直居中？