flutter常见圆角如何处理

发布时间：2023-03-21 16:21:43 阅读：361 作者：iii 栏目：开发技术

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

这篇文章主要介绍“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常见圆角如何处理”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

flutter常见圆角如何处理

步骤

ClipRRect 方式：

ClipOval 方式：

ClipPath 方式：

BoxDecoration 方式：

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签