zoukankan      html  css  js  c++  java
  • Flutter 圆形 矩形 圆角 Clip的4大裁剪组件

    对于组件的装饰产生视觉效果,可以使用Opacity(透明度处理)、DecoratedBox(装饰盒子)、RotatedBox(旋转盒子)等组件进行包裹child。

    但是其中,还有个组件Clip(裁剪处理).


    Clip的相关组件:

    • ClipOval: 圆形裁剪
    • ClipRRect: 圆角矩形裁剪
    • ClipRect:矩形裁剪
    • ClipPath: 路径裁剪

    共同属性:

    属性名 类型 说明
    clipper  CustomClipper<Path> 裁剪路径
    clipBehavior

    Clip

    裁剪方式

    1. ClipOval: 圆形裁剪

    2.ClipRRect: 圆角矩形裁剪

    这个用borderRadius控制圆角的位置大小.

    3.ClipRect:矩形裁剪

    这个组件有点特殊,需要自定义clipper属性才能使用,否则没效果。自定义clipper并继承CustomClipper类,重写getClip、shouldReclip

    4.ClipPath: 路径裁剪

    这个是比较重点的。自定义的范围很广。采用了矢量路径path,将组件裁剪成任意形状。

    和ClipRect一样,需要自定义clipper并继承CustomClipper类,重写getClip、shouldReclip。

    这里的path用法是和android中自定义view的path是一样的。

    仔细观察图片,证明我们的思路是对的。

  • 相关阅读:
    Windows安全应急响应(一)
    net.exe和net1.exe的区别&联系.
    IIS搭建ASP站点
    在linux中安装VM tools
    第十五章 特殊权限
    第十四章 权限管理
    第十三章 用户组与提权
    第十一章 用户的创建
    第十章 组的创建
    第八章 vim 编辑器
  • 原文地址:https://www.cnblogs.com/xiaochii/p/13467355.html
Copyright © 2011-2022 走看看