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是一样的。

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

  • 相关阅读:
    如何修改Myeclipse的JSP模板
    解决----------“win10,不能打字了,已禁用IME”
    Scala学习之For、Function、Lazy(4)
    Scala学习之Tuple、Map、Array
    PHP Cookies
    PHP Cookies
    PHP 文件处理
    PHP include 和 require
    sqlserver2012 评估期已过问题处理
    PHP preg_match正则表达
  • 原文地址:https://www.cnblogs.com/xiaochii/p/13467355.html
Copyright © 2011-2022 走看看