Question

我正在尝试实现信用卡读取器（使用某些API）。为了让用户拍摄卡的图片，我将全屏显示相机预览小部件。我想掩盖一个区域，以便用户将卡放在此处。

He're an illustration of what I have in mind

我想知道如何在颤动中实现这种遮罩？目前，我只是在绘制BoxDecoration，但是缺少半透明的灰色区域。

Container(
width: MediaQuery.of(context).size.width * 0.8,
height: MediaQuery.of(context).size.width * 0.8 / 1.55,
decoration: new BoxDecoration(
    border: Border.all(
        color: Colors.white,
        width: 2.0,
        style: BorderStyle.solid),
    shape: BoxShape.rectangle,
    borderRadius: BorderRadius.all(Radius.circular(4.0))),
)

Answer 1

您可以暂时尝试类似的方法，但这是一种效率很低的解决方案，我相信肯定有更好的解决方案，我也想知道。

 @override
  Widget build(BuildContext context) {
    if (!controller.value.isInitialized) {
      return Container();
    }
    return Container(
      height: MediaQuery.of(context).size.height,
      child: Stack(
        children: <Widget>[
          CustomPaint(
            foregroundPainter: P(),
            child: CameraPreview(controller),
          ),
          ClipPath(
            clipper: Clip(),
            child: CameraPreview(controller)),
        ],
      ),
    );
  }
class P extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawColor(Colors.grey.withOpacity(0.8), BlendMode.dstOut);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    // TODO: implement shouldRepaint
    return true;
  }

}
class Clip extends CustomClipper<Path>{
  @override
  getClip(Size size) {
    print(size);
    Path path = Path()
    ..addRRect(RRect.fromRectAndRadius(Rect.fromLTWH(10, size.height/2-120, size.width-20, 240), Radius.circular(26)));
    return path;
  }

  @override
  bool shouldReclip(oldClipper) {
    // TODO: implement shouldReclip
    return true;
  }

}

Answer 2

我现在只是使用自定义的BoxPainter，首先绘制背景，然后绘制卡片区域，最后将图层混合在一起以“剪切”中心部分。

import 'package:flutter/widgets.dart';

class CardDecoration extends Decoration {
  @override
  BoxPainter createBoxPainter([VoidCallback onChanged]) {
    return _CardPainter();
  }
}

class _CardPainter extends BoxPainter {
  @override
  void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) {
    final clearPaint = new Paint()
    ..color = Colors.black
    ..style = PaintingStyle.fill
    ..blendMode = BlendMode.dstOut;

    final bgPaint = new Paint()
      ..color = Color.fromARGB(150, 0, 0, 0)
      ..style = PaintingStyle.fill;

    final borderPaint = new Paint()
    ..color = Colors.white.withAlpha(120)
    ..style = PaintingStyle.stroke
    ..strokeWidth = 3.0;

    final rect = offset & configuration.size;
    final cardWidth = 0.8*rect.width;
    final cardHeight = cardWidth/1.55;

    canvas.saveLayer(Rect.fromLTRB(0, 0, rect.width, rect.height), clearPaint);

    canvas.drawPaint(bgPaint);

    canvas.saveLayer(Rect.fromLTRB(0, 0, rect.width, rect.height), clearPaint);
    canvas.drawRRect(RRect.fromLTRBR(0.1*rect.width, (rect.height-cardHeight)/2, 0.9*rect.width, (rect.height+cardHeight)/2, Radius.circular(8)), bgPaint);
    canvas.restore();
    canvas.restore();
    canvas.drawRRect(RRect.fromLTRBR(0.1*rect.width, (rect.height-cardHeight)/2, 0.9*rect.width, (rect.height+cardHeight)/2, Radius.circular(8)), borderPaint);
  }
}

Answer 3

可能您可以尝试使用列，行和容器：）。

var mySwiper = new Swiper('.swiper-container', {
    speed: 400,
    spaceBetween: 100
});

Example

在摄影机小部件顶部显示遮罩区域

3 个答案: