Flutter 中圆角处理的详细指南

Ducafecat

7 min readMar 16, 2023

前言

什么是圆角？

在移动应用中，我们经常会看到圆角的元素。圆角是指矩形的四个角都是弧形，而不是直角。圆角可以让界面看起来更加美观和友好。

为什么要使用圆角？

使用圆角有以下几个原因：

提高视觉美感：圆角可以让界面元素看起来更加和谐，提高整体的视觉美感。
提高易用性：圆角可以减小视觉冲击，让用户在使用过程中感觉更加舒适。
增加可辨识度：圆角可以让不同的界面元素更容易区分，提高用户的操作效率。

Flutter 中的圆角处理控件

在 Flutter 中，我们可以使用以下几种方式来实现圆角效果：

BorderRadius
ClipRRect
ClipOval
BoxDecoration
CircleAvatar
ClipPath
PhysicalModel

接下来，我们将详细介绍如何使用这些控件实现圆角效果。

效果

代码

https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_rounded

具体实现

BoxDecoration 方式：

在 Flutter 中，可以使用 BoxDecoration 给容器添加圆角。BoxDecoration 是一个常用的装饰类，用于对容器进行装饰，例如添加颜色、边框、阴影和圆角等效果。通过设置 BorderRadius 属性，可以给容器添加圆角，具体代码如下：

Widget _buildBoxDecoration() {
     return Container(
       decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(50)),
         image: DecorationImage(
           image: AssetImage('assets/desktop.jpg'),
           fit: BoxFit.cover,
         ),
       ),
       width: 300,
       height: 300,
     );
   }

在某些情况下，我们可能需要设置不同角的圆角半径。比如，我们可能需要给一个容器的左上角和右下角添加圆角，但是保留其他角的直角。这时可以使用 BorderRadius.only 属性，具体代码如下：

borderRadius: const BorderRadius.only(
         topLeft: Radius.circular(50),
         topRight: Radius.circular(50),
       ),

如果需要创建一个圆形的容器，可以将圆角半径设置为容器宽度或高度的一半，具体代码如下：

...
       decoration: const BoxDecoration(
         borderRadius: BorderRadius.all(Radius.circular(300 / 2)),
         ...
       ),
       width: 300,
       height: 300,

ClipRRect 方式：

除了使用 BoxDecoration，还可以使用 ClipRRect 来给 Widget 添加圆角。ClipRRect 是一个裁剪类，可以将 Widget 裁剪成指定的形状，例如圆角矩形、圆形等。具体代码如下：

Widget _buildClipRRect() {
     return ClipRRect(
       borderRadius: const BorderRadius.only(
         topLeft: Radius.circular(50),
         topRight: Radius.circular(50),
       ),
       child: Image.asset(
         'assets/desktop.jpg',
         width: 300,
         height: 300,
         fit: BoxFit.cover,
       ),
     );
   }

ClipOval 方式：

对一张图片进行圆形裁切，正方形就是正圆，一般用在用户头像处理。

Widget _buildClipOval() {
     return ClipOval(
       child: Image.asset(
         'assets/desktop.jpg',
         width: 300,
         height: 300,
         fit: BoxFit.cover,
       ),
     );
   }

ClipPath 方式：

你可以继承 CustomClipper 实现 getClip 来绘制一个闭合 path 曲线。

然后通过 ClipPath 来进行裁切绘制。以下代码示范了绘制一个五角星图像。

class StartClipper extends CustomClipper<Path> {
   @override
   Path getClip(Size size) {
     final path = Path();
     final radius = size.width / 2;
     final centerX = size.width / 2;
     final centerY = size.height / 2;
     const angle = 2 * pi / 5;
 
     path.moveTo(centerX + radius * cos(0), centerY + radius * sin(0));
     for (var i = 1; i < 5; i++) {
       path.lineTo(
         centerX + radius * cos(angle * i),
         centerY + radius * sin(angle * i),
       );
     }
     path.close();
     return path;
   }
 
   @override
   bool shouldReclip(CustomClipper<Path> oldClipper) {
     return false;
   }
 }

Widget _buildClipPath() {
     return ClipPath(
       clipper: StartClipper(),
       child: Container(
         decoration: const BoxDecoration(
           image: DecorationImage(
             image: AssetImage('assets/desktop.jpg'),
             fit: BoxFit.cover,
           ),
         ),
         width: 300,
         height: 300,
       ),
     );
   }

PhysicalModel 方式

PhysicalModel 是一个用于创建物理模型的 Widget，可以模拟出立体感。通过设置 borderRadius 属性，可以给 PhysicalModel 添加圆角，具体代码如下：

Widget _buildPhysicalModel() {
     return PhysicalModel(
       color: Colors.transparent,
       borderRadius: const BorderRadius.all(Radius.circular(50)),
       clipBehavior: Clip.antiAlias,
       child: Image.asset(
         'assets/desktop.jpg',
         width: 300,
         height: 300,
         fit: BoxFit.cover,
       ),
     );
   }

小结

在 Flutter 中，圆角的处理方式有很多种。通过使用 BoxDecoration、ClipRRect 和 PhysicalModel，我们可以轻松地给 Widget 添加圆角效果。在实际开发中，应根据实际需求选择最合适的圆角处理方式。

如果你有更好的方式，欢迎交流。

end