Flutter学习笔记20-剪裁

Flutter中用于对组件进行剪裁的Widget如下表：

Widget	用途
ClipOval	子组件为正方形时剪裁为内贴圆形，为矩形时，剪裁为内贴椭圆
ClipRRect	将子组件剪裁为圆角矩形
ClipRect	剪裁子组件到实际占用的矩形大小（溢出部分剪裁）

代码示例：

class ClipDemo extends StatelessWidget {
  Widget avatar = Image.asset('assets/images/avatar.png', width: 60.0);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          avatar,
          ClipOval(child: avatar), // 剪裁为圆形
          ClipRRect(
            // 剪裁为圆角矩形
            borderRadius: BorderRadius.circular(5.0),
            child: avatar,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ClipRect(
                child: Align(
                  // 将溢出部分剪裁
                  alignment: Alignment.topLeft,
                  widthFactor: .5,
                  child: avatar,
                ),
              ),
              Text('Hello Flutter', style: TextStyle(color: Colors.red)),
            ],
          ),
          // )
        ],
      ),
    );
  }
}

代码运行效果图：

CustomClipper

CustomClipper可以剪裁子组件的特定区域。自定义一个CustomClipper，代码示例：

class MyClipper extends CustomClipper<Rect> {
  @override
  Rect getClip(Size size) => Rect.fromLTWH(10.0, 15.0, 40.0, 30.0);

  @override
  bool shouldReclip(covariant CustomClipper<Rect> oldClipper) => false;
}

• getClip()
  是用于获取剪裁区域的接口，图片大小是60×60，返回剪裁区域为Rect.fromLTWH(10.0, 15.0, 40.0, 30.0)，即图片中部40×30像素的范围。
• shouldReclip()
  接口决定是否重新剪裁。如果在应用中，剪裁区域始终不会发生变化时应该返回false，这样就不会触发重新剪裁，避免不必要的性能开销。如果剪裁区域会发生变化（比如在对剪裁区域执行一个动画），那么变化后应该返回true来重新执行剪裁。

代码示例：

DecoratedBox(
  decoration: BoxDecoration(
    color: Colors.red
  ),
  child: ClipRect(
      clipper: MyClipper(), //使用自定义的clipper
      child: avatar
  ),
)

代码运行效果图如下：

剪裁后图片所占用的空间大小仍然是60×60（红色区域），这是因为剪裁是在layout完成后的绘制阶段进行的，所以不会影响组件的大小。

代码传送门