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

我试图扩展的 CardView 小部件扩展了 CustomPaint,没有 child ,所有东西都是在 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

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

谢谢

最佳答案

CustomPaint 取其子代的大小(如果有的话)。由于您没有,您的高度为零。如果您对 CustomPaint 填充两个填充文本之间的空间感到满意,请使用 Expanded 而不是 Flexible

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

关于dart - flutter : how to achieve expansion of a customPainter widget in vertical (height) direction,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50547615/

10-11 01:15