flutter常见圆角如何处理-编程学习网

这篇文章主要介绍“flutter常见圆角如何处理”，在日常操作中，相信很多人在flutter常见圆角如何处理问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”flutter常见圆角如何处理”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

步骤

ClipRRect 方式：

这种方式是包裹在图片上，然后通过裁切的方式进行圆角处理，很常见。

如果你要裁切成圆形，Radius = 边长 / 2

    ClipRRect(      borderRadius: BorderRadius.circular(10),      child: Image.asset(        'assets/desktop.jpg',        width: 100,        height: 100,        fit: BoxFit.cover,      ),    );

ClipOval 方式：

直接对一张图片进行圆形裁切，一般用在用户头像处理。

    ClipOval(      child: Image.asset(        'assets/desktop.jpg',        width: 100,        height: 100,        fit: BoxFit.cover,      ),    );

ClipPath 方式：

这种方式用在自定义裁切一张图片，比如机票左右两侧的三角凹陷。

你需要自定义一个 Clip Path。

class MyCustomClipper1 extends CustomClipper&lt;Path&gt; {  @override  Path getClip(Size size) {    var path = Path();    // 四个圆角，圆角半径为20    path.addRRect(RRect.fromLTRBR(        0, 0, size.width, size.height, const Radius.circular(20)));    return path;  }  @override  bool shouldReclip(CustomClipper&lt;Path&gt; oldClipper) {    return false;  }}

ClipPath(      clipper: MyCustomClipper1(),      child: Image.asset(        'assets/desktop.jpg',        width: 100,        height: 100,        fit: BoxFit.cover,      ),    );

BoxDecoration 方式：

这种方式用在背景图片的圆角处理，比如用户首页封面图，广告轮播图。

Container(      decoration: const BoxDecoration(        borderRadius: BorderRadius.all(Radius.circular(10)),        image: DecorationImage(          image: AssetImage('assets/desktop.jpg'),          fit: BoxFit.cover,        ),      ),      width: 100,      height: 100,    );

到此，关于“flutter常见圆角如何处理”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！