当前栏目
Flutter 116: 图解 PhysicalModel & PhysicalShape 裁切小组件
小菜在学习过程中发现仅通过设置 decoration 是无法改变 Container 内部 Widget 样式的,一般我们会通过 ClipX 方式进行裁剪;而一旦涉及到 Widget 的裁剪,对于基础样式,通常会采用 ClipOval / ClipRRect / ClipPath 等方式,对于稍加复杂的样式,一般通过自定义 CustomClipper 也可以满足;
而小菜今天尝试另一种类似的 PhysicalModel 方式;PhysicalX 方式可以设置 Widget 阴影效果,而 ClipX 方式不行;
(福利推荐:阿里云、腾讯云、华为云服务器最新限时优惠活动,云服务器1核2G仅88元/年、2核4G仅698元/3年,点击这里立即抢购>>>)
PhysicalModel
源码分析
const PhysicalModel({ Key key, this.shape = BoxShape.rectangle, // 裁剪样式 this.clipBehavior = Clip.none, // 裁剪方式 this.borderRadius, // 圆角弧度 this.elevation = 0.0, // 阴影高度 @required this.color, // 背景色 this.shadowColor = const Color(0xFF000000), // 阴影颜色 Widget child, })
分析源码可得,PhysicalModel 是一个样式相对单一的裁切 Widget,其中 color 背景色是必不可少的,而真正影响阴影颜色的为 shadowColor;
案例尝试
1. shape & borderRadius
shape 为裁剪样式,包括 BoxShape.rectangle 和 BoxShape.circle 两种,分别对应 ClipRRect 和 ClipOval,而 borderRadius 只有在 rectangle 圆角情况下生效;其中 clipBehavior 与其他涉及到裁切方式一致;
// ClipX return ClipRRect( borderRadius: BorderRadius.all(Radius.circular(20.0)), child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg'))); return Container( width: 80.0, height: 80.0, child: ClipOval(child: Image.asset('images/icon_hzw01.jpg', fit: BoxFit.fill))); // PhysicalModel return PhysicalModel( color: Colors.transparent, shape: isCircle ? BoxShape.circle : BoxShape.rectangle, clipBehavior: Clip.antiAlias, borderRadius: BorderRadius.all(Radius.circular(20.0)), child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg')));
2. color & shadowColor
color 对应 Widget 裁切的背景色,阴影效果是根据当前背景色展示,shadowColor 可以设置阴影颜色;
return PhysicalModel( color: Colors.teal.withOpacity(0.6), shape: isCircle ? BoxShape.circle : BoxShape.rectangle, clipBehavior: Clip.antiAlias, elevation: 6.0, shadowColor: isCircle ? Colors.yellow : Colors.deepOrange, borderRadius: BorderRadius.all(Radius.circular(20.0)), child: Container(width: 80.0, height: 80.0, color: Colors.pink.withOpacity(0.2)));
PhysicalShape
源码分析
const PhysicalShape({ Key key, @required this.clipper, this.clipBehavior = Clip.none, this.elevation = 0.0, @required this.color, this.shadowColor = const Color(0xFF000000), Widget child, })
分析源码可得,PhysicalShape 与 ClipPath 类似,均是通过 clipper 方式自定义裁切方式;
案例尝试
小菜尝试裁切一个多边形图片,通过自定义 CustomClipper 来设置裁切样式;
return ClipPath( clipBehavior: Clip.antiAlias, clipper: PolygonClipper(10), child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg'))); return PhysicalShape( color: Colors.transparent, clipBehavior: Clip.antiAlias, clipper: PolygonClipper(10), shadowColor: Colors.deepOrange, elevation: 6.0, child: Container(width: 80.0, height: 80.0, child: Image.asset('images/icon_hzw01.jpg'))); class PolygonClipper extends CustomClipper<Path> { final int num; PolygonClipper(this.num); @override Path getClip(Size size) { double radius = size.width * 0.5; Path _path = Path(); var startX = size.width * 0.5 + radius * cos(2 * pi * 0 / num); var startY = size.height * 0.5 + radius * sin(2 * pi * 0 / num); _path.moveTo(startX, startY); for (var i = 1; i <= num; i++) { var newX = size.width * 0.5 + radius * cos(2 * pi * i / num); var newY = size.height * 0.5 + radius * sin(2 * pi * i / num); _path.lineTo(newX, newY); } _path.close(); return _path; } @override bool shouldReclip(CustomClipper<Path> oldClipper) => true; }
PhysicalModel & PhysicalShape 案例源码
小菜对于更深入的裁切方式还不够深入,Flutter 同时提供了对应带有动画效果的 AnimatedPhysicalModel;如有错误,请多多指导!
来源: 阿策小和尚
你还在原价购买阿里云、腾讯云、华为云、天翼云产品?那就亏大啦!现在申请成为四大品牌云厂商VIP用户,可以3折优惠价购买云服务器等云产品,并且可享四大云服务商产品终身VIP优惠价,还等什么?赶紧点击下面对应链接免费申请VIP客户吧: