flutter:styled_widget组件源码查看08

背景

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

widget介绍

gestures

功能: 手势

参数:

该控件对GestureDetector封装,包含所有手势及状态

使用方法

Container(
  child: Text('gestures').center().gestures(onTap: () => print('gestures'))
)

aspectRatio

功能: 固定宽高比的组件

必填参数: double aspectRatio,

源码实现

AspectRatio(
  key: key,
  aspectRatio: aspectRatio,
  child: this,
)

center

功能: 居中

选填参数:

double? widthFactor: 如果widthFactor是2.0，那么 这个小部件的宽度总是其子部件宽度的两倍 double? heightFactor: 如果heightFactor是2.0，那么 这个小部件的宽度总是其子部件高度的两倍

源码实现

Center(
  key: key,
  widthFactor: widthFactor,
  heightFactor: heightFactor,
  child: this,
)

fittedBox

功能: 当子组件的宽高比和父组件的宽高比不一样时，我们等比拉伸或者填充父组件

默认参数:

BoxFit fit = BoxFit.contain: 填充方式 AlignmentGeometry alignment = Alignment.center:对齐方式

源码实现

FittedBox(
  key: key,
  fit: fit,
  alignment: alignment,
  child: this,
)

fractionallySizedBox

功能: 设置控件的相对尺寸

选填参数:

double? widthFactor: 如果widthFactor是2.0，那么 这个小部件的宽度总是其子部件宽度的两倍 double? heightFactor: 如果heightFactor是2.0，那么 这个小部件的宽度总是其子部件高度的两倍

默认参数:

AlignmentGeometry alignment = Alignment.center:对齐方式

源码实现

FractionallySizedBox(
  key: key,
  alignment: alignment,
  widthFactor: widthFactor,
  heightFactor: heightFactor,
  child: this,
)

card

功能: 卡片控件,有个圆角加阴影

必填参数:

Color? color: 背景色

double? elevation: 阴影

ShapeBorder? shape: 设置圆角

EdgeInsetsGeometry? margin: 外边距

Clip? clipBehavior: 裁剪方式

默认参数:

bool borderOnForeground = true: 是否在child前绘制border

bool semanticContainer = true: 语义

源码实现

Card(
  key: key,
  color: color,
  elevation: elevation,
  shape: shape,
  borderOnForeground: borderOnForeground,
  margin: margin,
  clipBehavior: clipBehavior,
  semanticContainer: semanticContainer,
  child: this,
)

使用及效果展示

Container(
  child: Text('card').fontSize(50)
  .card(color: Colors.white,elevation: 5,margin: EdgeInsets.all(15))
  .center()
)

结语

今天已经把全部的widget扩展写完了, 后续会讲一些其他的扩展

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

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