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

我为我的游戏创建了一个区域类，它是带有颜色参数的矩形，可能是将来的事件

我创建了一个新文件zone.dart，其中包含两个类，一个无状态小部件扩展名和一个用于绘制它的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;

}

我认为它应该画出矩形，假设没有错误。有什么问题吗？

默认情况下，ListView子项没有内在属性，因此区域小部件不知道它应该有多大。CustomPainter中的drawRect不强制执行此操作

将您的区域小部件包装在具有固定高度的容器中，或任何其他强制约束的小部件中，ListView将正确显示它。将子对象添加到CustomPaint也可以做到这一点

例如：

... 列表视图 儿童：[ 容器 孩子：新区域颜色，红色， 身高：100， , 新区域颜色，蓝色， ], , ... 或

定制油漆 油漆工：新的彩色分区， 子：容器 身高：100， , ;

---

PS：颜色0xFF0000不正确，对于全黑，应该是Color0xFF000000，但我认为您是想添加这个。颜色。颜色是问题所在，在油漆工中，您使用的是固定颜色代码，十六进制也不完整。您必须使用构造函数中的颜色

您有：new Paint..color=new Color0xFF0000

你应该有：新油漆..颜色=颜色