Flutter Widget 之ClipRRect

859 阅读1分钟

你是否曾在你的应用程序中有着一张图片或一些内容,并想着:"我希望我可以将那些角变得平滑以进行一些修饰。"

Flutter有着一个针对此情景的widget。

它叫做ClipRRect。一个多余的“r”代表这“rounded(圆角)”

你只需用一个clipper裹着应用程序,注明一个borderRadius—那就是我们想将角修剪成的圆的半径—然后你就得到了一个圆角长方形。

ClipRRect(
    borderRaduis:
        BorderRadius.circular(15.0),
    child: MyDashPicWidget(),
);

像是ClipRRect的widget是通过置入一个特别的Render物体到Render Tree内的方式运作,就在他们的产物上。

那个Render物体在每次Flutter重绘时会进行一次修剪。

除了设定半径之外,ClipRRect有着一个clipBehavior的属性—因此你可以自定Edge。

ClipRRect(
    borderRadius:
        BorderRadius.circular(15.0),
    clipBehavior: Clip.hardEdge,
    child: MyDashPicWidget(),
);

如果你想要尝试不一样的形状,它有着叫做ClipOval、ClipPath等的相似的Widget。

如果想了解有关ClipRRect的内容,或者关于Flutter的其他功能,请访问flutter.io

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