Flutter深入浅出组件篇---ClipOval、ClipPath

ClipOval介绍 ClipOval是裁剪子组件为椭圆的组件,默认情况下,将轴对齐的椭圆内切到其布局尺寸中,并防止其子项在该椭圆外绘制,但可以使用自定义剪刀自定义剪辑椭圆的大小和位置。
示例代码 本文中很多效果都没有截图,可下载源代码运行项目 源代码地址,或者通过视频教程查看 视频教程地址
什么情况下使用ClipOval? 当我们需要对子组件进行椭圆裁剪时我们就用ClipOval,常用于圆角头像等。
ClipOval的属性和说明

字段 属性 描述
clipper CustomClipper 自定义裁剪
clipBehavior Clip 子组件边缘裁剪的方式,默认Clip.hardEdge
child Widget 子组件
ClipOval使用 ClipOval基本使用
我们这里展示一张图片,用ClipOval进行包裹裁剪为椭圆,当超出的不飞粉将会被裁剪。
import 'package:flutter/material.dart'; class ClipOvalExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ClipRectExample"), ), backgroundColor: Colors.red.shade100, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ ClipOval( /// 自定义裁剪路径 // clipper: ClipperPath(), child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"), ), ], ), ), ); } }

效果展示
Flutter深入浅出组件篇---ClipOval、ClipPath
文章图片

ClipOval自定义裁剪使用
第一步:定义自定义裁剪类
import 'package:flutter/material.dart'; class ClipperOvalPath extends CustomClipper{ @override Rect getClip(Size size) { return Rect.fromLTRB(50, 50, size.width - 20, size.height - 20); }@override bool shouldReclip(CustomClipper oldClipper) { return false; } }

第二步:使用自定义裁剪
import 'package:flutter/material.dart'; import 'package:flutter_code/ClipOvalExample/ClipperOvalPath.dart'; class ClipOvalExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ClipRectExample"), ), backgroundColor: Colors.red.shade100, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ ClipOval( /// 自定义裁剪路径 clipper: ClipperOvalPath(), child: Image.network("https://img1.baidu.com/it/u=2324541312,3167046558&fm=253&fmt=auto&app=120&f=JPEG?w=601&h=400"), ), ], ), ), ); } }

效果展示
Flutter深入浅出组件篇---ClipOval、ClipPath
文章图片

ClipPath介绍 ClipPath是可以使用路径裁剪,每当要绘制子组件时,对委托调用回调。 回调返回一个路径,并且子组件阻止在路径外绘画。
什么情况下使用ClipPath? 需要只做一些特殊的形状是,比如五角星,那我们就需要用ClipPath
ClipPath的属性和说明
字段 属性 描述
clipper CustomClipper 自定义裁剪
clipBehavior Clip 子组件边缘裁剪的方式,默认Clip.hardEdge
child Widget 子组件
ClipPath的基本使用 第一步:自定义裁剪类(五角星)
import 'dart:math'; import 'package:flutter/material.dart'; class ClipStarPath extends CustomClipper { ClipStarPath({this.scale = 2.5}); final double scale; double perDegree = 36; /// 角度转弧度公式 double degree2Radian(double degree) { return (pi * degree / 180); }@override Path getClip(Size size) { var R = min(size.width / 2, size.height / 2); var r = R / scale; var x = size.width / 2; var y = size.height / 2; var path = Path(); path.moveTo(x, y - R); path.lineTo(x - sin(degree2Radian(perDegree)) * r, y - cos(degree2Radian(perDegree)) * r); path.lineTo(x - sin(degree2Radian(perDegree * 2)) * R, y - cos(degree2Radian(perDegree * 2)) * R); path.lineTo(x - sin(degree2Radian(perDegree * 3)) * r, y - cos(degree2Radian(perDegree * 3)) * r); path.lineTo(x - sin(degree2Radian(perDegree * 4)) * R, y - cos(degree2Radian(perDegree * 4)) * R); path.lineTo(x - sin(degree2Radian(perDegree * 5)) * r, y - cos(degree2Radian(perDegree * 5)) * r); path.lineTo(x - sin(degree2Radian(perDegree * 6)) * R, y - cos(degree2Radian(perDegree * 6)) * R); path.lineTo(x - sin(degree2Radian(perDegree * 7)) * r, y - cos(degree2Radian(perDegree * 7)) * r); path.lineTo(x - sin(degree2Radian(perDegree * 8)) * R, y - cos(degree2Radian(perDegree * 8)) * R); path.lineTo(x - sin(degree2Radian(perDegree * 9)) * r, y - cos(degree2Radian(perDegree * 9)) * r); path.lineTo(x - sin(degree2Radian(perDegree * 10)) * R, y - cos(degree2Radian(perDegree * 10)) * R); return path; }@override bool shouldReclip(ClipStarPath oldClipper) { return oldClipper.scale != this.scale; } }

第二步:使用自定义裁剪
import 'package:flutter/material.dart'; import 'package:flutter_code/ClipOvalExample/ClipStarPath.dart'; class ClipOvalExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("ClipRectExample"), ), backgroundColor: Colors.red.shade100, body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.center, children: [ ClipPath( clipper: ClipStarPath(), child: Container( width: 200, height: 200, color: Colors.blue, ), ) ], ), ), ); } }

效果展示
Flutter深入浅出组件篇---ClipOval、ClipPath
文章图片

总结 【Flutter深入浅出组件篇---ClipOval、ClipPath】ClipOval 主要是对子组件进行裁剪椭圆等效果,而当我们需要对一些子组件定义一些复杂的图形时,我们就需要用到ClipPath

    推荐阅读