Flutter 裁剪类组件最全总结_app

概述注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 ClipRect ClipRect组件使用矩形裁剪子组件，

注意：无特殊说明，Flutter版本及Dart版本如下：
Flutter版本： 1.12.13+hotfix.5Dart版本： 2.7.0

ClipRect

ClipRect组件使用矩形裁剪子组件，通常情况下，ClipRect作用于CustomPaint@H_419_19@ 、 CustomSingleChildLayout@H_419_19@ 、 CustomMultiChildLayout@H_419_19@ 、 Align@H_419_19@ 、 Center@H_419_19@ 、 OverflowBox@H_419_19@ 、 SizedOverflowBox@H_419_19@组件，例如ClipRect作用于Align，可以仅显示上半部分，代码如下：

ClipRect(  child: Align(    alignment: Alignment.topCenter,heightFactor: 0.5,child: Container(      height: 150,wIDth: 150,child: Image.asset(        'images/1.png',fit: BoxFit.cover,),)@H_419_19@

全图效果：

裁剪效果：

clipper@H_419_19@参数定义裁剪规则，下面具体介绍。

clipBehavior@H_419_19@参数定义了裁剪的方式，只有子控件超出父控件的范围才有裁剪的说法，各个方式说明如下：

none：不裁剪，系统默认值，如果子组件不超出边界，此值没有任何性能消耗。hardEdge：裁剪但不应用抗锯齿，速度比none@H_419_19@慢一点，但比其他方式快。antiAlias：裁剪而且抗锯齿，此方式看起来更平滑，比antiAliasWithSaveLayer@H_419_19@快，比hardEdge@H_419_19@慢，通常用于处理圆形和弧形裁剪。antiAliasWithSaveLayer：裁剪、抗锯齿而且有一个缓冲区，此方式很慢，用到的情况比较少。ClipRRectClipRRect组件可以对子组件进行圆角裁剪，默认圆角半径为0，注意ClipRRect有2个R，不是上面介绍的ClipRect。
用法如下：
ClipRRect(  borderRadius: borderRadius.circular(20),child: Container(    height: 150,child: Image.asset(      'images/1.png',)@H_419_19@
效果如图：
ClipovalClipoval裁剪为椭圆形，椭圆形的大小为正切父组件，因此如果父组件为正方形，切出来是圆形，用法如下：
Clipoval(  child: Container(    height: 150,wIDth: 250,)@H_419_19@
效果如下：
ClipPathClipPath组件根据路径进行裁剪，我们自定义裁剪路径也可以使用系统提供的，用法如下：
ClipPath.shape(  shape: Stadiumborder(),)@H_419_19@
shape@H_419_19@参数是Shapeborder类型，系统已经定义了很多形状，介绍如下：
RoundedRectangleborder：圆角矩形
ContinuousRectangleborder：直线和圆角平滑连续的过渡，和RoundedRectangleborder相比，圆角效果会小一些。
Stadiumborder：类似于足球场的形状，两端半圆。
BeveledRectangleborder：斜角矩形。效果如图：
Circleborder：圆形。CustomClipperCustomClipper并不是一个组件，而是一个abstract@H_419_19@(抽象)类，使用CustomClipper可以绘制出任何我们想要的形状，比如三角形，代码如下：
@overrIDeWidget build(BuildContext context) {  return Center(    child: ClipPath(      clipper: TrianglePath(),child: Container(        height: 150,child: Image.asset(          'images/1.png',);}@H_419_19@
自定义TrianglePath代码如下：
class TrianglePath extends CustomClipper<Path>{  @overrIDe  Path getClip(Size size) {    var path = Path();    path.moveto(size.wIDth/2,0);    path.lineto(0,size.height);    path.lineto(size.wIDth,size.height);    return path;  }  @overrIDe  bool shouldReclip(CustomClipper<Path> oldClipper) {    return true;  }}@H_419_19@
效果如下：
我们还可以绘制五角星，代码如下：
class StarPath extends CustomClipper<Path> {  StarPath({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(StarPath oldClipper) {    return oldClipper.scale != this.scale;  }}@H_419_19@
scale@H_419_19@参数表示间隔的点到圆心的缩放比例，五角星效果如下：
下面用动画动态设置scale@H_419_19@，代码如下：
class StartClip extends StatefulWidget {  @overrIDe  State<StatefulWidget> createState() => _StartClipState();}class _StartClipState extends State<StartClip>    with SingleTickerProvIDerStateMixin {  AnimationController _controller;  Animation _animation;  @overrIDe  voID initState() {    _controller =        AnimationController(duration: Duration(seconds: 2),vsync: this)          ..addStatusListener((status) {            if (status == AnimationStatus.completed) {              _controller.reverse();            } else if (status == AnimationStatus.dismissed) {              _controller.forward();            }          });    _animation = Tween(begin: 1.0,end: 4.0).animate(_controller);    _controller.forward();    super.initState();  }  @overrIDe  Widget build(BuildContext context) {    return Center(      child: AnimatedBuilder(          animation: _animation,builder: (context,child) {            return ClipPath(              clipper: StarPath(scale: _animation.value),child: Container(                height: 150,color: colors.red,);          }),);  }}@H_419_19@
效果如下：
今天的文章对大家是否有帮助？如果有，请在文章底部留言和点赞，你们的留言、点赞和转发关注是我持续更新的动力！
欢迎您的加入Flutter的微信交流群(mqd_zzy)，欢迎您的加入，让我们一起学习，一起进步，开始我们的故事，生活不止眼前的苟且，还有诗和《远方》。
当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。
更多相关阅读：Flutter系列文章总览全网最详细的一篇Flutter 尺寸限制类容器总结Flutter DataTable 看这一篇就够了Flutter Widgets 之 PageView          总结       以上是内存溢出为你收集整理的Flutter 裁剪类组件 最全总结全部内容，希望文章能够帮你解决Flutter 裁剪类组件 最全总结所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。					
										


					
						欢迎分享，转载请注明来源：内存溢出
原文地址: https://outofmemory.cn/web/999002.html

Flutter 裁剪类组件最全总结

发表评论

评论列表（0条）

Flutter 裁剪类组件 最全总结

发表评论

评论列表（0条）

Flutter 裁剪类组件最全总结