【老孟Flutter】41个酷炫的 Loading 组件库
2024-08-25 07:12:59
老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以。
Github 地址:https://github.com/781238222/flutter-do/tree/master/m_loading_sample
效果如下:
在项目的 pubspec.yaml
文件中添加依赖:
dependencies:
m_loading: ^0.0.1
执行命令:
flutter pub get
所有 loading 动画组件的用法大同小异,都有 duration(动画时长) 和 curve(动画曲线)参数,以及外观样式的设置,下面是一些 loading 动画组件的用法。
小球类的动画组件中有 BallStyle 类型的参数,此参数表示小球样式,用法如下:
BallCircleOpacityLoading(
ballStyle: BallStyle(
size: 5,
color: Colors.red,
ballType: BallType.solid,
),
)
- size:小球大小
- color:小球颜色
- ballType:小球类型,hollow:空心,solid:实心
- borderWidth:边框宽
- borderColor:边框颜色
设置空心球:
BallCircleOpacityLoading(
ballStyle: BallStyle(
size: 5,
ballType: BallType.hollow,
borderWidth: 1,
borderColor: Colors.red
),
)
设置动画时长和动画曲线:
Ring2InsideLoading(
color: Colors.blue,
duration: Duration(milliseconds: 1200),
curve: Curves.bounceInOut,
)
非小球类的组件使用:
PacmanLoading(
mouthColor: Colors.blue,
ballColor: Colors.red,
)
PouringHourGlassLoading(
color: Colors.blue,
)
用法基本都是类似的,下面是所有动画组件的效果及对应的组件名称:
BallPulseLoading | Ball4ScaleLoading | BallGridPulseLoading | BallCirclePulseLoading |
Ball3OpacityLoading | Ball4OpacityLoading | BallGridOpacityLoading | BallCircleRotateLoading |
BallBounceLoading | BallRotateScaleLoading | Ball2TrianglePathLoading | BallCircleOpacityLoading |
Ball3TrianglePathLoading | BallInsideBallLoading | BallClipRotatePulseLoading | BallCircleInsideRotateLoading |
RingRotate | Ring2InsideLoading | Ring2SymmetryLoading | RingBallRotateLoading |
RingClipRotateMultiple | WaterCircleLoading | Water2CircleLoading | WaterRipple |
WaterMultipleCircleLoading | WaterPulseLoading | BarPulseLoading | BarScaleLoading |
BarScale1Loading | BarScalePulseOutLoading | BarMusicLoading | Square4OpacityLoading |
SquareFadingLoading | SquareRotateLoading | SquareGridScaleLoading | CircleRotateLoading |
CirclePulseLoading | CircleSquareLoading | Circle2InsideScaleLoading | PouringHourGlassLoading |
PacmanLoading |
交流
老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
最新文章
- API文档中,<;E>;、<;T>;、<;?>;分别代表什么意思
- 基于devkit8600的2011.04版uboot启动代码Start.s分析
- WCF 传输和接受大数据
- 使用Systrace分析UI性能
- UI中的七种手势
- Mac OS X Mavericks使用手册
- php代码20个实用技巧 ------ 转发自菜鸟教程
- 14个华丽的javascript图表资源和插件
- JPush 使用教程
- 【node】安装和配置node项目文件
- Python 模块定义、导入、优化详解
- Asp.net MVC Form认证,IIS改成集成模式后,FormsAuthentication.SetAuthCookie无效,Request.IsAuthenticated值,始终为false,页面提示HTTP 错误 401.0 - Unauthorized,您无权查看此目录或页面
- shiro与项目集成开发
- OpenVPN简单部署笔记
- C++ operator关键字详解
- 转一个Visual Stuido 快捷键
- ASP.NET 构建高性能网站 第5篇
- 1.2 auth2.0
- (转)Mysql数据库之Binlog日志使用总结
- Choosing an ORM strategy
热门文章
- pandas_知识总结_基础
- linux命令使用 cut/sort/uniq
- [MIT6.006] 10. Open Addressing, Cryptographic Hashing 开放定址,加密哈希
- C语言设计模式(应用)
- RTP协议解析及H264/H265 音视频RTP打包分析
- 面经分享!蚂蚁金服三面被拒,重拾起鼓四面猿辅导成功拿下offer!
- Vegas教程分享,制作古装墨迹笔刷开场效果
- Ubuntu无法telnet
- javaAgent打包找不到premain类文件解决
- Java基础教程——异常处理详解