Question

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

我正在尝试扩展的CardView小部件扩展了CustomPaint，没有子节点，所有内容都是使用画布上的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只有一个高度作为父母。

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

1 个答案: