在移动应用中,我们经常会看到圆角的元素。圆角是指矩形的四个角都是弧形,而不是直角。圆角可以让界面看起来更加美观和友好。
使用圆角有以下几个原因:
在 Flutter 中,我们可以使用以下几种方式来实现圆角效果:
接下来,我们将详细介绍如何使用这些控件实现圆角效果。
https://github.com/ducafecat/flutter_develop_tips/tree/main/flutter_application_rounded
在 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,
除了使用 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, ), ); }
对一张图片进行圆形裁切,正方形就是正圆,一般用在用户头像处理。
Widget _buildClipOval() { return ClipOval( child: Image.asset( 'assets/desktop.jpg', width: 300, height: 300, fit: BoxFit.cover, ), ); }
你可以继承 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 是一个用于创建物理模型的 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