前段时间公司有个大版本功能更新迭代，有段时间没有更新学习笔记了，临近周末，逞着上班划水功夫，写一下在开发Native用到一个经常使用到的功能，就是对图片，界面布局，设置不同角不同圆角Widget开，为后期小伙伴开发Fultter App提供可用控件。
Widget实现效果图：
screen_shot.png
Flutter实现圆角方式：
- 通过 Container decoration方式设置
///通过 borderRadius or shape：BoxShape.circle 来设置矩形不同角不同圆角设置，或是圆形设置
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
color: Colors.yellow,
image: DecorationImage(
image: AssetImage('assets/images/girl.jpeg'),
fit: BoxFit.cover
),
borderRadius:
BorderRadius.only(bottomLeft:Radius.circular(20) ,topRight: Radius.circular(20))),
),
2.通过 ClipOval , ClipRect ,CircleAvatar 设置
ClipOval(
child: SizedBox(
width: 100.0,
height: 100.0,
child: Image.asset(
'assets/images/girl.jpeg',
),
),
);
CircleAvatar(
radius: 60.0,
backgroundImage: AssetImage(
AssetImage('assets/images/girl.jpeg'),
),
);
通过以上两种方式貌似能实现我们对控件圆角设置要求，但是仔细一想，Widget里面有很多子child的话（如示意图最后一种展示），以上方式就不行，他们只能对单个image进行圆角设置。
如果要实现嵌套多child的Widget进行不同角不同圆角设置就有点力不从心了。那么Flutter官方有没有提供什么方式，可以让我们自由裁剪形状，答案就是今天主角ClipPath（路径裁剪）。
ClipPath使用以及相关代码封装：
/// Creates a path clip.
/// If [clipper] is null, the clip will be a rectangle that matches the layout
/// size and location of the child. However, rather than use this default,
/// consider using a [ClipRect], which can achieve the same effect more
/// efficiently.
const ClipPath({
Key key,
this.clipper,
this.clipBehavior = Clip.antiAlias,
Widget child,
}) : super(key: key, child: child);
通过源码可知我们只要child 以及 CustomClipper
接下来就直接上代码，代码很简单，我们只要熟悉path操作就行了：
class RoundPathWidget extends StatelessWidget {
final Widget child;
final double leftTopRadius;
final double rightTopRadius;
final double leftBottomRadius;
final double rightBottomRadius;
final PathShapeEnum pathShape;
final double radius;
RoundPathWidget(
{@required this.child,
this.radius = 0,
this.pathShape = PathShapeEnum.CirclePath,
this.leftTopRadius = 0,
this.rightTopRadius = 0,
this.leftBottomRadius = 0,
this.rightBottomRadius = 0})
: assert(child != null);
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: RoundPathClipper(
leftTopRadius: leftTopRadius,
rightTopRadius: rightTopRadius,
leftBottomRadius: leftBottomRadius,
rightBottomRadius: rightBottomRadius,
pathShape: pathShape,
radius: radius),
child: child,
);
}
}
///枚举定义展示样式：圆形，圆角矩形，不同角不同圆角设置
enum PathShapeEnum { CirclePath, RoundRect, PartRoundRect }
class RoundPathClipper extends CustomClipper {
final double leftTopRadius;
final double rightTopRadius;
final double leftBottomRadius;
final double rightBottomRadius;
final PathShapeEnum pathShape;
final double radius;
RoundPathClipper(
{this.pathShape,
this.radius,
this.leftTopRadius,
this.rightTopRadius,
this.leftBottomRadius,
this.rightBottomRadius});
@override
Path getClip(Size size) {
final width = size.width;
final height = size.height;
final path = Path();
if (PathShapeEnum.CirclePath == pathShape) {
path.addOval(Rect.fromLTRB(0, 0, width, height));
} else if (PathShapeEnum.RoundRect == pathShape) {
path.addRRect(RRect.fromRectAndRadius(Rect.fromLTWH(0, 0, width, height), Radius.circular(radius)));
} else {
final leftTopRect =
Rect.fromLTRB(0, 0, leftTopRadius * 2, leftTopRadius * 2);
final leftBottomRect = Rect.fromLTRB(
0, height - leftBottomRadius * 2, leftBottomRadius * 2, height);
final rightTopRect = Rect.fromLTRB(
width - 2 * rightTopRadius, 0, width, rightTopRadius * 2);
final rightBottomRect = Rect.fromLTRB(width - 2 * rightBottomRadius,
height - rightBottomRadius * 2, width, height);
//左上角 圆弧
path.arcTo(leftTopRect, 180 / 180 * pi, 90 / 180 * pi, false);
//右上角圆弧
path.lineTo(width - rightTopRadius, 0);
path.arcTo(rightTopRect, 270 / 180 * pi, 90 / 180 * pi, false);
//右下角
path.lineTo(width, height - rightBottomRadius);
path.arcTo(rightBottomRect, 0, 90 / 180 * pi, false);
//左下角
path.lineTo(leftBottomRadius, height);
path.arcTo(leftBottomRect, 90 / 180 * pi, 90 / 180 * pi, false);
path.close();
}
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
}
该Widget使用方式：
//圆形图片设置
RoundPathWidget(
child: Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 60,
height: 60,
),
),
//四角圆角设置
RoundPathWidget(
pathShape: PathShapeEnum.RoundRect,
radius: 10,
child: Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 70,
height: 70,
),
),
//部分角圆角设置
RoundPathWidget(
pathShape: PathShapeEnum.PartRoundRect,
leftTopRadius: 20,
rightBottomRadius: 20,
child: Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 110,
height: 110,
),
),
RoundPathWidget(
pathShape: PathShapeEnum.PartRoundRect,
leftTopRadius: 20,
leftBottomRadius: 20,
child: Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 90,
height: 90,
),
),
RoundPathWidget(
pathShape: PathShapeEnum.PartRoundRect,
leftTopRadius: 20,
leftBottomRadius: 10,
rightBottomRadius: 10,
child: Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 150,
height: 150,
),
),
//复杂布局圆角设置
RoundPathWidget(
pathShape: PathShapeEnum.PartRoundRect,
rightTopRadius: 15,
rightBottomRadius: 15,
child:Container(
padding: const EdgeInsets.all(3),
width: 300,
color: Colors.blue,
child: Row(
children: [
Expanded(child: Column(
children: [
Center(child: Text("测试多种布局"),),
Text('支持不同角，不同圆弧大小')
],
)),
Image.asset(
CommonUtil.instance.imageSrc('girl'),
fit: BoxFit.cover,
width: 60,
height: 60,
)
],
),
),
),