flutter:styled_widget组件源码查看04

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

背景

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

widget介绍

elevation

功能: 设置阴影

必填参数:double elevation、

默认参数:BorderRadiusGeometry borderRadius、Color shadowColor = const Color(0xFF000000)

borderRadius设置阴影圆角,shadowColor设置阴影颜色,elevation必填设置阴影大小,该方法是使用Material实现的

效果展示

Container(
  child: Text('elevation')
      .elevation(10,borderRadius: BorderRadius.all(Radius.circular(10)),shadowColor: Colors.red)
      .center()
)

neumorphism

功能: 设置阴影、背景、圆角、渐变

必填参数:double elevation、

默认参数:BorderRadiusGeometry borderRadius、Color backgroundColor = const Color(0xffEDF1F5)、double curve = 0.0、bool animate = false

animate跟之前一样是有个动画效果,borderRadius设置圆角,backgroundColor设置背景颜色,elevation必填设置阴影大小,curve是控制渐变效果的

效果展示

Container(
  child: Text('elevation')
  .neumorphism(elevation: 10,borderRadius: BorderRadius.all(Radius.circular(10)),backgroundColor: Colors.green,curve: 2)
      .center()
)

boxShadow

功能: 设置背景阴影

默认参数:Offset offset = Offset.zero、Color color = const Color(0xff000000)、double blurRadius = 0.0、bool animate = false、double spreadRadius = 0.0

animate跟之前一样是有个动画效果,offset设置阴影偏移量,color设置背景颜色,blurRadius设置模糊程度,spreadRadius控制外边框大小

效果展示

Container(
  child: Text('elevation')
  .boxShadow(color: Colors.green,offset: Offset(2, 2),spreadRadius: 10,blurRadius: 5)
      .center()
)

constrained

功能: 限制widget大小

选填参数:double? width、double? height

默认参数:double minWidth = 0.0、double maxWidth = double.infinity、double minHeight = 0.0、double maxHeight = double.infinity、bool animate = false

animate跟之前一样是有个动画效果,对ConstrainedBox进行封装,可以设置高度宽度,或者最大宽高

结语

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

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