diff --git a/tdesign-component/example/lib/config.dart b/tdesign-component/example/lib/config.dart index c787754fe..38616571e 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'; @@ -158,10 +158,9 @@ Map> exampleMap = { ExamplePageModel( text: 'Cell 单元格', name: 'cell', pageBuilder: _wrapInheritedTheme((context) => const TDCellPage())), ExamplePageModel( - text: 'CountDown 倒计时', - name: 'count-down', - pageName: '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 67% 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 e1a07a1a8..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( @@ -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: '带方形底', @@ -80,9 +89,9 @@ class TDCountDownPage extends StatelessWidget { builder: (BuildContext context) { return Container( alignment: Alignment.topLeft, - child: Wrap(spacing: 8, direction: Axis.vertical, children: [ + child: const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -91,7 +100,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -100,7 +109,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -120,9 +129,9 @@ class TDCountDownPage extends StatelessWidget { builder: (BuildContext context) { return Container( alignment: Alignment.topLeft, - child: Wrap(spacing: 8, direction: Axis.vertical, children: [ + child: const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -131,7 +140,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -140,7 +149,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -160,9 +169,9 @@ class TDCountDownPage extends StatelessWidget { builder: (BuildContext context) { return Container( alignment: Alignment.topLeft, - child: Wrap(spacing: 8, direction: Axis.vertical, children: [ + child: const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -171,7 +180,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -180,7 +189,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -200,9 +209,9 @@ class TDCountDownPage extends StatelessWidget { builder: (BuildContext context) { return Container( alignment: Alignment.topLeft, - child: Wrap(spacing: 8, direction: Axis.vertical, children: [ + child: const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -211,7 +220,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -220,7 +229,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -240,9 +249,9 @@ class TDCountDownPage extends StatelessWidget { builder: (BuildContext context) { return Container( alignment: Alignment.topLeft, - child: Wrap(spacing: 8, direction: Axis.vertical, children: [ + child: const Wrap(spacing: 8, direction: Axis.vertical, children: [ Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('小'), @@ -251,7 +260,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('中'), @@ -260,7 +269,7 @@ class TDCountDownPage extends StatelessWidget { ], ), Row( - children: const [ + children: [ SizedBox( width: 80, child: Text('大'), @@ -290,182 +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: 'timeCounter') +TDTimeCounter _buildMillisecondSimple(BuildContext context) { + return const TDTimeCounter(time: 60 * 60 * 1000, millisecond: true); } -@Demo(group: 'countDown') -TDCountDown _buildMillisecondSimple(BuildContext context) { - return const TDCountDown(time: 60 * 60 * 1000, millisecond: true); +@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, @@ -515,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 74% 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 806abcb43..854bebb9d 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,20 +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 = TDTimeCounterDirection.down, this.controller, }) : super(key: key); @@ -48,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; @@ -68,24 +69,32 @@ class TDCountDown extends StatefulWidget { /// 倒计时结束时触发回调 final VoidCallback? onFinish; + /// 计时方向,默认倒计时 + final TDTimeCounterDirection direction; + /// 控制器,可控制开始/暂停/继续/重置 - final TDCountDownController? controller; + final TDTimeCounterController? controller; @override - _TDCountDownState createState() => _TDCountDownState(); + _TDTimeCounterState createState() => _TDTimeCounterState(); } -class _TDCountDownState extends State with SingleTickerProviderStateMixin { - late TDCountDownStyle _style; +class _TDTimeCounterState extends State + with SingleTickerProviderStateMixin { + late TDTimeCounterStyle _style; late Map timeUnitMap; Ticker? _ticker; int _time = 0; int _tempMilliseconds = 0; + int _maxTime = 0; @override void initState() { super.initState(); - _time = widget.time; + _maxTime = widget.time; + if (widget.direction == TDTimeCounterDirection.down) { + _time = widget.time; + } if (widget.autoStart) { startTimer(); } @@ -96,7 +105,7 @@ class _TDCountDownState extends State with SingleTickerProviderStat void didChangeDependencies() { super.didChangeDependencies(); _style = widget.style ?? - TDCountDownStyle.generateStyle( + TDTimeCounterStyle.generateStyle( context, size: widget.size, theme: widget.theme, @@ -112,7 +121,7 @@ class _TDCountDownState extends State with SingleTickerProviderStat } @override - void didUpdateWidget(TDCountDown oldWidget) { + void didUpdateWidget(TDTimeCounter oldWidget) { super.didUpdateWidget(oldWidget); if (widget.controller != oldWidget.controller) { oldWidget.controller?.removeListener(_onControllerChanged); @@ -134,13 +143,19 @@ class _TDCountDownState extends State with SingleTickerProviderStat } _tempMilliseconds = 0; _ticker ??= createTicker((Duration elapsed) { - if (_time > 0) { - _time = max(_time - (elapsed.inMilliseconds - _tempMilliseconds), 0); + 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), _maxTime); + } + }); _tempMilliseconds = elapsed.inMilliseconds; widget.onChange?.call(_time); } else { _time = 0; - _ticker!.stop(); + _ticker!.dispose(); widget.onFinish?.call(); } setState(() {}); @@ -161,7 +176,12 @@ class _TDCountDownState extends State with SingleTickerProviderStat /// 重置倒计时 void resetTimer([int? time]) { _ticker?.stop(); - _time = time ?? widget.time; + if (widget.direction == TDTimeCounterDirection.down) { + _time = time ?? widget.time; + } else { + _time = 0; + _maxTime = time ?? widget.time; + } setState(() {}); if (widget.autoStart) { startTimer(); @@ -170,16 +190,16 @@ class _TDCountDownState extends State with SingleTickerProviderStat 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: @@ -190,7 +210,8 @@ class _TDCountDownState extends State with SingleTickerProviderStat @override Widget build(BuildContext context) { if (widget.content == 'default') { - return Row(mainAxisSize: MainAxisSize.min, children: _buildTimeWidget(context)); + return Row( + mainAxisSize: MainAxisSize.min, children: _buildTimeWidget(context)); } if (widget.content is Function) { return widget.content(_time); @@ -199,7 +220,9 @@ class _TDCountDownState extends State with SingleTickerProviderStat } List _buildTimeWidget(BuildContext context) { - var format = widget.millisecond ? '${widget.format.replaceAll(':SSS', '')}:SSS' : widget.format; + var format = widget.millisecond + ? '${widget.format.replaceAll(':SSS', '')}:SSS' + : widget.format; var matches = _timeReg.allMatches(format); var timeMap = _getTimeMap(_time); return matches @@ -266,6 +289,12 @@ class _TDCountDownState extends State with SingleTickerProviderStat var minutes = _toDigits(duration.inMinutes.remainder(60), 2); var seconds = _toDigits(duration.inSeconds.remainder(60), 2); var milliseconds = _toDigits(duration.inMilliseconds.remainder(1000), 3); - return {'DD': days, 'HH': hours, 'mm': minutes, 'ss': seconds, 'SSS': milliseconds}; + return { + 'DD': days, + 'HH': hours, + 'mm': minutes, + 'ss': seconds, + 'SSS': milliseconds + }; } } 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 83% 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 5f5e658c5..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 @@ -1,8 +1,16 @@ import 'package:flutter/material.dart'; import '../../../tdesign_flutter.dart'; +/// 计时组件计时方向 +enum TDTimeCounterDirection { + /// 倒计时 + down, + /// 正向计时 + up +} + /// 倒计时组件尺寸 -enum TDCountDownSize { +enum TDTimeCounterSize { /// 小 small, @@ -14,7 +22,7 @@ enum TDCountDownSize { } /// 倒计时组件风格 -enum TDCountDownTheme { +enum TDTimeCounterTheme { /// 默认 defaultTheme, @@ -26,8 +34,8 @@ enum TDCountDownTheme { } /// 倒计时组件样式 -class TDCountDownStyle { - TDCountDownStyle({ +class TDTimeCounterStyle { + TDTimeCounterStyle({ this.timeWidth, this.timeHeight, this.timePadding, @@ -91,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; @@ -114,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; @@ -128,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; @@ -143,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, @@ -152,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), @@ -161,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';