如何裁剪小部件,或切出特定大小的小部件的方形部分?

时间:2019-03-24 18:54:12

标签: dart flutter flutter-layout

我想裁剪一个CameraPreview小部件,这样我只能得到确切的尺寸和要剪切的位置。

目前,我可以使用ClipRect对其进行剪辑, 但是我在要删除的小部件被裁剪的地方得到了这个黑色区域(请参见下面的替换图片,以获取良好的图形)

让我们说我们有一个像这样的小部件

 --------------                       
|88888888888888|                               
|88888888888888|                   
|88888888888888|                     
|88888888888888|                      
|88888888888888|                     
|88888888888888|                     
 --------------  

我需要裁剪小部件(而不是剪辑)

 --------------                       
|              |                               
|              |                    
|         888  |                      -----
|         888  |                     | 888 | 
|         888  |                     | 888 | 
|              |                     | 888 |
 --------------                       -----
     CLIPPING                        CROPPING

有人可以帮我裁剪小部件吗?

2 个答案:

答案 0 :(得分:0)

尝试一下

final Size size = controller.value.size;
return ClipRect(
  child: OverflowBox(
    maxWidth: double.infinity,
    maxHeight: double.infinity,
    alignment: Alignment.center,
    child: FittedBox(
      fit: BoxFit.cover,
      alignment: Alignment.center,
      child: new Container(
        width: size.width,
        height: size.height,
        child: CameraPreview(controller)
      )
    )
  )
);

答案 1 :(得分:0)

没关系,我自己设法解决了这个问题, 直到我想通了,感觉就像flutter框架以一种神秘的方式起作用

return Container( // just a parent
      child: Align( // important
        alignment: Alignment.center,
        child: Container( // just a parent
          width: some_width,  
          height: some_height,  
          child: SizedBox(
            width: width,  // final width of cropped portion
            height: width,  // final height of cropped portion
            child: OverflowBox(
              alignment: Alignment(-1,-1), // gives you top left portion of the size above, (1,1) gives bottom right, right direction is positive x, downward direction is positive y, see about Alignment on flutter docs for more details 
              maxWidth: double.infinity,
              maxHeight: double.infinity,
              child: Container(
                width: width,
                height: width,
                child: ClipRect(
                  clipper: RectClipper(i, width / 4),// this is a custom clipper i made of type CustomClipper<Rect>
                  child: CameraPreview(controller),
                ),
              ),
            ),
          ),
        ),
      ),
    );