From 6f376c64c15b4446f814ea595f4f90bf8f779f03 Mon Sep 17 00:00:00 2001 From: Dubhe Date: Tue, 23 Jul 2024 22:56:34 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(td=5Fcount=5Fdown):=20=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0=E6=AD=A3=E5=90=91=E8=AE=A1=E6=97=B6=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../example/lib/page/td_count_down_page.dart | 54 ++++++++++++------- .../components/count_down/td_count_down.dart | 44 +++++++++++---- .../count_down/td_count_down_style.dart | 8 +++ 3 files changed, 75 insertions(+), 31 deletions(-) diff --git a/tdesign-component/example/lib/page/td_count_down_page.dart b/tdesign-component/example/lib/page/td_count_down_page.dart index 49615f774..8e147bb35 100644 --- a/tdesign-component/example/lib/page/td_count_down_page.dart +++ b/tdesign-component/example/lib/page/td_count_down_page.dart @@ -34,6 +34,15 @@ class TDCountDownPage extends StatelessWidget { return const CodeWrapper(builder: _buildMillisecondSimple); }, ), + ExampleItem( + ignoreCode: true, + desc: '正向计时', + center: false, + padding: const EdgeInsets.only(left: 16), + builder: (BuildContext context) { + return const CodeWrapper(builder: _buildUpSimple); + }, + ), ExampleItem( ignoreCode: true, desc: '带方形底', @@ -81,9 +90,9 @@ class TDCountDownPage extends StatelessWidget { return Container( alignment: Alignment.topLeft, child: - Wrap(spacing: 8, direction: Axis.vertical, children: [ + const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -92,7 +101,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -101,7 +110,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -122,9 +131,9 @@ class TDCountDownPage extends StatelessWidget { return Container( alignment: Alignment.topLeft, child: - Wrap(spacing: 8, direction: Axis.vertical, children: [ + const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -133,7 +142,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -142,7 +151,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -163,9 +172,9 @@ class TDCountDownPage extends StatelessWidget { return Container( alignment: Alignment.topLeft, child: - Wrap(spacing: 8, direction: Axis.vertical, children: [ + const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -174,7 +183,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -183,7 +192,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -204,9 +213,9 @@ class TDCountDownPage extends StatelessWidget { return Container( alignment: Alignment.topLeft, child: - Wrap(spacing: 8, direction: Axis.vertical, children: [ + const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -215,7 +224,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -224,7 +233,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -245,9 +254,9 @@ class TDCountDownPage extends StatelessWidget { return Container( alignment: Alignment.topLeft, child: - Wrap(spacing: 8, direction: Axis.vertical, children: [ + const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -256,7 +265,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -265,7 +274,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -293,6 +302,11 @@ TDCountDown _buildMillisecondSimple(BuildContext context) { return const TDCountDown(time: 60 * 60 * 1000, millisecond: true); } +@Demo(group: 'countDown') +TDCountDown _buildUpSimple(BuildContext context) { + return const TDCountDown(time: 60 * 60 * 1000, millisecond: true, direction: TDCountDownDirection.up,); +} + @Demo(group: 'countDown') TDCountDown _buildSquareSimple(BuildContext context) { return const TDCountDown( diff --git a/tdesign-component/lib/src/components/count_down/td_count_down.dart b/tdesign-component/lib/src/components/count_down/td_count_down.dart index f3f96a5e6..c60828f97 100644 --- a/tdesign-component/lib/src/components/count_down/td_count_down.dart +++ b/tdesign-component/lib/src/components/count_down/td_count_down.dart @@ -39,6 +39,7 @@ class TDCountDown extends StatefulWidget { this.style, this.onChange, this.onFinish, + this.direction = TDCountDownDirection.down }) : super(key: key); /// 是否自动开始倒计时 @@ -74,6 +75,9 @@ class TDCountDown extends StatefulWidget { /// 倒计时结束时触发回调 final VoidCallback? onFinish; + /// 计时方向，默认倒计时 + final TDCountDownDirection direction; + @override _TDCountDownState createState() => _TDCountDownState(); } @@ -86,9 +90,15 @@ class _TDCountDownState extends State @override void initState() { super.initState(); - _time = widget.time; - if (_time > 0 && widget.autoStart) { - startTimer(); + if (widget.direction == TDCountDownDirection.down) { + _time = widget.time; + if (_time > 0 && widget.autoStart) { + startTimer(); + } + } else { + if (_time == 0 && widget.autoStart) { + startTimer(); + } } } @@ -101,15 +111,27 @@ class _TDCountDownState extends State void startTimer() { var tempMilliseconds = 0; _ticker = createTicker((Duration elapsed) { - if (_time > 0) { - setState(() { - _time = max(_time - (elapsed.inMilliseconds - tempMilliseconds), 0); - }); - tempMilliseconds = elapsed.inMilliseconds; - widget.onChange?.call(_time); + if (widget.direction == TDCountDownDirection.down) { + if (_time > 0) { + setState(() { + _time = max(_time - (elapsed.inMilliseconds - tempMilliseconds), 0); + }); + tempMilliseconds = elapsed.inMilliseconds; + widget.onChange?.call(_time); + } else { + _ticker.dispose(); + widget.onFinish?.call(); + } } else { - _ticker.dispose(); - widget.onFinish?.call(); + if (_time <= widget.time) { + setState(() { + _time = min(elapsed.inMilliseconds, widget.time); + }); + widget.onChange?.call(_time); + } else { + _ticker.dispose(); + widget.onFinish?.call(); + } } }); _ticker.start(); diff --git a/tdesign-component/lib/src/components/count_down/td_count_down_style.dart b/tdesign-component/lib/src/components/count_down/td_count_down_style.dart index 2385d8748..730d6fd89 100644 --- a/tdesign-component/lib/src/components/count_down/td_count_down_style.dart +++ b/tdesign-component/lib/src/components/count_down/td_count_down_style.dart @@ -1,6 +1,14 @@ import 'package:flutter/material.dart'; import '../../../tdesign_flutter.dart'; +/// 计时组件计时方向 +enum TDCountDownDirection { + /// 倒计时 + down, + /// 正向计时 + up +} + /// 倒计时组件尺寸 enum TDCountDownSize { /// 小 From 56c39e0184bd35a3358d18f1b92bacf2fa582f56 Mon Sep 17 00:00:00 2001 From: Dubhe Date: Sat, 27 Jul 2024 11:33:43 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(td=5Ftime=5Fcounter):=20CountDown?= =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=9B=B4=E5=90=8D=E4=B8=BATimeCounter?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tdesign-component/example/lib/config.dart | 8 +- ...wn_page.dart => td_time_counter_page.dart} | 196 +++++++++--------- .../td_time_counter.dart} | 46 ++-- .../td_time_counter_controller.dart} | 16 +- .../td_time_counter_style.dart} | 38 ++-- .../lib/src/theme/resource_delegate.dart | 10 +- tdesign-component/lib/tdesign_flutter.dart | 6 +- 7 files changed, 160 insertions(+), 160 deletions(-) rename tdesign-component/example/lib/page/{td_count_down_page.dart => td_time_counter_page.dart} (74%) rename tdesign-component/lib/src/components/{count_down/td_count_down.dart => time_counter/td_time_counter.dart} (85%) rename tdesign-component/lib/src/components/{count_down/td_count_down_controller.dart => time_counter/td_time_counter_controller.dart} (61%) rename tdesign-component/lib/src/components/{count_down/td_count_down_style.dart => time_counter/td_time_counter_style.dart} (84%) diff --git a/tdesign-component/example/lib/config.dart b/tdesign-component/example/lib/config.dart index 5689c5888..1d8fa0df0 100644 --- a/tdesign-component/example/lib/config.dart +++ b/tdesign-component/example/lib/config.dart @@ -16,7 +16,7 @@ import 'page/td_button_page.dart'; import 'page/td_cell_page.dart'; import 'page/td_checkbox_page.dart'; import 'page/td_collapse.dart'; -import 'page/td_count_down_page.dart'; +import 'page/td_time_counter_page.dart'; import 'page/td_date_picker_page.dart'; import 'page/td_dialog_page.dart'; import 'page/td_divider_page.dart'; @@ -154,9 +154,9 @@ Map> exampleMap = { ExamplePageModel( text: 'Cell 单元格', name: 'cell', pageBuilder: _wrapInheritedTheme((context) => const TDCellPage())), ExamplePageModel( - text: 'CountDown 倒计时', - name: 'count-down', - pageBuilder: _wrapInheritedTheme((context) => const TDCountDownPage())), + text: 'TimeCounter 计时器', + name: 'time-counter', + pageBuilder: _wrapInheritedTheme((context) => const TDTimeCounterPage())), ExamplePageModel( text: 'Collapse 折叠面板', name: 'collapse', diff --git a/tdesign-component/example/lib/page/td_count_down_page.dart b/tdesign-component/example/lib/page/td_time_counter_page.dart similarity index 74% rename from tdesign-component/example/lib/page/td_count_down_page.dart rename to tdesign-component/example/lib/page/td_time_counter_page.dart index 9cbe38876..a85a0d978 100644 --- a/tdesign-component/example/lib/page/td_count_down_page.dart +++ b/tdesign-component/example/lib/page/td_time_counter_page.dart @@ -3,8 +3,8 @@ import 'package:tdesign_flutter/tdesign_flutter.dart'; import '../../base/example_widget.dart'; import '../annotation/demo.dart'; -class TDCountDownPage extends StatelessWidget { - const TDCountDownPage({super.key}); +class TDTimeCounterPage extends StatelessWidget { + const TDTimeCounterPage({super.key}); @override Widget build(BuildContext context) { @@ -12,8 +12,8 @@ class TDCountDownPage extends StatelessWidget { color: TDTheme.of(context).grayColor2, child: ExamplePage( title: tdTitle(context), - desc: '用于实时展示倒计时数值。', - exampleCodeGroup: 'countDown', + desc: '用于实时展示计时数值。', + exampleCodeGroup: 'timeCounter', children: [ ExampleModule(title: '组件类型', children: [ ExampleItem( @@ -299,187 +299,187 @@ class TDCountDownPage extends StatelessWidget { } } -@Demo(group: 'countDown') -TDCountDown _buildSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000); +@Demo(group: 'timeCounter') +TDTimeCounter _buildSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000); } -@Demo(group: 'countDown') -TDCountDown _buildMillisecondSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, millisecond: true); +@Demo(group: 'timeCounter') +TDTimeCounter _buildMillisecondSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, millisecond: true); } -@Demo(group: 'countDown') -TDCountDown _buildUpSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, millisecond: true, direction: TDCountDownDirection.up,); +@Demo(group: 'timeCounter') +TDTimeCounter _buildUpSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, millisecond: true, direction: TDTimeCounterDirection.up,); } -@Demo(group: 'countDown') -TDCountDown _buildSquareSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, theme: TDCountDownTheme.square); +@Demo(group: 'timeCounter') +TDTimeCounter _buildSquareSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, theme: TDTimeCounterTheme.square); } -@Demo(group: 'countDown') -TDCountDown _buildRoundSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, theme: TDCountDownTheme.round); +@Demo(group: 'timeCounter') +TDTimeCounter _buildRoundSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, theme: TDTimeCounterTheme.round); } -@Demo(group: 'countDown') -TDCountDown _buildUnitSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, theme: TDCountDownTheme.square, splitWithUnit: true); +@Demo(group: 'timeCounter') +TDTimeCounter _buildUnitSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, theme: TDTimeCounterTheme.square, splitWithUnit: true); } -@Demo(group: 'countDown') -TDCountDown _buildCustomUnitSimple(BuildContext context) { - var style = TDCountDownStyle.generateStyle(context); +@Demo(group: 'timeCounter') +TDTimeCounter _buildCustomUnitSimple(BuildContext context) { + var style = TDTimeCounterStyle.generateStyle(context); style.timeColor = TDTheme.of(context).errorColor6; - return TDCountDown(time: 60 * 60 * 1000, splitWithUnit: true, style: style); + return TDTimeCounter(time: 60 * 60 * 1000, splitWithUnit: true, style: style); } -@Demo(group: 'countDown') -TDCountDown _buildSmallSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildSmallSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.small, + size: TDTimeCounterSize.small, ); } -@Demo(group: 'countDown') -TDCountDown _buildMediumSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildMediumSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.medium, + size: TDTimeCounterSize.medium, ); } -@Demo(group: 'countDown') -TDCountDown _buildLargeSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildLargeSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.large, + size: TDTimeCounterSize.large, ); } -@Demo(group: 'countDown') -TDCountDown _buildSquareSmallSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildSquareSmallSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.small, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.small, + theme: TDTimeCounterTheme.square, ); } -@Demo(group: 'countDown') -TDCountDown _buildSquareMediumSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildSquareMediumSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.medium, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.medium, + theme: TDTimeCounterTheme.square, ); } -@Demo(group: 'countDown') -TDCountDown _buildSquareLargeSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildSquareLargeSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.large, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.large, + theme: TDTimeCounterTheme.square, ); } -@Demo(group: 'countDown') -TDCountDown _buildRoundSmallSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildRoundSmallSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.small, - theme: TDCountDownTheme.round, + size: TDTimeCounterSize.small, + theme: TDTimeCounterTheme.round, ); } -@Demo(group: 'countDown') -TDCountDown _buildRoundMediumSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildRoundMediumSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.medium, - theme: TDCountDownTheme.round, + size: TDTimeCounterSize.medium, + theme: TDTimeCounterTheme.round, ); } -@Demo(group: 'countDown') -TDCountDown _buildRoundLargeSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildRoundLargeSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.large, - theme: TDCountDownTheme.round, + size: TDTimeCounterSize.large, + theme: TDTimeCounterTheme.round, ); } -@Demo(group: 'countDown') -TDCountDown _buildUnitSmallSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildUnitSmallSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.small, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.small, + theme: TDTimeCounterTheme.square, splitWithUnit: true, ); } -@Demo(group: 'countDown') -TDCountDown _buildUnitMediumSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildUnitMediumSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.medium, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.medium, + theme: TDTimeCounterTheme.square, splitWithUnit: true, ); } -@Demo(group: 'countDown') -TDCountDown _buildUnitLargeSize(BuildContext context) { - return const TDCountDown( +@Demo(group: 'timeCounter') +TDTimeCounter _buildUnitLargeSize(BuildContext context) { + return const TDTimeCounter( time: 60 * 60 * 1000, - size: TDCountDownSize.large, - theme: TDCountDownTheme.square, + size: TDTimeCounterSize.large, + theme: TDTimeCounterTheme.square, splitWithUnit: true, ); } -@Demo(group: 'countDown') -TDCountDown _buildCustomUnitSmallSize(BuildContext context) { - var style = TDCountDownStyle.generateStyle(context, size: TDCountDownSize.small); +@Demo(group: 'timeCounter') +TDTimeCounter _buildCustomUnitSmallSize(BuildContext context) { + var style = TDTimeCounterStyle.generateStyle(context, size: TDTimeCounterSize.small); style.timeColor = TDTheme.of(context).errorColor6; - return TDCountDown( + return TDTimeCounter( time: 60 * 60 * 1000, splitWithUnit: true, style: style, ); } -@Demo(group: 'countDown') -TDCountDown _buildCustomUnitMediumSize(BuildContext context) { - var style = TDCountDownStyle.generateStyle(context, size: TDCountDownSize.medium); +@Demo(group: 'timeCounter') +TDTimeCounter _buildCustomUnitMediumSize(BuildContext context) { + var style = TDTimeCounterStyle.generateStyle(context, size: TDTimeCounterSize.medium); style.timeColor = TDTheme.of(context).errorColor6; - return TDCountDown( + return TDTimeCounter( time: 60 * 60 * 1000, splitWithUnit: true, style: style, ); } -@Demo(group: 'countDown') -TDCountDown _buildCustomUnitLargeSize(BuildContext context) { - var style = TDCountDownStyle.generateStyle(context, size: TDCountDownSize.large); +@Demo(group: 'timeCounter') +TDTimeCounter _buildCustomUnitLargeSize(BuildContext context) { + var style = TDTimeCounterStyle.generateStyle(context, size: TDTimeCounterSize.large); style.timeColor = TDTheme.of(context).errorColor6; - return TDCountDown( + return TDTimeCounter( time: 60 * 60 * 1000, splitWithUnit: true, style: style, ); } -@Demo(group: 'countDown') +@Demo(group: 'timeCounter') Widget _buildControl(BuildContext context) { - var controller = TDCountDownController(); + var controller = TDTimeCounterController(); return Wrap( direction: Axis.vertical, spacing: 8, @@ -529,7 +529,7 @@ Widget _buildControl(BuildContext context) { ), ], ), - TDCountDown( + TDTimeCounter( time: 60 * 60 * 1000, controller: controller, autoStart: false, diff --git a/tdesign-component/lib/src/components/count_down/td_count_down.dart b/tdesign-component/lib/src/components/time_counter/td_time_counter.dart similarity index 85% rename from tdesign-component/lib/src/components/count_down/td_count_down.dart rename to tdesign-component/lib/src/components/time_counter/td_time_counter.dart index 7d47a5289..9f7fa379c 100644 --- a/tdesign-component/lib/src/components/count_down/td_count_down.dart +++ b/tdesign-component/lib/src/components/time_counter/td_time_counter.dart @@ -18,21 +18,21 @@ String _getMark(String format, String? type) { } /// 倒计时组件 -class TDCountDown extends StatefulWidget { - const TDCountDown({ +class TDTimeCounter extends StatefulWidget { + const TDTimeCounter({ Key? key, this.autoStart = true, this.content = 'default', this.format = 'HH:mm:ss', this.millisecond = false, - this.size = TDCountDownSize.medium, + this.size = TDTimeCounterSize.medium, this.splitWithUnit = false, - this.theme = TDCountDownTheme.defaultTheme, + this.theme = TDTimeCounterTheme.defaultTheme, required this.time, this.style, this.onChange, this.onFinish, - this.direction = TDCountDownDirection.down, + this.direction = TDTimeCounterDirection.down, this.controller, }) : super(key: key); @@ -49,19 +49,19 @@ class TDCountDown extends StatefulWidget { final bool millisecond; /// 倒计时尺寸 - final TDCountDownSize size; + final TDTimeCounterSize size; /// 使用时间单位分割 final bool splitWithUnit; /// 倒计时风格 - final TDCountDownTheme theme; + final TDTimeCounterTheme theme; /// 必需；倒计时时长，单位毫秒 final int time; /// 自定义样式，有则优先用它，没有则根据size和theme选取 - final TDCountDownStyle? style; + final TDTimeCounterStyle? style; /// 时间变化时触发回调 final Function(int time)? onChange; @@ -70,18 +70,18 @@ class TDCountDown extends StatefulWidget { final VoidCallback? onFinish; /// 计时方向，默认倒计时 - final TDCountDownDirection direction; + final TDTimeCounterDirection direction; /// 控制器，可控制开始/暂停/继续/重置 - final TDCountDownController? controller; + final TDTimeCounterController? controller; @override - _TDCountDownState createState() => _TDCountDownState(); + _TDTimeCounterState createState() => _TDTimeCounterState(); } -class _TDCountDownState extends State +class _TDTimeCounterState extends State with SingleTickerProviderStateMixin { - late TDCountDownStyle _style; + late TDTimeCounterStyle _style; late Map timeUnitMap; Ticker? _ticker; int _time = 0; @@ -90,7 +90,7 @@ class _TDCountDownState extends State @override void initState() { super.initState(); - if (widget.direction == TDCountDownDirection.down) { + if (widget.direction == TDTimeCounterDirection.down) { _time = widget.time; } if (widget.autoStart) { @@ -103,7 +103,7 @@ class _TDCountDownState extends State void didChangeDependencies() { super.didChangeDependencies(); _style = widget.style ?? - TDCountDownStyle.generateStyle( + TDTimeCounterStyle.generateStyle( context, size: widget.size, theme: widget.theme, @@ -119,7 +119,7 @@ class _TDCountDownState extends State } @override - void didUpdateWidget(TDCountDown oldWidget) { + void didUpdateWidget(TDTimeCounter oldWidget) { super.didUpdateWidget(oldWidget); if (widget.controller != oldWidget.controller) { oldWidget.controller?.removeListener(_onControllerChanged); @@ -141,9 +141,9 @@ class _TDCountDownState extends State } _tempMilliseconds = 0; _ticker ??= createTicker((Duration elapsed) { - if ((widget.direction == TDCountDownDirection.down && _time > 0) || widget.direction == TDCountDownDirection.up && _time <= widget.time) { + if ((widget.direction == TDTimeCounterDirection.down && _time > 0) || widget.direction == TDTimeCounterDirection.up && _time <= widget.time) { setState(() { - if (widget.direction == TDCountDownDirection.down) { + if (widget.direction == TDTimeCounterDirection.down) { _time = max(_time - (elapsed.inMilliseconds - _tempMilliseconds), 0); } else { _time = min(_time + (elapsed.inMilliseconds - _tempMilliseconds), widget.time); @@ -174,7 +174,7 @@ class _TDCountDownState extends State /// 重置倒计时 void resetTimer([int? time]) { _ticker?.stop(); - if (widget.direction == TDCountDownDirection.down) { + if (widget.direction == TDTimeCounterDirection.down) { _time = time ?? widget.time; } else { _time = 0; @@ -187,16 +187,16 @@ class _TDCountDownState extends State void _onControllerChanged() { switch (widget.controller?.value) { - case TDCountDownStatus.start: + case TDTimeCounterStatus.start: startTimer(); break; - case TDCountDownStatus.pause: + case TDTimeCounterStatus.pause: pauseTimer(); break; - case TDCountDownStatus.resume: + case TDTimeCounterStatus.resume: resumeTimer(); break; - case TDCountDownStatus.reset: + case TDTimeCounterStatus.reset: resetTimer(widget.controller?.time); break; default: diff --git a/tdesign-component/lib/src/components/count_down/td_count_down_controller.dart b/tdesign-component/lib/src/components/time_counter/td_time_counter_controller.dart similarity index 61% rename from tdesign-component/lib/src/components/count_down/td_count_down_controller.dart rename to tdesign-component/lib/src/components/time_counter/td_time_counter_controller.dart index dc4c3d2a8..bd8af6f4e 100644 --- a/tdesign-component/lib/src/components/count_down/td_count_down_controller.dart +++ b/tdesign-component/lib/src/components/time_counter/td_time_counter_controller.dart @@ -1,7 +1,7 @@ import 'package:flutter/cupertino.dart'; /// 倒计时组件控制器转态 -enum TDCountDownStatus { +enum TDTimeCounterStatus { /// 开始 start, @@ -19,8 +19,8 @@ enum TDCountDownStatus { } /// 倒计时组件控制器，可控制开始(`start()`)/暂停(`pause()`)/继续(`resume()`)/重置(`reset([int? time])`) -class TDCountDownController extends ValueNotifier { - TDCountDownController() : super(TDCountDownStatus.idle); +class TDTimeCounterController extends ValueNotifier { + TDTimeCounterController() : super(TDTimeCounterStatus.idle); int? _time; @@ -28,27 +28,27 @@ class TDCountDownController extends ValueNotifier { /// 开始 void start() { - value = TDCountDownStatus.start; + value = TDTimeCounterStatus.start; } /// 暂停 void pause() { - value = TDCountDownStatus.pause; + value = TDTimeCounterStatus.pause; } /// 继续 void resume() { - value = TDCountDownStatus.resume; + value = TDTimeCounterStatus.resume; } /// 重置 void reset([int? time]) { - if (value == TDCountDownStatus.reset && _time != time) { + if (value == TDTimeCounterStatus.reset && _time != time) { _time = time; notifyListeners(); } else { _time = time; - value = TDCountDownStatus.reset; + value = TDTimeCounterStatus.reset; } } } diff --git a/tdesign-component/lib/src/components/count_down/td_count_down_style.dart b/tdesign-component/lib/src/components/time_counter/td_time_counter_style.dart similarity index 84% rename from tdesign-component/lib/src/components/count_down/td_count_down_style.dart rename to tdesign-component/lib/src/components/time_counter/td_time_counter_style.dart index 0f2a4ef65..bb9b6ae21 100644 --- a/tdesign-component/lib/src/components/count_down/td_count_down_style.dart +++ b/tdesign-component/lib/src/components/time_counter/td_time_counter_style.dart @@ -2,7 +2,7 @@ import 'package:flutter/material.dart'; import '../../../tdesign_flutter.dart'; /// 计时组件计时方向 -enum TDCountDownDirection { +enum TDTimeCounterDirection { /// 倒计时 down, /// 正向计时 @@ -10,7 +10,7 @@ enum TDCountDownDirection { } /// 倒计时组件尺寸 -enum TDCountDownSize { +enum TDTimeCounterSize { /// 小 small, @@ -22,7 +22,7 @@ enum TDCountDownSize { } /// 倒计时组件风格 -enum TDCountDownTheme { +enum TDTimeCounterTheme { /// 默认 defaultTheme, @@ -34,8 +34,8 @@ enum TDCountDownTheme { } /// 倒计时组件样式 -class TDCountDownStyle { - TDCountDownStyle({ +class TDTimeCounterStyle { + TDTimeCounterStyle({ this.timeWidth, this.timeHeight, this.timePadding, @@ -99,17 +99,17 @@ class TDCountDownStyle { double? space; /// 生成默认样式 - TDCountDownStyle.generateStyle( + TDTimeCounterStyle.generateStyle( BuildContext context, { - TDCountDownSize? size, - TDCountDownTheme? theme, + TDTimeCounterSize? size, + TDTimeCounterTheme? theme, bool? splitWithUnit, }) { timeFontFamily = TDTheme.defaultData().numberFontFamily; late Font? font; - switch (size ?? TDCountDownSize.medium) { - case TDCountDownSize.small: - if (theme == TDCountDownTheme.defaultTheme) { + switch (size ?? TDTimeCounterSize.medium) { + case TDTimeCounterSize.small: + if (theme == TDTimeCounterTheme.defaultTheme) { timeWidth = timeHeight = null; font = TDTheme.of(context).fontBodyMedium; timeFontSize = splitFontSize = font?.size ?? 14; @@ -122,8 +122,8 @@ class TDCountDownStyle { } space = TDTheme.of(context).spacer4 / 2; break; - case TDCountDownSize.medium: - if (theme == TDCountDownTheme.defaultTheme) { + case TDTimeCounterSize.medium: + if (theme == TDTimeCounterTheme.defaultTheme) { timeWidth = timeHeight = null; font = TDTheme.of(context).fontBodyLarge; timeFontSize = splitFontSize = font?.size ?? 16; @@ -136,8 +136,8 @@ class TDCountDownStyle { } space = TDTheme.of(context).spacer8 / 2; break; - case TDCountDownSize.large: - if (theme == TDCountDownTheme.defaultTheme) { + case TDTimeCounterSize.large: + if (theme == TDTimeCounterTheme.defaultTheme) { timeWidth = timeHeight = null; font = TDTheme.of(context).fontBodyExtraLarge; timeFontSize = splitFontSize = font?.size ?? 18; @@ -151,8 +151,8 @@ class TDCountDownStyle { space = TDTheme.of(context).spacer12 / 2; } - switch (theme ?? TDCountDownTheme.defaultTheme) { - case TDCountDownTheme.round: + switch (theme ?? TDTimeCounterTheme.defaultTheme) { + case TDTimeCounterTheme.round: timeBox = BoxDecoration( shape: BoxShape.circle, color: TDTheme.of(context).errorColor6, @@ -160,7 +160,7 @@ class TDCountDownStyle { timeColor = TDTheme.of(context).fontWhColor1; splitColor = TDTheme.of(context).errorColor6; break; - case TDCountDownTheme.square: + case TDTimeCounterTheme.square: timeBox = BoxDecoration( shape: BoxShape.rectangle, borderRadius: BorderRadius.circular(TDTheme.of(context).radiusSmall), @@ -169,7 +169,7 @@ class TDCountDownStyle { timeColor = TDTheme.of(context).fontWhColor1; splitColor = TDTheme.of(context).errorColor6; break; - case TDCountDownTheme.defaultTheme: + case TDTimeCounterTheme.defaultTheme: timeBox = null; timeColor = splitColor = TDTheme.of(context).fontGyColor1; timeWidth = null; diff --git a/tdesign-component/lib/src/theme/resource_delegate.dart b/tdesign-component/lib/src/theme/resource_delegate.dart index caa6bcb08..f85264acb 100644 --- a/tdesign-component/lib/src/theme/resource_delegate.dart +++ b/tdesign-component/lib/src/theme/resource_delegate.dart @@ -86,19 +86,19 @@ abstract class TDResourceDelegate { /// [TDRefreshHeader] 松开刷新 String get releaseRefresh; - /// [TDCountDown] 天 + /// [TDTimeCounter] 天 String get days; - /// [TDCountDown] 时 + /// [TDTimeCounter] 时 String get hours; - /// [TDCountDown] 分 + /// [TDTimeCounter] 分 String get minutes; - /// [TDCountDown] 秒 + /// [TDTimeCounter] 秒 String get seconds; - /// [TDCountDown] 毫秒 + /// [TDTimeCounter] 毫秒 String get milliseconds; } diff --git a/tdesign-component/lib/tdesign_flutter.dart b/tdesign-component/lib/tdesign_flutter.dart index 3efc7f50e..d0f12b8ba 100644 --- a/tdesign-component/lib/tdesign_flutter.dart +++ b/tdesign-component/lib/tdesign_flutter.dart @@ -13,9 +13,9 @@ export 'src/components/checkbox/td_check_box.dart'; export 'src/components/checkbox/td_check_box_group.dart'; export 'src/components/collapse/td_collapse.dart'; export 'src/components/collapse/td_collapse_panel.dart'; -export 'src/components/count_down/td_count_down.dart'; -export 'src/components/count_down/td_count_down_controller.dart'; -export 'src/components/count_down/td_count_down_style.dart'; +export 'src/components/time_counter/td_time_counter.dart'; +export 'src/components/time_counter/td_time_counter_controller.dart'; +export 'src/components/time_counter/td_time_counter_style.dart'; export 'src/components/dialog/td_dialog.dart'; export 'src/components/divider/td_divider.dart'; export 'src/components/drawer/td_drawer.dart'; From a0944f31af674295195b2c2f4d2325d9b64b745d Mon Sep 17 00:00:00 2001 From: Dubhe Date: Sat, 27 Jul 2024 11:53:24 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feat(td=5Ftime=5Fcounter):=20=E6=AD=A3?= =?UTF-8?q?=E5=90=91=E8=AE=A1=E6=97=B6=E5=A2=9E=E5=8A=A0=E9=87=8D=E7=BD=AE?= =?UTF-8?q?=E5=8F=AF=E9=87=8D=E8=AE=BE=E6=97=B6=E9=97=B4=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/src/components/time_counter/td_time_counter.dart | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/tdesign-component/lib/src/components/time_counter/td_time_counter.dart b/tdesign-component/lib/src/components/time_counter/td_time_counter.dart index 9f7fa379c..854bebb9d 100644 --- a/tdesign-component/lib/src/components/time_counter/td_time_counter.dart +++ b/tdesign-component/lib/src/components/time_counter/td_time_counter.dart @@ -86,10 +86,12 @@ class _TDTimeCounterState extends State Ticker? _ticker; int _time = 0; int _tempMilliseconds = 0; + int _maxTime = 0; @override void initState() { super.initState(); + _maxTime = widget.time; if (widget.direction == TDTimeCounterDirection.down) { _time = widget.time; } @@ -141,12 +143,12 @@ class _TDTimeCounterState extends State } _tempMilliseconds = 0; _ticker ??= createTicker((Duration elapsed) { - if ((widget.direction == TDTimeCounterDirection.down && _time > 0) || widget.direction == TDTimeCounterDirection.up && _time <= widget.time) { + if ((widget.direction == TDTimeCounterDirection.down && _time > 0) || widget.direction == TDTimeCounterDirection.up && _time <= _maxTime) { setState(() { if (widget.direction == TDTimeCounterDirection.down) { _time = max(_time - (elapsed.inMilliseconds - _tempMilliseconds), 0); } else { - _time = min(_time + (elapsed.inMilliseconds - _tempMilliseconds), widget.time); + _time = min(_time + (elapsed.inMilliseconds - _tempMilliseconds), _maxTime); } }); _tempMilliseconds = elapsed.inMilliseconds; @@ -178,6 +180,7 @@ class _TDTimeCounterState extends State _time = time ?? widget.time; } else { _time = 0; + _maxTime = time ?? widget.time; } setState(() {}); if (widget.autoStart) {