Flutter Widget 之ClipPath

假设你有一个box，您已经找到了如何使用ClipRRect给它加上圆角

ClipRRect(
    borderRadius: BorderRadius.circular(15),
    child: BlueBox(),
);

或如何将它转换为带有CircleBorder的圆形盒子的方法

Conrainer(
    decoration: ShapeDecoration(
        shape: CircleBorder(),
        color: Colors.blue,
    ),
);

但是，如果您希望widget具有独特的形状呢？ClicpPath允许您执行此操作

通过将widget包装在ClipPath中可以使用任意路径定义自己的形状

ClipPath(
    child: BlueBox(),
),

ClipPath的主要属性是CustomClipper它将定义路径

ClipPath(
    child: BlueBox(),
    clipper: MyCustomClipper(),
),

要创建一个，您需要扩展CustomClipper小部件,覆盖的getClip是伪造新路径的位置，无论是星型，曲线型还是完全随机型,你还需要覆盖shouldReclip

class MyCustomClipper extends CustomClipper<Path> {
    @override
    Path getClip(Size size) {
        Path path = _getStarPath();
        // Path path = _getCurvedPath();
        // Path path = _getRandomPath();
        return path;
    }
    
    @override
    bool shouldReclip(oldClipper) => false;
}

现在，我们仅返回false，结果是仅仅将widget裁剪到路径中包含的点

如果想了解有关ClipPath，CustomClipper的内容，或者关于Flutter的其他功能，请访问flutter.dev

原文翻译自视频：视频地址