Flutter Widget 之ClipOval

有时，图片或屏幕的其他部分看起来可能过于方正，这些棱角真丑！

若这张图像这样改成圆形，不是更好？

有个小部件可将其子集裁剪为圆形和椭圆形名为ClipOval

以任何小部件为例，例如此处的Image然后以ClipOval包裹来布局

ClipOval(
    child: Image.asset('dash.jpg')
)

默认情况下，ClipOval会配合子级的带下来呈现，所以这张狭长图会被裁减成椭圆形

如果图片很宽，则生成的椭圆也会很宽

遇上正方形子级时，椭圆形将化为圆形，因为长宽等距的椭圆就是圆形

但是，您无需为了改变椭圆的形状而费心调整子级的大小，只需价格自定义clipper就可以任意决定大小了

ClipOval(
    clipper: MyClipper(),
    child: Image.asset('dash.jpg'),
)

你必须以新的类（class）来运行这个能扩展CustomClipper并能执行两种方法的clipper。也就是getClip和shouldReclip这两种

class MyClipper extends CustomClipper<Rect>{
    Rect getClip(Size size) {
        //...
    }
    
    bool shouldReclip(oldClipper) {
        //...
    }
}

其中，getClip套用的是子级的大小 然后回归Rect结构 让Flutter以此为本来绘制椭圆，您可任意放置Rect，并调成任意大小。

例如此例中，我们将椭圆置于子级左上角且不管子级尺寸，定义宽度为200像素，高度为100像素

Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, 200, 100);
}

CustomClipper的另一种方法是shouldReclip，会指示Flutter根据Clipper先前状态来判定是否须再次剪辑，为优化性能，

若确定Clipper当前状态将产出相同的剪辑，就传false

以上就是ClipOval简介，请记住，在Flutter，你可以完全掌握图像，因此你绝对可以用ClipOval的动画设计来产生有趣的效果

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

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