文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Flutter 中怎么实现一个裁剪类组件

2023-06-04 22:42

关注

Flutter 中怎么实现一个裁剪类组件,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

ClipRect

ClipRect组件使用矩形裁剪子组件,通常情况下,ClipRect作用于CustomPaintCustomSingleChildLayoutCustomMultiChildLayoutAlignCenterOverflowBoxSizedOverflowBox组件,例如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,      ),    ),  ),)

全图效果:

Flutter 中怎么实现一个裁剪类组件

裁剪效果:

Flutter 中怎么实现一个裁剪类组件

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

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

ClipRRect

ClipRRect组件可以对子组件进行圆角裁剪,默认圆角半径为0,注意ClipRRect有2个R,不是上面介绍的ClipRect。

用法如下:

ClipRRect(  borderRadius: BorderRadius.circular(20),  child: Container(    height: 150,    width: 150,    child: Image.asset(      'images/1.png',      fit: BoxFit.cover,    ),  ),)

效果如图:

Flutter 中怎么实现一个裁剪类组件

ClipOval

ClipOval裁剪为椭圆形,椭圆形的大小为正切父组件,因此如果父组件为正方形,切出来是圆形,用法如下:

ClipOval(  child: Container(    height: 150,    width: 250,    child: Image.asset(      'images/1.png',      fit: BoxFit.cover,    ),  ),)

效果如下:

Flutter 中怎么实现一个裁剪类组件

ClipPath

ClipPath组件根据路径进行裁剪,我们自定义裁剪路径也可以使用系统提供的,用法如下:

ClipPath.shape(  shape: StadiumBorder(),  child: Container(    height: 150,    width: 250,    child: Image.asset(      'images/1.png',      fit: BoxFit.cover,    ),  ),)

shape参数是ShapeBorder类型,系统已经定义了很多形状,介绍如下:

CustomClipper

CustomClipper并不是一个组件,而是一个abstract(抽象)类,使用CustomClipper可以绘制出任何我们想要的形状,比如三角形,代码如下:

@overrideWidget build(BuildContext context) {  return Center(    child: ClipPath(      clipper: TrianglePath(),      child: Container(        height: 150,        width: 250,        child: Image.asset(          'images/1.png',          fit: BoxFit.cover,        ),      ),    ),  );}

自定义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;  }}

效果如下:

Flutter 中怎么实现一个裁剪类组件

我们还可以绘制五角星,代码如下:

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

scale参数表示间隔的点到圆心的缩放比例,五角星效果如下:

Flutter 中怎么实现一个裁剪类组件

下面用动画动态设置scale,代码如下:

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,                width: 150,                color: Colors.red,              ),            );          }),    );  }}

看完上述内容,你们掌握Flutter 中怎么实现一个裁剪类组件的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注编程网行业资讯频道,感谢各位的阅读!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯