本文展示了Flutter如何使用Clipper实现圆形、圆角矩形、自定义形状等效果，包括ClipOval、CircleAvatar、Container装饰、ClipPath、ClipRect、ClipRRect以及静态评分组件的实现代码示例。
本文介绍了Flutter 通过Clipper实现各种自定义形状的示例代码，分享给大家，具体如下：
ClipOval 圆形裁剪
ClipOval(
child: SizedBox(
width: 120.0,
height: 120.0,
child: Image.asset(
Config.assets_avatar_1,
),
),
);
CircleAvatar 圆形头像
CircleAvatar(
radius: 60.0,
backgroundImage: AssetImage(
Config.assets_avatar_1,
),
);
Container Decoration 装饰形状
通过BoxShape.circle实现圆形图片
Container(
width: 120.0,
height: 120.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: AssetImage(
Config.assets_avatar_1,
),
),
)
)；
通过BorderRadius实现圆形图片
Container(
width: 120.0,
height: 120.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(60.0)),
image: DecorationImage(
image: AssetImage(
Config.assets_avatar_1,
),
),
),
)
ClipPath 路径剪裁
ClipPath(
clipper: TriangleClipper(ClipperPosition.LeftTop),
child: Container(
width: 16.0,
height: 16.0,
decoration: BoxDecoration(
color: Colors.blue,
),
),
);
enum ClipperPosition {
LeftTop,
RightTop,
}
class TriangleClipper extends CustomClipper {
最低0.47元/天 解锁文章
66
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
