flutter:styled_widget组件源码查看01

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

背景

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

widget介绍

今天我们介绍的组件代码都在Widget_extension.dart中,又有代码都是对Widget的扩展extension StyledWidget on Widget {}

padding

该widget一共有七个可选参数加一个默认参数,七个可选参数分别问all、horizontal、vertical、top、bottom、left、right,还有一个默认参数animate = false,关于可选参数不多做介绍了,上下左右,水平垂直,和全部

当animate为true时不会使用Padding而是使用的AnimatedPadding,AnimatedPadding是一个可以执行动画的Widget,可以通过curve更改动画的执行曲线

animate
    ? Builder(
        key: key,
        builder: (BuildContext context) {
          _StyledAnimatedModel animation = this._getAnimation(context);
          return AnimatedPadding(
            child: this,
            duration: animation.duration,
            curve: animation.curve,
          );
        },
      )
    : Padding(
        child: this,
      )

使用方法

Container(
  child: Text('padding使用')
      .padding(top: 20,horizontal: 30)
      .backgroundColor(Colors.red),
)

opactiy

必传参数: double opacity 默认参数: animate = false、alwaysIncludeSemantics = false

设置透明度的组件,当animate为true时,会使用AnimatedOpacity带动画效果,alwaysIncludeSemantics是设置是否包含子组件的Semantics语义信息,默认是false

使用方法

Text('opacity使用')
    .backgroundColor(Colors.red)
    .opacity(0.5)

alignment with offstage

offstage:只有一个默认参数offstage=true控制widget的显示与隐藏

alignment: 一个必传参数AlignmentGeometry alignment一个默认参数animate = false,alignment跟原方法使用方式一样,animate=true则会使用AnimatedAlign组件

使用方法

Container(
  child: Text('padding使用')
      .alignment(Alignment.topRight),
)

backgroundColor

必传参数: color 默认参数: animate = false

当animate = false时会使用一个DecoratedBox设置decorated,为true时会使用_AnimatedDecorationBox该widget是封装的一个组件,在后续的动画介绍时会再次介绍

使用方法

见上方的padding

结语

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

作为Flutter届的一个小学生,希望大家多多指教,有问题的地方一起讨论