Skip to content

Commit 6b16fcd

Browse files
LaoMengFlutterLaoMengFlutter
committed
add loading
1 parent fb294ee commit 6b16fcd

18 files changed

Lines changed: 477 additions & 83 deletions

‎m_loading_sample/README.md‎

Lines changed: 104 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
1+
所有动画组件的效果及对应的组件名称：
22

33
| ![](./img/BallPulseLoading.gif) | ![](img/Ball4ScaleLoading.gif) | ![](img/BallGridPulseLoading.gif) | ![](img/BallCirclePulseLoading.gif) |
44
| ----------------------------------------- | -------------------------------------- | ----------------------------------------- | -------------------------------------------- |
@@ -24,3 +24,106 @@
2424
| ![](./img/PacmanLoading.gif) | | | |
2525
| PacmanLoading | | | |
2626

27+
28+
29+
30+
31+
在项目的 `pubspec.yaml` 文件中添加依赖：
32+
33+
最新版本号请到pub查看：[https://pub.dev/packages/m_loading](https://pub.dev/packages/m_loading)
34+
35+
```dart
36+
dependencies:
37+
m_loading: ^lastversion
38+
```
39+
40+
执行命令：
41+
42+
```text
43+
flutter pub get
44+
```
45+
46+
47+
48+
所有 loading 动画组件的用法大同小异，都有 duration（动画时长） 和 curve（动画曲线）参数，以及外观样式的设置，下面是一些 loading 动画组件的用法。
49+
50+
51+
52+
小球类的动画组件中有 **BallStyle** 类型的参数，此参数表示小球样式，用法如下：
53+
54+
```dart
55+
BallCircleOpacityLoading(
56+
ballStyle: BallStyle(
57+
size: 5,
58+
color: Colors.red,
59+
ballType: BallType.solid,
60+
),
61+
)
62+
```
63+
64+
65+
66+
![](img/loading_1.gif)
67+
68+
69+
70+
71+
72+
- size：小球大小
73+
- color：小球颜色
74+
- ballType：小球类型，hollow：空心，solid：实心
75+
- borderWidth：边框宽
76+
- borderColor：边框颜色
77+
78+
79+
80+
设置空心球：
81+
82+
```
83+
BallCircleOpacityLoading(
84+
ballStyle: BallStyle(
85+
size: 5,
86+
ballType: BallType.hollow,
87+
borderWidth: 1,
88+
borderColor: Colors.red
89+
),
90+
)
91+
```
92+
93+
![](img/loading_2.gif)
94+
95+
设置动画时长和动画曲线：
96+
97+
```
98+
Ring2InsideLoading(
99+
color: Colors.blue,
100+
duration: Duration(milliseconds: 1200),
101+
curve: Curves.bounceInOut,
102+
)
103+
```
104+
105+
![](img/loading_3.gif)
106+
107+
非小球类的组件使用：
108+
109+
```dart
110+
PacmanLoading(
111+
mouthColor: Colors.blue,
112+
ballColor: Colors.red,
113+
)
114+
```
115+
116+
![](img/loading_4.gif)
117+
118+
119+
120+
```dart
121+
PouringHourGlassLoading(
122+
color: Colors.blue,
123+
)
124+
```
125+
126+
![](img/loading_6.gif)
127+
128+
129+

‎m_loading_sample/img/loading_1.gif‎

10.7 KB
Loading

‎m_loading_sample/img/loading_2.gif‎

16.2 KB
Loading

‎m_loading_sample/img/loading_3.gif‎

10 KB
Loading

‎m_loading_sample/img/loading_4.gif‎

12.1 KB
Loading

‎m_loading_sample/img/loading_6.gif‎

22 KB
Loading

‎m_loading_sample/lib/main.dart‎

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -30,18 +30,27 @@ class MyHomePage extends StatefulWidget {
3030
}
3131

3232
class _MyHomePageState extends State<MyHomePage> {
33-
34-
3533
@override
3634
Widget build(BuildContext context) {
37-
Color _color =Theme.of(context).primaryColor;
35+
Color _color = Theme.of(context).primaryColor;
3836
Duration _duration = Duration(seconds: 10);
3937
Curve _curve = Curves.bounceIn;
4038

41-
BallStyle _ballStyle=BallStyle(
39+
BallStyle _ballStyle = BallStyle(
4240
color: _color,
4341
);
44-
42+
return Scaffold(
43+
appBar: AppBar(),
44+
body: Center(
45+
child: Container(
46+
width: 40,
47+
height: 50,
48+
child: PouringHourGlassLoading(
49+
color: Colors.blue,
50+
),
51+
),
52+
),
53+
);
4554
return Scaffold(
4655
appBar: AppBar(
4756
title: Text(widget.title),
@@ -52,56 +61,64 @@ class _MyHomePageState extends State<MyHomePage> {
5261
crossAxisCount: 4,
5362
),
5463
children: [
55-
_item(BallPulseLoading(ballStyle: _ballStyle,)),
56-
_item(Ball4ScaleLoading(ballStyle: _ballStyle,)),
57-
_item(BallGridPulseLoading(ballStyle: _ballStyle,)),
58-
_item(BallCirclePulseLoading(ballStyle: _ballStyle,)),
59-
_item(Ball3OpacityLoading(ballStyle: _ballStyle,)),
60-
_item(Ball4OpacityLoading(ballStyle: _ballStyle,)),
61-
_item(BallGridOpacityLoading(ballStyle: _ballStyle,)),
62-
_item(BallCircleRotateLoading(ballStyle: _ballStyle,)),
63-
_item(BallBounceLoading(ballStyle: _ballStyle,)),
64-
_item(BallRotateScaleLoading(ballStyle: _ballStyle,)),
65-
_item(Ball2TrianglePathLoading(ballStyle: _ballStyle,), width: 40, height: 40),
66-
_item(BallCircleOpacityLoading(ballStyle: _ballStyle,), width: 40, height: 40),
67-
_item(Ball3TrianglePathLoading(ballStyle: _ballStyle,)),
68-
_item(BallInsideBallLoading(ballStyle: _ballStyle,backgroundColor: _color.withOpacity(0.3),), width: 40, height: 40),
69-
_item(BallClipRotatePulseLoading(ballStyle: _ballStyle,ringColor: _color,), width: 40, height: 40),
70-
71-
_item(BallCircleInsideRotateLoading(ballStyle: _ballStyle,), width: 40, height: 40),
72-
73-
_item(RingRotate(color: _color,), width: 40, height: 40),
74-
_item(Ring2InsideLoading(color: _color,), width: 40, height: 40),
75-
_item(Ring2SymmetryLoading(color: _color,), width: 40, height: 40),
76-
_item(RingBallRotateLoading(ballColor: _color,circleColor: _color.withOpacity(0.3),), width: 40, height: 40),
77-
_item(RingClipRotateMultiple(innerColor: _color,outerColor: _color,), width: 40, height: 40),
78-
_item(WaterCircleLoading(color: _color,)),
79-
_item(Water2CircleLoading(color: _color,)),
80-
_item(WaterRipple(color: _color,)),
81-
_item(WaterMultipleCircleLoading(color: _color,)),
82-
_item(WaterPulseLoading(color: _color,)),
83-
_item(BarPulseLoading(color: _color,), width: 40, height: 40),
84-
_item(BarScaleLoading(color: _color,), width: 40, height: 40),
85-
_item(BarScale1Loading(color: _color,), width: 40, height: 40),
86-
_item(BarScalePulseOutLoading(color: _color,), width: 40, height: 40),
87-
_item(BarMusicLoading(color: _color,), width: 26, height: 40),
88-
// _item(Square4RotateLoading(color: _color,)),
89-
_item(Square4OpacityLoading(color: _color,), width: 40, height: 40),
90-
_item(SquareFadingLoading(color: _color,), width: 40, height: 40),
91-
_item(SquareRotateLoading(color: _color,), width: 40, height: 40),
92-
_item(SquareGridScaleLoading(color: _color,)),
93-
_item(CircleRotateLoading(color: _color,), width: 40, height: 40),
94-
_item(CirclePulseLoading(color: _color,), width: 40, height: 40),
64+
// _item(BallPulseLoading(ballStyle: _ballStyle,)),
65+
// _item(Ball4ScaleLoading(ballStyle: _ballStyle,)),
66+
// _item(BallGridPulseLoading(ballStyle: _ballStyle,)),
67+
// _item(BallCirclePulseLoading(ballStyle: _ballStyle,)),
68+
// _item(Ball3OpacityLoading(ballStyle: _ballStyle,)),
69+
// _item(Ball4OpacityLoading(ballStyle: _ballStyle,)),
70+
// _item(BallGridOpacityLoading(ballStyle: _ballStyle,)),
71+
// _item(BallCircleRotateLoading(ballStyle: _ballStyle,)),
72+
// _item(BallBounceLoading(ballStyle: _ballStyle,)),
73+
// _item(BallRotateScaleLoading(ballStyle: _ballStyle,)),
74+
// _item(Ball2TrianglePathLoading(ballStyle: _ballStyle,), width: 40, height: 40),
75+
//
9576
_item(
96-
CircleSquareLoading(
97-
size: 30,
98-
color: _color,
77+
BallCircleOpacityLoading(
78+
ballStyle: BallStyle(
79+
size: 5, color: Colors.red, ballType: BallType.solid),
9980
),
100-
width: 30,
101-
height: 30),
102-
_item(Circle2InsideScaleLoading(smallCircleColor: _color,), width: 40, height: 40),
103-
_item(PouringHourGlassLoading(color: _color,), width: 30, height: 40),
104-
_item(PacmanLoading(mouthColor: _color,ballColor: _color,), width: 80, height: 40),
81+
width: 40,
82+
height: 40),
83+
84+
// _item(Ball3TrianglePathLoading(ballStyle: _ballStyle,)),
85+
// _item(BallInsideBallLoading(ballStyle: _ballStyle,backgroundColor: _color.withOpacity(0.3),), width: 40, height: 40),
86+
// _item(BallClipRotatePulseLoading(ballStyle: _ballStyle,ringColor: _color,), width: 40, height: 40),
87+
//
88+
// _item(BallCircleInsideRotateLoading(ballStyle: _ballStyle,), width: 40, height: 40),
89+
//
90+
// _item(RingRotate(color: _color,), width: 40, height: 40),
91+
// _item(Ring2InsideLoading(color: _color,), width: 40, height: 40),
92+
// _item(Ring2SymmetryLoading(color: _color,), width: 40, height: 40),
93+
// _item(RingBallRotateLoading(ballColor: _color,circleColor: _color.withOpacity(0.3),), width: 40, height: 40),
94+
// _item(RingClipRotateMultiple(innerColor: _color,outerColor: _color,), width: 40, height: 40),
95+
// _item(WaterCircleLoading(color: _color,)),
96+
// _item(Water2CircleLoading(color: _color,)),
97+
// _item(WaterRipple(color: _color,)),
98+
// _item(WaterMultipleCircleLoading(color: _color,)),
99+
// _item(WaterPulseLoading(color: _color,)),
100+
// _item(BarPulseLoading(color: _color,), width: 40, height: 40),
101+
// _item(BarScaleLoading(color: _color,), width: 40, height: 40),
102+
// _item(BarScale1Loading(color: _color,), width: 40, height: 40),
103+
// _item(BarScalePulseOutLoading(color: _color,), width: 40, height: 40),
104+
// _item(BarMusicLoading(color: _color,), width: 26, height: 40),
105+
// // _item(Square4RotateLoading(color: _color,)),
106+
// _item(Square4OpacityLoading(color: _color,), width: 40, height: 40),
107+
// _item(SquareFadingLoading(color: _color,), width: 40, height: 40),
108+
// _item(SquareRotateLoading(color: _color,), width: 40, height: 40),
109+
// _item(SquareGridScaleLoading(color: _color,)),
110+
// _item(CircleRotateLoading(color: _color,), width: 40, height: 40),
111+
// _item(CirclePulseLoading(color: _color,), width: 40, height: 40),
112+
// _item(
113+
// CircleSquareLoading(
114+
// size: 30,
115+
// color: _color,
116+
// ),
117+
// width: 30,
118+
// height: 30),
119+
// _item(Circle2InsideScaleLoading(smallCircleColor: _color,), width: 40, height: 40),
120+
// _item(PouringHourGlassLoading(color: _color,), width: 30, height: 40),
121+
// _item(PacmanLoading(mouthColor: _color,ballColor: _color,), width: 80, height: 40),
105122
],
106123
),
107124
);

0 commit comments

Comments
 (0)