Flutter：如何实现customPainter小部件在垂直（高度）方向上的扩展

Question

我使用 customPainter 小部件绘制自定义小部件，但无法在列小部件中扩展它。我在这里看到过类似的问题，但即使CrossAxisAlignment.stretch我也遇到了问题。当我使用Expanded小部件而不是Flexible小部件时，出现编译错误。正如您所看到的，小部件不关心自定义小部件，而是在 customPaint 上绘制底部卡片文本。

我试图扩展的 CardView 小部件扩展了 CustomPaint，没有子项，所有内容都是使用画布上的 CustomPainter 绘制的，在CustomPainter.paint(canvas, size).

在paint(canvas, size)方法中，当我打印size.heighti get 0.0 时，这解释了为什么文本底部打印在小部件上。

小部件代码：

   class CardViewState extends State<CardView> {
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: <Widget>[
        new Padding(
          padding: new EdgeInsets.all(10.0),
          child: new Text(
            "CARD TOP",
            //widget.card.name,
            style: new TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
        ),
        new Flexible(
          child: new CustomPaint(
            painter: new CardPainter(widget.card, widget.numbers),
          ),
        ),
        new Padding(
          padding: new EdgeInsets.all(20.0),
          child: new Text(
            "CARD BOTTOM",
            style: new TextStyle(
                fontSize: 25.0,
                color: Colors.black,
                fontWeight: FontWeight.bold),
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

结果看起来像这样

我需要改变什么才能实现高度扩展？

谢谢

Answer 1

ACustomPaint获取其子级的大小（如果它有一个）。因为没有，所以高度为零。如果您愿意CustomPaint填充两个填充文本之间的空间，请使用Expanded代替Flexible。

看起来您的宾果卡在固定高度下看起来可能最好，在这种情况下，您可以SizedBox仅使用高度作为父卡。