CustomPaint Over Camera预览

Question

我试图在Flutter的相机预览中使用show CustomPaint元素。现在，CustomPaint元素显示在摄像机预览下。我正在使用Flutter相机插件来显示相机预览。我的代码如下。

class _CameraPreviewState extends State<CameraPreview> {

  [...]

  Widget build(BuildContext context) {
  double height = MediaQuery.of(context).size.height;

  return new YidKitTheme(
    new Center(
      child: _isReady
        ? new Container(
          height: height / 2,
          child: new CustomPaint(
            painter: new GuidelinePainter(),
            child: new AspectRatio(
              aspectRatio: controller.value.aspectRatio,
              child: new CameraPreview(controller)
            ),
          )
        )
        : new CircularProgressIndicator()
      )
    );
  }
}

class GuidelinePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..strokeWidth = 3.0
      ..color = Colors.red
      ..style = PaintingStyle.stroke;

    var path = new Path()..lineTo(50.0, 50.0);
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

Answer 1

更改

      child: new CustomPaint(
        painter: new GuidelinePainter(),
        child: new AspectRatio(

至

      child: new CustomPaint(
        foregroundPainter: new GuidelinePainter(),
        child: new AspectRatio(

painter首先绘制（即背景），然后child绘制，然后foregroundPainter最后绘制孩子的顶部