feat:关于页面 FlowNumberText

lib/widgets/src/flow_number_text.dart

@@ -0,0 +1,54 @@
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:intl/intl.dart';
+
+class FlowNumberText extends HookConsumerWidget {
+  final int targetValue;
+  final Duration duration;
+  final TextStyle? style;
+  final Curve curve;
+
+  FlowNumberText(
+      {super.key,
+      required this.targetValue,
+      this.duration = const Duration(seconds: 1),
+      this.style,
+      this.curve = Curves.bounceOut});
+
+  final _formatter = NumberFormat.decimalPattern();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final value = useState<double>(0.0);
+    final timer = useState<Timer?>(null);
+
+    useEffect(() {
+      final totalTicks = duration.inMilliseconds ~/ 10;
+      var currentTick = 0;
+      if (value.value != 0) {
+        currentTick = (value.value / targetValue * totalTicks).toInt();
+      }
+
+      timer.value = Timer.periodic(const Duration(milliseconds: 10), (timer) {
+        final progress = curve.transform(currentTick / totalTicks);
+        value.value = (progress * targetValue).toDouble();
+
+        if (currentTick >= totalTicks) {
+          value.value = targetValue.toDouble();
+          timer.cancel();
+        } else {
+          currentTick++;
+        }
+      });
+
+      return timer.value?.cancel;
+    }, [targetValue]);
+
+    return Text(
+      _formatter.format(value.value.toInt()),
+      style: style,
+    );
+  }
+}

lib/widgets/widgets.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:fluent_ui/fluent_ui.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:go_router/go_router.dart';
@@ -159,9 +161,14 @@ class LoadingWidget<T> extends HookConsumerWidget {
   final T? data;
   final Future<T?> Function()? onLoadData;
   final Widget Function(BuildContext context, T data) childBuilder;
+  final Duration? autoRefreshDuration;
 
   const LoadingWidget(
-      {super.key, this.data, required this.childBuilder, this.onLoadData});
+      {super.key,
+      this.data,
+      required this.childBuilder,
+      this.onLoadData,
+      this.autoRefreshDuration});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -170,7 +177,14 @@ class LoadingWidget<T> extends HookConsumerWidget {
     useEffect(() {
       if (data == null && onLoadData != null) {
         _loadData(dataState, errorMsg);
-        return null;
+      }
+      if (autoRefreshDuration != null) {
+        final timer = Timer.periodic(autoRefreshDuration!, (timer) {
+          if (onLoadData != null) {
+            _loadData(dataState, errorMsg);
+          }
+        });
+        return timer.cancel;
       }
       return null;
     }, const []);
@@ -205,4 +219,4 @@ addPostFrameCallback(Function() callback) {
   WidgetsBinding.instance.addPostFrameCallback((_) {
     callback();
   });
-}
+}