flutter:styled_widget组件源码查看09

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

背景

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

Icon介绍

之前我们把widget的扩展都介绍完了,今天我们看下Icon及list的扩展

iconSize及iconColor

功能: 改变icon大小及颜色

该extension中包含一个copywith的方法,会复制一个icon,并修改属性

T copyWith({
  double? size,
  Color? color,
  String? semanticLabel,
  TextDirection? textDirection,
}) =>
    (this is _StyledAnimatedIconContainer
        ? _StyledAnimatedIconContainer(
            this.icon,
            color: color ?? this.color,
            size: size ?? this.size,
            semanticLabel: semanticLabel ?? this.semanticLabel,
            textDirection: textDirection ?? this.textDirection,
          )
        : Icon(
            this.icon,
            color: color ?? this.color,
            size: size ?? this.size,
            semanticLabel: semanticLabel ?? this.semanticLabel,
            textDirection: textDirection ?? this.textDirection,
          )) as T

然后当我们调用iconSize或者iconColor时,内部就会调用copyWith更改color或者size,达到更改颜色及大小的目的

T iconSize(double size) => this.copyWith(size: size);
T iconColor(Color color) => this.copyWith(color: color);

使用方法

Container(
  child: IconButton(onPressed: ()=>print('11'), icon: Icon(Icons.print).iconColor(Colors.red).iconSize(50)).center()
)

List介绍

StyledList对List进行扩展,包含toColumn、toRow、toStack

toColumn

功能:垂直布局

默认参数:

TextDirection? textDirection: 文字排列方向

TextBaseline? textBaseline: 文字基准线

Widget? separator: 分割线

可选参数:

MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start: 主轴对齐,对于Column来说就是纵向

MainAxisSize mainAxisSize = MainAxisSize.max: 主轴尺寸

CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center:交叉轴对齐方式

VerticalDirection verticalDirection = VerticalDirection.down: 垂直方向布局控制

使用方法

Container(
  child: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
  ].toColumn().center()
)

toRow

功能:水平布局

默认参数:

TextDirection? textDirection: 文字排列方向

TextBaseline? textBaseline: 文字基准线

Widget? separator: 分割线

可选参数:

MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start: 主轴对齐,对于Column来说就是纵向

MainAxisSize mainAxisSize = MainAxisSize.max: 主轴尺寸

CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center:交叉轴对齐方式

VerticalDirection verticalDirection = VerticalDirection.down: 垂直方向布局控制

使用方法

Container(
  child: [
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
  ].toRow().center()
)

toStack

功能:水平布局

默认参数:

TextDirection? textDirection: 文字排列方向

可选参数:

AlignmentGeometry alignment = AlignmentDirectional.topStart:

StackFit fit = StackFit.loose: 决定未定位的组件

Clip clipBehavior = Clip.hardEdge:裁剪方式

使用方法

Container(
  child: [
    Container(
      height: 150,
      width: 100,
      color: Colors.blue,
    ),
    Container(
      height: 100,
      width: 100,
      color: Colors.green,
    ),
    Container(
      height: 50,
      width: 100,
      color: Colors.red,
    ),
  ].toStack().center()
)

结语

今天已经把list、icon扩展写完了, 明天会讲text扩展

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

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