flutter:styled_widget组件源码查看05

「这是我参与11月更文挑战的第19天，活动详情查看：2021最后一次更文挑战」

背景

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

widget介绍

width with height

功能: 设置宽度、高度

必填参数:double width、double height

默认参数:bool animate = false

该widget也是拥有动画效果,同样是使用ConstrainedBox实现,可以设置宽度及高度

ConstrainedBox(
    key: key,
    child: this,
    constraints: BoxConstraints.tightFor(width: width),
  )

使用方法及效果

Container(
  child: Text('width with height')
  .backgroundColor(Colors.red)
  .width(100).height(100)
      .center()
)

ripple

功能: 设置水波纹点击效果

选填填参数

Color? focusColor: 焦点颜色 Color? hoverColor: 指针悬停时颜色 Color? highlightColor: 长按颜色 Color? splashColor:水波纹颜色 InteractiveInkFeatureFactory? splashFactory:自定义水波纹 double? radius:水波纹半径 ShapeBorder? customBorder:覆盖borderRadius的自定义剪辑边框

默认参数

bool enableFeedback = true:检测到的手势是否应该提供声音和/或触觉反馈，默认true bool excludeFromSemantics = false:是否将此小部件引入的手势从语义树中排除。默认false FocusNode? focusNode: bool canRequestFocus = true: bool autoFocus = false: bool enable = true:当enable为FALSE时不会使用InkWell

该widget使用InkWell实现,当直接设置color时,点击是无效果的,因为没有设置onTap也就是点击时间,我们看参数也没有提供点击事件的参数,看源码可以发现调用了findAncestorWidgetOfExactType来查找GestureDetector类型的widget,当找到时直接取出onTap,findAncestorWidgetOfExactType通过上下文进行查找到泛型所指定的Widget,所以我们需要在ripple外面包一层GestureDetector

GestureDetector? gestures = context.findAncestorWidgetOfExactType<GestureDetector>();

使用方法

Container(
  child: GestureDetector(
    child: Text('width with height')
        .ripple(splashColor: Colors.red),
    onTap: () => print('1111'),
  ).center()
)

rotate

功能: 旋转widget

必填参数:double angle角度

选填参数:Offset? origin偏移

默认参数:AlignmentGeometry alignment = Alignment.center对齐方式,bool transformHitTests = true点击,bool animate = false动画

该widget也是拥有动画效果,使用Transform.rotate实现

Transform.rotate(
    key: key,
    child: this,
    angle: angle,
    alignment: alignment,
    origin: origin,
    transformHitTests: transformHitTests,
  )

使用方法及效果

Container(
  child: Text('width with height').center().rotate(angle: 20,origin: Offset(50, 50))
)

结语

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

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