CustomPaint Over Camera Preview

Question

我正在尝试使用在Flutter中的相机预览上显示CustomPaint元素。现在，CustomPaint元素显示在相机预览下。我正在使用Flutter camera plugin来显示相机预览。我的代码如下。

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最后绘制在孩子的顶部