Skip to content

Commit 2b41341

Browse files
CORCTONCORCTON
committed
优化重构
1 parent 4269db5 commit 2b41341

5 files changed

Lines changed: 757 additions & 244 deletions

File tree

‎progress/.metadata‎

Lines changed: 0 additions & 45 deletions
This file was deleted.

‎progress/lib/main.dart‎

Lines changed: 151 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import 'package:flutter/material.dart';
2-
import 'package:tdesign_flutter/tdesign_flutter.dart';
3-
import './progress.dart';
2+
// 假设Progress组件在一个单独的文件中
3+
import 'td_progress.dart';
4+
import 'dart:async';
45

56
void main() {
67
runApp(const MyApp());
@@ -11,9 +12,12 @@ class MyApp extends StatelessWidget {
1112

1213
@override
1314
Widget build(BuildContext context) {
14-
return const MaterialApp(
15-
title: 'Flutter Demo',
16-
home: Home(title: 'Flutter Demo Home Page'),
15+
return MaterialApp(
16+
title: '进度条演示',
17+
theme: ThemeData(
18+
primarySwatch: Colors.blue,
19+
),
20+
home: const Home(title: '进度条演示主页'),
1721
);
1822
}
1923
}
@@ -28,66 +32,172 @@ class Home extends StatefulWidget {
2832
}
2933

3034
class _HomeState extends State<Home> {
31-
TextLabel buttonLabel = const TextLabel("50%");
35+
TDLabelWidget buttonLabel = const TDTextLabel("0%");
36+
double progressValue = 0.0;
37+
Timer? _timer;
38+
bool isProgressing = false;
39+
40+
// 新增：用于微型按钮进度条的状态
41+
bool isPlaying = false;
42+
double microProgressValue = 0.0;
43+
Timer? _microTimer;
44+
45+
@override
46+
void dispose() {
47+
_timer?.cancel();
48+
_microTimer?.cancel();
49+
super.dispose();
50+
}
51+
52+
void _toggleProgress() {
53+
if (isProgressing) {
54+
// 暂停进度
55+
_timer?.cancel();
56+
setState(() {
57+
buttonLabel = const TDTextLabel("继续");
58+
isProgressing = false;
59+
});
60+
} else {
61+
// 开始或继续进度
62+
_timer?.cancel();
63+
_timer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
64+
setState(() {
65+
if (progressValue < 1.0) {
66+
progressValue += 0.01;
67+
buttonLabel = TDTextLabel("${(progressValue * 100).toInt()}%");
68+
} else {
69+
_timer?.cancel();
70+
buttonLabel = const TDTextLabel("完成");
71+
isProgressing = false;
72+
}
73+
});
74+
});
75+
setState(() {
76+
isProgressing = true;
77+
});
78+
}
79+
}
80+
81+
void _resetProgress() {
82+
_timer?.cancel();
83+
setState(() {
84+
progressValue = 0.0;
85+
buttonLabel = const TDTextLabel("开始");
86+
isProgressing = false;
87+
});
88+
}
89+
// 新增：控制微型按钮进度条的方法
90+
void _toggleMicroProgress() {
91+
setState(() {
92+
isPlaying = !isPlaying;
93+
});
94+
if (isPlaying) {
95+
_microTimer = Timer.periodic(const Duration(milliseconds: 100), (timer) {
96+
setState(() {
97+
if (microProgressValue < 1.0) {
98+
microProgressValue += 0.01;
99+
} else {
100+
_microTimer?.cancel();
101+
isPlaying = false;
102+
microProgressValue = 0.0;
103+
}
104+
});
105+
});
106+
} else {
107+
_microTimer?.cancel();
108+
}
109+
}
110+
111+
void _resetMicroProgress() {
112+
_microTimer?.cancel();
113+
setState(() {
114+
isPlaying = false;
115+
microProgressValue = 0.0;
116+
});
117+
}
118+
32119
@override
33120
Widget build(BuildContext context) {
34121
return Scaffold(
35122
appBar: AppBar(title: const Text('自定义百分比进度条')),
36123
body: ListView(
37124
padding: const EdgeInsets.all(16.0),
38125
children: [
39-
_buildSection("线形进度条", [
40-
_buildProgressItem("无确定值", Progress.linear(strokeWidth: 5)),
41-
_buildProgressItem("有确定值,小于等于10%", Progress.linear(value: 0.1)),
42-
_buildProgressItem("有确定值，大于10%", Progress.linear(value: 0.5)),
43-
_buildProgressItem("label靠左，大于10%", Progress.linear(
44-
value: 0.5, progressLabelPosition: ProgressLabelPosition.left)),
45-
_buildProgressItem("自定义label", Progress.linear(value: 0.5, label: TextLabel("百分之50"))),
46-
_buildProgressItem("label靠右，大于10%", Progress.linear(
47-
value: 0.5, progressLabelPosition: ProgressLabelPosition.right)),
48-
_buildProgressItem("更改status", Progress.linear(value: 0.5, progressStatus: ProgressStatus.warning)),
49-
_buildProgressItem("更改status,且Label在外", Progress.linear(
126+
_buildSection("线性进度条", [
127+
_buildProgressItem("不确定", const TDProgress(type: TDProgressType.linear, strokeWidth: 5)),
128+
_buildProgressItem("确定, ≤ 10%", const TDProgress(type: TDProgressType.linear, value: 0.1)),
129+
_buildProgressItem("确定, > 10%", const TDProgress(type: TDProgressType.linear, value: 0.5)),
130+
_buildProgressItem("左侧标签, > 10%", const TDProgress(
131+
type: TDProgressType.linear, value: 0.5, progressLabelPosition: TDProgressLabelPosition.left)),
132+
_buildProgressItem("自定义标签", const TDProgress(type: TDProgressType.linear, value: 0.5, label: TDTextLabel("百分之50"))),
133+
_buildProgressItem("右侧标签, > 10%", const TDProgress(
134+
type: TDProgressType.linear, value: 0.5, progressLabelPosition: TDProgressLabelPosition.right)),
135+
_buildProgressItem("警告状态", const TDProgress(type: TDProgressType.linear, value: 0.5, progressStatus: TDProgressStatus.warning)),
136+
_buildProgressItem("危险状态, 外部标签", const TDProgress(
137+
type: TDProgressType.linear,
50138
value: 0.5,
51-
progressStatus: ProgressStatus.danger,
52-
progressLabelPosition: ProgressLabelPosition.right)),
139+
progressStatus: TDProgressStatus.danger,
140+
progressLabelPosition: TDProgressLabelPosition.right)),
53141
]),
54-
_buildSection("环形进度条", [
55-
Row(
142+
_buildSection("圆形进度条", [
143+
const Row(
56144
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
57145
children: [
58-
Progress.circular(),
59-
Progress.circular(value: 0.5),
60-
Progress.circular(
61-
value: 0.5, progressStatus: ProgressStatus.success),
62-
Progress.circular(
63-
value: 0.7, progressStatus: ProgressStatus.warning),
146+
TDProgress(type: TDProgressType.circular),
147+
TDProgress(type: TDProgressType.circular, value: 0.5),
148+
TDProgress(
149+
type: TDProgressType.circular, value: 0.5, progressStatus: TDProgressStatus.success),
150+
TDProgress(
151+
type: TDProgressType.circular, value: 0.7, progressStatus: TDProgressStatus.warning),
64152
],
65153
),
66154
]),
67155
_buildSection("微型进度条", [
68-
Progress.micro(value: 0.3),
156+
const TDProgress(type: TDProgressType.micro, value: 0.3),
69157
]),
70158
_buildSection("微型按钮进度条", [
71159
Row(
160+
children: [
161+
TDProgress(type: TDProgressType.micro, value: 0.3, onTap: (){}, label: const TDIconLabel(Icons.play_arrow, color: Colors.blue)),
162+
const SizedBox(width: 10),
163+
TDProgress(type: TDProgressType.micro, value: 0.3, onTap: (){}, label: const TDIconLabel(Icons.pause, color: Colors.blue)),
164+
const SizedBox(width: 10),
165+
TDProgress(type: TDProgressType.micro, value: 0.3, onTap: (){}, label: const TDIconLabel(Icons.stop, color: Colors.blue))
166+
]
167+
)
168+
]),
169+
_buildSection("交互式微型按钮进度条", [
170+
Row(
171+
mainAxisAlignment: MainAxisAlignment.start,
72172
children: [
73-
Progress.micro(value: 0.3, onTap: (){}, label: const IconLabel(Icons.play_arrow, color: Colors.blue)),
74-
const SizedBox(width: 10),
75-
Progress.micro(value: 0.3, onTap: (){}, label: const IconLabel(Icons.pause, color: Colors.blue)),
173+
TDProgress(
174+
type: TDProgressType.micro,
175+
value: microProgressValue,
176+
onTap: _toggleMicroProgress,
177+
label: TDIconLabel(isPlaying ? Icons.pause : Icons.play_arrow, color: Colors.blue),
178+
),
76179
const SizedBox(width: 10),
77-
Progress.micro(value: 0.3, onTap: (){}, label: const IconLabel(Icons.stop, color: Colors.blue))
78-
]
79-
)
180+
TDProgress(
181+
type: TDProgressType.micro,
182+
value: microProgressValue,
183+
onTap: _resetMicroProgress,
184+
label: const TDIconLabel(Icons.stop, color: Colors.blue),
185+
),
186+
],
187+
),
188+
const SizedBox(height: 10),
189+
Text('点击播放/暂停，点击停止重置进度', style: Theme.of(context).textTheme.bodyMedium),
80190
]),
81191
_buildSection("按钮进度条", [
82-
Progress.button(
83-
onTap: (){
84-
setState(() {
85-
buttonLabel = buttonLabel.data == "50%" ? const TextLabel("继续") : const TextLabel("50%");
86-
});
87-
},
88-
value: .5,
192+
TDProgress(
193+
type: TDProgressType.button,
194+
onTap: _toggleProgress,
195+
onLongPress: _resetProgress,
196+
value: progressValue,
89197
label: buttonLabel,
90198
),
199+
const SizedBox(height: 10),
200+
Text('点击开始/暂停进度，长按重置进度', style: Theme.of(context).textTheme.bodyMedium),
91201
])
92202
],
93203
),

progress/lib/progress.dart renamed to progress/lib/old_progress.dart

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -122,9 +122,9 @@ class Progress {
122122
ProgressLabelPosition.inside,
123123
double strokeWidth = 60.0,
124124
Color? color,
125-
Color backgroundColor = Colors.blue,
125+
Color backgroundColor = const Color(0xFF0052da),
126126
BorderRadiusGeometry borderRadius =
127-
const BorderRadius.all(Radius.circular(10)),
127+
const BorderRadius.all(Radius.circular(6)),
128128
VoidCallback? onTap,
129129
VoidCallback? onLongPress,
130130
bool showLabel = true}) {
@@ -382,7 +382,6 @@ class _ProgressIndicatorState<T extends LabelWidget>
382382
height: widget.strokeWidth,
383383
decoration: BoxDecoration(
384384
color: widget.backgroundColor,
385-
borderRadius: widget.borderRadius,
386385
),
387386
);
388387
}
@@ -454,7 +453,7 @@ class _ProgressIndicatorState<T extends LabelWidget>
454453
break;
455454
case _ProgressType.button:
456455
iconSize = widget.strokeWidth * 0.8;
457-
fontSize = widget.strokeWidth * 0.4;
456+
fontSize = widget.strokeWidth * 0.3;
458457
fontWeight = FontWeight.normal;
459458
break;
460459
default:
@@ -512,18 +511,16 @@ class _ProgressIndicatorState<T extends LabelWidget>
512511
animation: _animation,
513512
builder: (context, child) {
514513
return GestureDetector(
515-
onTap: widget.onTap,
516-
onLongPress: widget.onLongPress,
517-
child: Stack(
518-
alignment: Alignment.center,
519-
children: [
520-
_buildMicroOutline(),
521-
if (widget.showLabel) _buildLabelWidget(Colors.black),
522-
],
523-
)
524-
);
525-
}
526-
);
514+
onTap: widget.onTap,
515+
onLongPress: widget.onLongPress,
516+
child: Stack(
517+
alignment: Alignment.center,
518+
children: [
519+
_buildMicroOutline(),
520+
if (widget.showLabel) _buildLabelWidget(Colors.black),
521+
],
522+
));
523+
});
527524
}
528525

529526
Widget _buildMicroOutline() {
@@ -548,22 +545,23 @@ class _ProgressIndicatorState<T extends LabelWidget>
548545
builder: (context, constraints) {
549546
final maxWidth = constraints.maxWidth;
550547
return AnimatedBuilder(
551-
animation: _animation,
552-
builder: (context, child) {
553-
final progressWidth = maxWidth * _animation.value;
554-
return GestureDetector(
555-
onTap: widget.onTap,
556-
onLongPress: widget.onLongPress,
557-
child: Stack(
558-
children: [
559-
_buildBackgroundContainer(),
560-
_buildButtonActiveContainer(progressWidth),
561-
if (widget.showLabel) _buildButtonLabel(maxWidth),
562-
],
563-
)
564-
);
565-
}
566-
);
548+
animation: _animation,
549+
builder: (context, child) {
550+
final progressWidth = maxWidth * _animation.value;
551+
return ClipRRect(
552+
borderRadius: widget.borderRadius,
553+
child: GestureDetector(
554+
onTap: widget.onTap,
555+
onLongPress: widget.onLongPress,
556+
child: Stack(
557+
children: [
558+
_buildBackgroundContainer(),
559+
_buildButtonActiveContainer(progressWidth),
560+
if (widget.showLabel) _buildButtonLabel(maxWidth),
561+
],
562+
)),
563+
);
564+
});
567565
},
568566
);
569567
}
@@ -575,8 +573,8 @@ class _ProgressIndicatorState<T extends LabelWidget>
575573
width: progressWidth,
576574
decoration: BoxDecoration(
577575
gradient: LinearGradient(
578-
colors: [widget.backgroundColor, Colors.white.withOpacity(.2)]),
579-
borderRadius: widget.borderRadius,
576+
colors: [widget.backgroundColor, Colors.white.withOpacity(.4)],
577+
),
580578
),
581579
);
582580
}

0 commit comments

Comments
 (0)