共计 1809 个字符,预计需要花费 5 分钟才能阅读完成。
老孟导读 :目前 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】:
正文完