flutter:styled_widget组件源码查看06

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

背景

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

widget介绍

scale

功能: 放大缩小

选填参数:

double? all: xy同时放大或缩小

double? x: 横向放大或缩小(x,y需要同时设置)

double? y: 纵向放大或缩小(x,y需要同时设置)

Offset? origin:偏移

默认参数:

AlignmentGeometry alignment = Alignment.center:对齐方式

bool transformHitTests = true:点击

bool animate = false: 为true时使用动画扩展

该widget也是拥有动画效果,对Transform进行封装实现

Transform(
    key: key,
    transform: Matrix4.diagonal3Values(x ?? all ?? 0, y ?? all ?? 0, 1.0),
    alignment: alignment,
    child: this,
    origin: origin,
    transformHitTests: transformHitTests,
  )
复制代码

效果展示及代码

Container(
  child: Text('scale').center().scale(x: 2,y: 3)
)
复制代码

transform

功能: 实现各种变换效果

必填参数:Matrix4 transform

选填参数:

Offset? origin:偏移

AlignmentGeometry alignment:对齐方式

默认参数:

bool transformHitTests = true:点击

bool animate = false: 为true时使用动画扩展

该widget也是拥有动画效果,对Transform进行封装实现

Transform(
    key: key,
    transform: transform,
    alignment: alignment,
    origin: origin,
    transformHitTests: transformHitTests,
    child: this,
  )
复制代码

overflow

功能: 允许溢出容器显示

选填参数:

double? minWidth: 最小宽度

double? maxWidth: 最大宽度

double? minHeight: 最小高度

double? maxHeight: 最大高度

默认参数:

AlignmentGeometry alignment = Alignment.center:对齐方式

bool animate = false: 为true时使用动画扩展

该widget也是拥有动画效果,对OverflowBox进行封装实现,正常flutter的widget溢出容器后会报错,当使用overflow时不会报错

OverflowBox(
    key: key,
    alignment: alignment,
    minWidth: minWidth,
    maxWidth: minWidth,
    minHeight: minHeight,
    maxHeight: maxHeight,
    child: this,
  )
复制代码

scrollable

功能: 单个组件滚动,性能不如listview,因为没有懒加载,适合少量widget

选填参数:

bool? primary: 控制子组件滚动事件

ScrollPhysics? physics:响应用户输入

ScrollController? controller:控制器

默认参数:

Axis scrollDirection = Axis.vertical:设置滚动方向

bool reverse = false: 反转滚动方向

DragStartBehavior dragStartBehavior = DragStartBehavior.start:

该widget也是拥有动画效果,对SingleChildScrollView进行封装实现

SingleChildScrollView(
  key: key,
  child: this,
  scrollDirection: scrollDirection,
  reverse: reverse,
  primary: primary,
  physics: physics,
  controller: controller,
  dragStartBehavior: dragStartBehavior,
)
复制代码

结语

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

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