Flutter 裁剪布局之 ClipRect、ClipRRect、ClipOval、ClipPath、CustomClipper

柔光的暖阳◎ 2023-07-17 14:22 36阅读 0赞

### 文章目录 ###

*   *   *  裁剪布局
         *   *   *  ClipRect
                 *  ClipRRect
                 *  ClipOval
                 *  ClipPath 及 CustomClipper

参考：

*  [Flutter 裁剪类组件 最全总结][Flutter _]
 *  [5.7 剪裁（Clip）][5.7 _Clip]

### 裁剪布局 ###

> `Flutter`中提供了一些剪裁`widget`，如下表格。

<table> 
 <thead> 
  <tr> 
   <th>widget</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ClipRect</td> 
   <td align="left">将 child 剪裁为给定的矩形大小</td> 
  </tr> 
  <tr> 
   <td>ClipRRect</td> 
   <td align="left">将 child 剪裁为圆角矩形</td> 
  </tr> 
  <tr> 
   <td>ClipOval</td> 
   <td align="left">如果 child 为正方形时剪裁之后是圆形，如果 child 为矩形时，剪裁之后为椭圆形</td> 
  </tr> 
  <tr> 
   <td>ClipPath</td> 
   <td align="left">将 child 按照给定的路径进行裁剪</td> 
  </tr> 
  <tr> 
   <td>CustomClipper</td> 
   <td align="left">并不是一个<code>widget</code>，但是使用<code>CustomClipper</code>可以绘制出任何我们想要的形状</td> 
  </tr> 
 </tbody> 
</table>

##### ClipRect #####

> 将 child 剪裁为给定的矩形大小

查看构造函数支持哪些字段：

const ClipRect({ 
    	Key key, 
    	this.clipper, // CustomClipper 对象，如果为空，则裁剪区域为 child 指定的大小
    	this.clipBehavior = Clip.hardEdge, // 裁剪的方式, 不能为 null 或者 Clip.none
    	Widget child // 子布局
     }
    )

`clipBehavior`可选值有：`none, hardEdge, antiAlias, antiAliasWithSaveLayer`

*  `none`：不裁剪
 *  `hardEdge`：裁剪但不应用抗锯齿，裁剪速度比`none`模式慢一点，但比其他方式快。
 *  `antiAlias`：裁剪而且抗锯齿，以实现更平滑的外观。裁剪速度比`antiAliasWithSaveLayer`快，比`hardEdge`慢。
 *  `antiAliasWithSaveLayer`：带有抗锯齿的剪辑，并在剪辑之后立即保存`saveLayer`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]  
代码实现：

##### ClipRRect #####

> 将 `child` 剪裁为圆角矩形

查看构造函数中的字段：

const ClipRRect({
        Key key,
        this.borderRadius = BorderRadius.zero,// 圆角
        this.clipper, // CustomClipper 对象，如果为空，则裁剪区域为 child 指定的大小
        this.clipBehavior = Clip.antiAlias,// 裁剪的方式, 不能为 null 或者 Clip.none
        Widget child,
      })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]

伪代码：

Column(
      children: <Widget>[
        Container(
          child: Image.network(
              'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm'
          ),
        ),
        SizedBox(
          height: 30,
        ),
        ClipRRect(
          borderRadius: BorderRadius.circular(20),// 圆角半径
          child: Container(
            height: 150,
            width: 150,
            child: Image.network(
              'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    )

##### ClipOval #####

> 如果 `child` 为正方形时剪裁之后是圆形，如果 `child` 为矩形时，剪裁之后为椭圆形。

构造函数中的字段同`ClipRect`。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]  
伪代码：

Column(
      children: <Widget>[
        Container(
          child: Image.network(
              'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm'
          ),
        ),
        SizedBox(
          height: 30,
        ),
        ClipOval(// 宽高不一致为，裁剪后为椭圆形
          child: Container(
            height: 100,
            width: 150,
            child: Image.network(
              'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm',
              fit: BoxFit.cover,
            ),
          ),
        ),
        SizedBox(
          height: 30,
        ),
        ClipOval(// 宽高一致为，裁剪后为圆形
          child: Container(
            height: 100,
            width: 100,
            child: Image.network(
              'https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm',
              fit: BoxFit.cover,
            ),
          ),
        ),
      ],
    )

##### ClipPath 及 CustomClipper #####

> `ClipPath`会将 `child` 按照给定的路径进行裁剪，`CustomClipper`可以绘制出任何我们想要的形状

实现的效果：实战项目源码可在 [Flutter-WanAndroid][] 中查看。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]

上方的这种效果可以通过`ClipPath+CustomClipper`实现。

主要思路是通过`CustomClipper`实现自定义的`斜线效果`然后将结果传递给`ClipPath`构造函数中的`clipper`字段。

我们先来看看`CustomClipper`这个抽象类。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]  
在源码中可以看到`getClip`方法就是获取裁剪的区域。我们可以在这个方法中绘制出`斜对角效果`。

伪代码实现如下：

class _CustomClipperTestPageState extends State<CustomClipperTestPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('ClipPath、CustomClipper'),
            ),
            body: Column(children: <Widget>[
              Stack(
                children: <Widget>[
                  ClipPath(
                    clipper:
                        TopBarClipper(MediaQuery.of(context).size.width, 200.0),
                    child: Container(// 主题色填充 child
                      width: double.infinity,
                      height: 240.0,
                      color: Theme.of(context).primaryColor,
                    ),
                  ),
                  // 名字
                  Padding(
                    padding: EdgeInsets.only(top: 40.0),
                    child: Center(
                        child: Text(
                      '龙衣',
                      style: TextStyle(fontSize: 30.0, color: Colors.white),
                    )),
                  ),
                  // 圆形头像
                  Container(
                    margin: EdgeInsets.only(top: 100.0),
                    child: Center(
                        child: Container(
                            width: 100.0,
                            height: 100.0,
                            child: ClipOval(
                                child: Image.network(
                              "https://ssyerv1.oss-cn-hangzhou.aliyuncs.com/picture/389e31d03d36465d8acd9939784df6f0.jpg!sswm",
                              fit: BoxFit.fill,
                            )))),
                  ),
                ],
              ),
            ]));
      }
    }
    
    /// 顶部斜对角栏裁剪
    class TopBarClipper extends CustomClipper<Path> {
      // 宽高
      double width;
      double height;
    
      /// 构造函数，接收传递过来的宽高
      TopBarClipper(this.width, this.height);
    
      /// 获取剪裁区域的接口
      /// 返回斜对角的图形 path
      @override
      Path getClip(Size size) {
        Path path = Path();
        path.moveTo(0.0, 0.0);
        path.lineTo(width, 0.0);
        // path 斜线效果
        path.lineTo(width, height / 2);
        path.lineTo(0.0, height);
        path.close();
        return path;
      }
    
      /// 接口决定是否重新剪裁
      /// 如果在应用中，剪裁区域始终不会发生变化时应该返回 false，这样就不会触发重新剪裁，避免不必要的性能开销。
      @override
      bool shouldReclip(CustomClipper<Path> oldClipper) {
        return false;
      }
    }

完~

[Flutter _]: https://www.cnblogs.com/mengqd/p/12482885.html
[5.7 _Clip]: https://book.flutterchina.club/chapter5/clip.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70]: /images/20230528/60a14e881a2447378092a58504be4f3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 1]: /images/20230528/be8d9112b6a74cf0b9cc9dff23622db7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 2]: /images/20230528/7625d1d1c60548f0bcdcf6551c49663b.png
[Flutter-WanAndroid]: https://github.com/dongxi346/Flutter-WanAndroid
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 3]: /images/20230528/87884adfc5ba421095013814eca9f4a1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0lUeGlhb2Rvbmc_size_16_color_FFFFFF_t_70 4]: /images/20230528/19bf07fffe0d411bbab0964ebc8d58e1.png