如何在Flutter中使用clip-path实现六边形头像裁剪效果？

你提供的CSS裁剪规则可以直接通过Flutter自定义CustomClipper的方式1:1转译实现，具体步骤如下：

参考CSS裁剪规则：

-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);

1. 自定义六边形裁剪器 #

创建继承自CustomClipper<Path>的裁剪类，按照CSS的顶点百分比配置对应坐标：

class HexagonClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 完全匹配CSS的polygon顶点坐标，百分比换算为组件宽高的对应比例
    path.moveTo(size.width * 0.5, 0);
    path.lineTo(size.width, size.height * 0.25);
    path.lineTo(size.width, size.height * 0.75);
    path.lineTo(size.width * 0.5, size.height);
    path.lineTo(0, size.height * 0.75);
    path.lineTo(0, size.height * 0.25);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    // 裁剪形状固定无需重绘，返回false即可
    return false;
  }
}

2. 裁剪头像组件 #

使用Flutter内置的ClipPath组件包裹你的头像资源，传入上面自定义的裁剪器即可：

ClipPath(
  clipper: HexagonClipper(),
  child: Image.network(
    "你的头像资源地址",
    width: 120,
    height: 140,
    fit: BoxFit.cover,
  ),
)

附加说明 #

• 若需要添加边框效果，可叠加两层ClipPath：底层尺寸略大于头像、填充边框颜色即可
• 顶点比例可以按照需求自行调整，规则和CSS clip-path: polygon()完全一致

样式参考 #

内容的提问来源于stack exchange，提问作者Yan Cordeiro