Question

我为我的“游戏”创建了一个Zone类，该类是带有颜色参数（可能还会在将来发生的事件）的矩形。

我创建了一个新文件zone.dart，其中包含2个类，一个statelesswidget扩展和一个custompainter扩展来绘制它。我还从main.dart调用了构造函数，它可以成功编译但不输出任何内容。为了进行调试，我在zone.dart中设置了固定的颜色和大小。

main.dart (basic)
class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: <Widget>[
          new Zone(Colors.red),
          new Zone(Colors.blue),
        ],
      ),
    );
  }

}


zone.dart
class Zone extends StatelessWidget {

  final Color color;

  Zone(this.color);

  @override 
  Widget build(BuildContext context) {
    return new CustomPaint(
      painter: new ZonePainter(color),
    );
  }

}



class ZonePainter extends CustomPainter {

  final Color color;

  ZonePainter(this.color);

  @override 
  void paint(Canvas canvas, Size size) {
    canvas.drawRect(
      new Rect.fromLTRB(0, 0, 400, 400),
      new Paint()..color = new Color(0xFF0000),
    );
  }

  @override
  bool shouldRepaint(ZonePainter oldDelegate) => color != oldDelegate.color;

}

我认为应该在没有错误的情况下绘制矩形。怎么了？

Answer 1

默认情况下，ListView子级没有固有的box constraints，因此Zone小部件不知道其大小。 drawRect中的CustomPainter没有强制执行此操作。

将Zone小部件包装在具有固定高度的Container中，或将其他任何具有约束的小部件包装起来，ListView将正确显示它。向CustomPaint添加一个孩子也可以做到这一点。

例如：

...
ListView(
  children: <Widget>[
    Container(
      child: new Zone(Colors.red),
      height: 100,
    ),
    new Zone(Colors.blue),
  ],
),
...

或

CustomPaint(
  painter: new ZonePainter(color),
  child: Container(
    height: 100,
  ),
);

PS：颜色Color(0xFF0000)不正确，对于全黑应该为Color(0xFF000000)，但是我想您应该添加this.color。

Answer 2

颜色是问题所在，在画家中您使用的是固定的颜色代码（十六进制也是不完整的）。您必须使用构造函数中的颜色

您有：new Paint()..color = new Color(0xFF0000),

您应该拥有：new Paint()..color = color,

如何在Flutter中绘制自定义窗口小部件？

2 个答案: