dart - flutter : how to achieve expansion of a customPainter widget in vertical (height) direction

Question

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

我要扩展的 CardView 小部件扩展了 CustomPaint，没有子级，所有内容都是使用 Canvas 上的 CustomPainter 在 CustomPainter.paint(canvas, size) 中绘制的。

在 paint(canvas, size) 方法中，当我打印 size.height 时，我得到 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,
          ),
        ),
      ],
    );
  }
}

result looks like this

我还需要改变什么来实现高度扩展？

谢谢

Answer 1

CustomPaint 采用其子项的大小(如果有的话)。因为你没有，你得到的高度为零。如果您对 CustomPaint 填充两个填充文本之间的空间感到满意，请使用 Expanded 而不是 Flexible。

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