猫哥课堂 ducafecat.com

Flutter 中圆角处理的详细指南

前言

什么是圆角?

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

为什么要使用圆角?

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

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

Flutter 中的圆角处理控件

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

  1. BorderRadius
  2. ClipRRect
  3. ClipOval
  4. BoxDecoration
  5. CircleAvatar
  6. ClipPath
  7. PhysicalModel

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

效果

image-20230331160940816

代码

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> { 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; } 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


Copyright 2023 ducafecat. All rights reserved.
微信: ducafecat, line: ducafecat,京ICP备2021009050号-3