flutter:styled_widget组件源码查看03

背景

昨天我们简单介绍了一下styled_widget的功能,今天我们来详细的看看有该框架有哪些Widget,另外是如何实现的 ,Widget列表传送门

widget介绍

borderRadius

功能: 设置圆角

选填参数:double all、double topLeft、double topRight、double bottomLeft、double bottomRight、

默认参数:bool animate = false

当animate为true时会有个动画效果,其他选填参数就是正常的设置上下左右圆角

borderRadiusDirectional

功能: 设置不规则圆角

选填参数:double all、double topStart、double topEnd、double bottomStart、double bottomEnd、

默认参数:bool animate = false

当animate为true时会有个动画效果,其他选填参数就是正常的设置上下左右圆角,

clipRRect

功能: 裁剪不规则圆角

选填参数:double all、double topLeft、double topRight、double bottomLeft、double bottomRight、CustomClipper<RRect>? clipper

默认参数:bool animate = false、Clip clipBehavior = Clip.antiAlias

当animate为true时会有个动画效果,使用_AnimatedClipRRect实现,其他选填参数就是正常的设置上下左右圆角,clipper对象如果为空,则剪裁区域为child指定大小,clipBehavior剪裁的方式,不能为null或者Clip.none,还有抗锯齿模式等

ClipRect与ClipOval

这两个widget都是原方法封装,ClipRect裁剪指定矩形大小,ClipOval裁剪椭圆,这两个方法做过多的介绍了, 看下原始方法使用就好了

border

功能: 设置圆角

选填参数:double all、double top、double left、double bottom、double right、

默认参数:bool animate = false、Color color = const Color(0xFF000000),BorderStyle style = BorderStyle.solid

当animate为true时会有个动画效果,其他选填参数就是正常的设置上下左右边框,color设置边框颜色,style设置边框风格,实线虚线等样式

decorated

功能: 可装饰widget

选填参数:color、image、border、borderRadius、boxShadow、gradient、backgroundBlendMode

默认参数:bool animate = false、BoxShape shape = BoxShape.rectangle,DecorationPosition position = DecorationPosition.background

当animate为true时会有个动画效果,其实该方法就是将上述几个方法都放在了一起跟简单的对BoxDecoration包装了一下,看下BoxDecoration使用方法就可以了

结语

希望大家把一些好的三方分享出来,打在评论区,共同学习,共同进步

作为Flutter届的一个小学生,希望大家多多指教