ClipRect - 矩形裁剪
ClipRect组件使用矩形裁剪子组件。通常情况下,ClipRect用于Center、Align、OverflowBox、CustomPaint、CustomSingleChildLayout、CustomMultiChildLayout组件。
Center( child: ClipRect( child: Image.network( 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg', fit: BoxFit.cover, width: 100, height: 50, ), ), )原图:
裁剪效果:
ClipRRect - 圆角矩形裁剪
ClipRRect组件使用圆角矩形裁剪子组件,默认圆角半径为0.
Center( child: ClipRRect( borderRadius: BorderRadius.circular(20), child: Image.network( 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg', fit: BoxFit.cover, width: 100, height: 100, ), ), )效果图:
ClipOval - 椭圆形裁剪
ClipOval组件使用椭圆形裁剪子组件,如父组件为正方形,裁剪出来的是圆形。
椭圆形:
Center( child: ClipOval( child: Image.network( 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg', fit: BoxFit.cover, width: 100, height: 50, ), ), )效果图:
圆形:
Center( child: ClipOval( child: Image.network( 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg', fit: BoxFit.cover, width: 100, height: 100, ), ), )效果图:
ClipPath - 自定义裁剪
ClipPath组件允许我们自定义路径来对子组件进行裁剪。
绘制三角形
首先,我们需要定义裁剪对形状,使用CustomClipper类:
import 'package:flutter/material.dart'; class TriangleClipper extends CustomClipper<Path> { @override Path getClip(Size size) { final path = Path() ..moveTo(0.0, size.height) ..lineTo(size.width, size.height) ..lineTo(size.width / 2, size.height / 2) ..close(); return path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => false; }裁剪子组件:
ClipPath( clipper: TriangleClipper(), child: Image.network( 'https://p3fx.kgimg.com/v2/fxuserlogo/7e83eb705e9a7dbddfbc4a265e14e018.jpg_200x200.jpg', fit: BoxFit.cover, width: 100, height: 100, ), )效果图:
clipper参数定义裁剪规则,也可以说裁剪路径
clipBehavior参数定义裁剪对方式:
none:不裁剪
hardEdge:裁剪但不应用抗锯齿
antiAlias:裁剪且应用抗锯齿,此方式看起来会更平滑,通常用于处理圆形和弧形裁剪
antiAliasWithSaveLayer:裁剪、应用抗锯齿且有一个缓冲区,此方式裁剪很慢。
注意:但子组件没有超出父组件但范围时,不会发生裁剪,也不会产生任何性能消耗。
文章转载自:http://laixiazheteng.com/article/page/id/WdKmyR8q0hRO