Skip to content

Commit e46e72d

Browse files
iamitisiamitis
committed
整合Progress组件至TDesign
1 parent 2b41341 commit e46e72d

File tree

4 files changed

+892
-8
lines changed

4 files changed

+892
-8
lines changed

‎tdesign-component/example/lib/config.dart‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import 'page/td_loading_page.dart';
3434
import 'page/td_navbar_page.dart';
3535
import 'page/td_picker_page.dart';
3636
import 'page/td_popup_page.dart';
37+
import 'page/td_progress_page.dart';
3738
import 'page/td_radio_page.dart';
3839
import 'page/td_radius_page.dart';
3940
import 'page/td_refresh_page.dart';
@@ -185,8 +186,7 @@ Map<String, List<ExamplePageModel>> exampleMap = {
185186
ExamplePageModel(
186187
text: 'Progress 进度条',
187188
name: 'progress',
188-
isTodo: true,
189-
pageBuilder: _wrapInheritedTheme((context) => const TodoPage())),
189+
pageBuilder: _wrapInheritedTheme((context) => const TDProgressPage())),
190190
ExamplePageModel(
191191
text: 'Result 结果',
192192
name: 'result',

‎tdesign-component/example/lib/page/td_progress_page.dart‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
import 'dart:async';
2+
3+
import 'package:flutter/material.dart';
4+
import 'package:flutter/widgets.dart';
5+
import 'package:tdesign_flutter/tdesign_flutter.dart';
6+
7+
import '../annotation/demo.dart';
8+
import '../base/example_widget.dart';
9+
10+
class TDProgressPage extends StatefulWidget {
11+
const TDProgressPage({Key? key}) : super(key: key);
12+
13+
final examplePadding = const EdgeInsets.symmetric(horizontal: 16);
14+
15+
@override
16+
State<StatefulWidget> createState() {
17+
return _TDProgressPageState();
18+
}
19+
}
20+
21+
class _TDProgressPageState extends State<TDProgressPage> {
22+
TDLabelWidget buttonLabel = const TDTextLabel('开始');
23+
double progressValue = 0.0;
24+
Timer? _timer;
25+
bool isProgressing = false;
26+
bool isPlaying = false;
27+
double microProgressValue = 0.0;
28+
Timer? _microTimer;
29+
30+
@override
31+
Widget build(BuildContext context) {
32+
return ExamplePage(
33+
title: tdTitle(),
34+
desc: '用于展示任务当前的进度',
35+
exampleCodeGroup: 'progress',
36+
backgroundColor: TDTheme.of().whiteColor1,
37+
padding: const EdgeInsets.symmetric(vertical: 8),
38+
children: [
39+
ExampleModule(title: '组件类型', children: [
40+
ExampleItem(
41+
desc: '线性进度条',
42+
padding: widget.examplePadding,
43+
builder: _buildRightLabelLinear),
44+
ExampleItem(
45+
desc: '百分比内显',
46+
padding: widget.examplePadding,
47+
builder: _buildInsideLabelLinear),
48+
ExampleItem(
49+
desc: '环形进度条',
50+
padding: widget.examplePadding,
51+
center: false,
52+
builder: _buildCircle),
53+
ExampleItem(
54+
desc: '微型环形进度条',
55+
padding: widget.examplePadding,
56+
center: false,
57+
builder: _buildMicro),
58+
ExampleItem(
59+
desc: '按钮进度条',
60+
padding: widget.examplePadding,
61+
builder: _buildButton),
62+
ExampleItem(
63+
desc: '微型按钮进度条',
64+
padding: widget.examplePadding,
65+
center: false,
66+
builder: _buildMicroButton),
67+
]),
68+
ExampleModule(title: '组件状态', children: [
69+
ExampleItem(
70+
desc: '线性进度条',
71+
padding: widget.examplePadding,
72+
builder: _buildPrimary),
73+
ExampleItem(padding: widget.examplePadding, builder: _buildWarning),
74+
ExampleItem(padding: widget.examplePadding, builder: _buildDanger),
75+
ExampleItem(padding: widget.examplePadding, builder: _buildSuccess),
76+
ExampleItem(
77+
desc: '环形进度条',
78+
padding: widget.examplePadding,
79+
center: false,
80+
builder: _buildCirclePrimary),
81+
ExampleItem(
82+
padding: widget.examplePadding,
83+
center: false,
84+
builder: _buildCircleWarning),
85+
ExampleItem(
86+
padding: widget.examplePadding,
87+
center: false,
88+
builder: _buildCircleDanger),
89+
ExampleItem(
90+
padding: widget.examplePadding,
91+
center: false,
92+
builder: _buildCircleSuccess),
93+
])
94+
]);
95+
}
96+
97+
@Demo(group: 'progress')
98+
Widget _buildRightLabelLinear(BuildContext context) {
99+
return const TDProgress(
100+
type: TDProgressType.linear,
101+
value: 0.8,
102+
strokeWidth: 6,
103+
progressLabelPosition: TDProgressLabelPosition.right);
104+
}
105+
106+
@Demo(group: 'progress')
107+
Widget _buildInsideLabelLinear(BuildContext context) {
108+
return const TDProgress(type: TDProgressType.linear, value: 0.8);
109+
}
110+
111+
@Demo(group: 'progress')
112+
Widget _buildCircle(BuildContext context) {
113+
return const TDProgress(type: TDProgressType.circular, value: 0.3);
114+
}
115+
116+
@Demo(group: 'progress')
117+
Widget _buildMicro(BuildContext context) {
118+
return const TDProgress(type: TDProgressType.micro, value: 0.75);
119+
}
120+
121+
@Demo(group: 'progress')
122+
Widget _buildButton(BuildContext context) {
123+
return TDProgress(
124+
type: TDProgressType.button,
125+
onTap: _toggleProgress,
126+
onLongPress: _resetProgress,
127+
value: progressValue,
128+
label: buttonLabel);
129+
}
130+
131+
@Demo(group: 'progress')
132+
Widget _buildMicroButton(BuildContext context) {
133+
return Row(
134+
mainAxisAlignment: MainAxisAlignment.start,
135+
children: [
136+
TDProgress(
137+
type: TDProgressType.micro,
138+
value: microProgressValue,
139+
onTap: _toggleMicroProgress,
140+
label: TDIconLabel(isPlaying ? Icons.pause : Icons.play_arrow,
141+
color: TDTheme.of(context).brandNormalColor),
142+
),
143+
const SizedBox(width: 10),
144+
TDProgress(
145+
type: TDProgressType.micro,
146+
value: microProgressValue,
147+
onTap: _resetMicroProgress,
148+
label: TDIconLabel(Icons.stop,
149+
color: TDTheme.of(context).brandNormalColor),
150+
),
151+
],
152+
);
153+
}
154+
155+
@Demo(group: 'progress')
156+
Widget _buildPrimary(BuildContext context) {
157+
return const TDProgress(
158+
type: TDProgressType.linear,
159+
progressStatus: TDProgressStatus.primary,
160+
value: 0.8,
161+
strokeWidth: 6,
162+
progressLabelPosition: TDProgressLabelPosition.right);
163+
}
164+
165+
@Demo(group: 'progress')
166+
Widget _buildWarning(BuildContext context) {
167+
return const TDProgress(
168+
type: TDProgressType.linear,
169+
progressStatus: TDProgressStatus.warning,
170+
value: 0.8,
171+
strokeWidth: 6,
172+
progressLabelPosition: TDProgressLabelPosition.right);
173+
}
174+
175+
@Demo(group: 'progress')
176+
Widget _buildDanger(BuildContext context) {
177+
return const TDProgress(
178+
type: TDProgressType.linear,
179+
progressStatus: TDProgressStatus.danger,
180+
value: 0.8,
181+
strokeWidth: 6,
182+
progressLabelPosition: TDProgressLabelPosition.right);
183+
}
184+
185+
@Demo(group: 'progress')
186+
Widget _buildSuccess(BuildContext context) {
187+
return const TDProgress(
188+
type: TDProgressType.linear,
189+
progressStatus: TDProgressStatus.success,
190+
value: 0.8,
191+
strokeWidth: 6,
192+
progressLabelPosition: TDProgressLabelPosition.right);
193+
}
194+
195+
@Demo(group: 'progress')
196+
Widget _buildCirclePrimary(BuildContext context) {
197+
return const TDProgress(
198+
type: TDProgressType.circular,
199+
progressStatus: TDProgressStatus.primary,
200+
value: 0.3);
201+
}
202+
203+
@Demo(group: 'progress')
204+
Widget _buildCircleWarning(BuildContext context) {
205+
return const TDProgress(
206+
type: TDProgressType.circular,
207+
progressStatus: TDProgressStatus.warning,
208+
value: 0.3);
209+
}
210+
211+
@Demo(group: 'progress')
212+
Widget _buildCircleDanger(BuildContext context) {
213+
return const TDProgress(
214+
type: TDProgressType.circular,
215+
progressStatus: TDProgressStatus.danger,
216+
value: 0.3);
217+
}
218+
219+
@Demo(group: 'progress')
220+
Widget _buildCircleSuccess(BuildContext context) {
221+
return const TDProgress(
222+
type: TDProgressType.circular,
223+
progressStatus: TDProgressStatus.success,
224+
value: 1);
225+
}
226+
227+
void _toggleProgress() {
228+
if (isProgressing) {
229+
// 暂停进度
230+
_timer?.cancel();
231+
setState(() {
232+
buttonLabel = const TDTextLabel('继续');
233+
isProgressing = false;
234+
});
235+
} else {
236+
// 开始或继续进度
237+
_timer?.cancel();
238+
_timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
239+
setState(() {
240+
if (progressValue < 1.0) {
241+
progressValue += 0.01;
242+
buttonLabel = TDTextLabel('${(progressValue * 100).toInt()}%');
243+
} else {
244+
_timer?.cancel();
245+
buttonLabel = const TDTextLabel('完成');
246+
isProgressing = false;
247+
}
248+
});
249+
});
250+
setState(() {
251+
isProgressing = true;
252+
});
253+
}
254+
}
255+
256+
void _resetProgress() {
257+
_timer?.cancel();
258+
setState(() {
259+
progressValue = 0.0;
260+
buttonLabel = const TDTextLabel('开始');
261+
isProgressing = false;
262+
});
263+
}
264+
265+
void _toggleMicroProgress() {
266+
setState(() {
267+
isPlaying = !isPlaying;
268+
});
269+
if (isPlaying) {
270+
_microTimer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
271+
setState(() {
272+
if (microProgressValue < 1.0) {
273+
microProgressValue += 0.01;
274+
} else {
275+
_microTimer?.cancel();
276+
isPlaying = false;
277+
microProgressValue = 0.0;
278+
}
279+
});
280+
});
281+
} else {
282+
_microTimer?.cancel();
283+
}
284+
}
285+
286+
void _resetMicroProgress() {
287+
_microTimer?.cancel();
288+
setState(() {
289+
isPlaying = false;
290+
microProgressValue = 0.0;
291+
});
292+
}
293+
}

0 commit comments

Comments
 (0)