flutter:styled_widget组件源码查看02

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

背景

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

widget介绍

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

backgroundImage

必传参数:DecorationImage image 默认参数:animate = false

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

backgroundGradient

必传参数:Gradient gradient 默认参数:animate = false

设置Gradient后会有一个渐变的效果

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

使用方法

Container(
  child: Text('padding使用')
      .constrained(height: 100).backgroundGradient(RadialGradient(
    center: const Alignment(-0.5, -0.6),
    radius: 0.15,
    colors: <Color>[
      const Color(0xFFEEEEEE),
      const Color(0xFF111133),
    ],
    stops: <double>[0.9, 1.0],
  )),
)

backgroundLinearGradient

功能:该方法可以实现一个线性渐变色

可选参数:List<Color>? colors,List<double>? stops,GradientTransform? transform

默认参数:AlignmentGeometry begin = Alignment.centerLeft,AlignmentGeometry end = Alignment.centerRight,TileMode tileMode = TileMode.clamp,bool animate = false,

backgroundSweepGradient

功能:该方法可以实现一个扇形渐变色

可选参数:List<Color>? colors,List<double>? stops,GradientTransform? transform

默认参数:AlignmentGeometry center = Alignment.center,double startAngle = 0.0,double endAngle = pi * 2,TileMode tileMode = TileMode.clamp,bool animate = false,

backgroundRadialGradient

功能:该方法可以实现一个放射状变色

可选参数:List<Color>? colors,List<double>? stops,GradientTransform? transform

默认参数:AlignmentGeometry center = Alignment.center,double radius = 0.5,TileMode tileMode = TileMode.clamp,bool animate = false

backgroundBlendMode

功能: 混合模式,BlendMode该功能比较复杂,不做过多的介绍了,感兴趣可以去看下

必填参数:BlendMode blendMode 默认参数:bool animate = false

效果

借用一下别人的文章吧,Flutter ShaderMask BlendMode的一些有意思的效果

结语

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

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