merge: 合并 K87 下拉刷新完成后回弹

lib/core/widgets/app_pull_to_refresh.dart

@@ -9,10 +9,11 @@ import '../theme/app_colors.dart';
 
 const double _maxPullDistance = 96;
 const double _refreshThreshold = 56;
-const double _indicatorHeight = 64;
+const double _holdDistance = 56;
+const double _indicatorHeight = 56;
 const double _indicatorMaxOffset = 10;
 const Duration _arrowTurnDuration = Duration(milliseconds: 160);
-const Duration _retractDuration = Duration(milliseconds: 200);
+const Duration _settleDuration = Duration(milliseconds: 200);
 
 enum _PullState { idle, pull, armed, refreshing }
 
@@ -26,7 +27,7 @@ class AppPullToRefresh extends StatefulWidget {
   });
 
   static const AlwaysScrollableScrollPhysics physics =
-      AlwaysScrollableScrollPhysics(parent: BouncingScrollPhysics());
+      AlwaysScrollableScrollPhysics(parent: ClampingScrollPhysics());
 
   final Widget child;
   final Future<void> Function() onRefresh;
@@ -36,11 +37,28 @@ class AppPullToRefresh extends StatefulWidget {
   State<AppPullToRefresh> createState() => _AppPullToRefreshState();
 }
 
-class _AppPullToRefreshState extends State<AppPullToRefresh> {
+class _AppPullToRefreshState extends State<AppPullToRefresh>
+    with SingleTickerProviderStateMixin {
+  late final AnimationController _offsetController;
   _PullState _state = _PullState.idle;
-  double _pullDistance = 0;
   bool _refreshing = false;
 
+  @override
+  void initState() {
+    super.initState();
+    _offsetController = AnimationController(
+      vsync: this,
+      duration: _settleDuration,
+      upperBound: _maxPullDistance,
+    );
+  }
+
+  @override
+  void dispose() {
+    _offsetController.dispose();
+    super.dispose();
+  }
+
   bool _onScroll(ScrollNotification notification) {
     if (notification.depth != 0 || _refreshing) return false;
     if (notification is ScrollStartNotification) {
@@ -53,7 +71,7 @@ class _AppPullToRefreshState extends State<AppPullToRefresh> {
       }
     } else if (notification is OverscrollNotification) {
       if (notification.dragDetails != null) {
-        _setPullDistance(_pullDistance - notification.overscroll);
+        _setPullDistance(_offsetController.value - notification.overscroll);
       }
     } else if (notification is ScrollEndNotification) {
       _release();
@@ -68,19 +86,17 @@ class _AppPullToRefreshState extends State<AppPullToRefresh> {
         : distance > 0
         ? _PullState.pull
         : _PullState.idle;
-    if (distance == _pullDistance && state == _state) return;
+    _offsetController.value = distance;
-    setState(() {
+    if (state != _state) setState(() => _state = state);
-      _pullDistance = distance;
-      _state = state;
-    });
   }
 
   void _release() {
+    if (_refreshing) return;
     if (_state == _PullState.armed) {
       unawaited(_refresh());
     } else if (_state == _PullState.pull) {
+      _offsetController.value = 0;
       setState(() {
-        _pullDistance = 0;
         _state = _PullState.idle;
       });
     }
@@ -90,53 +106,74 @@ class _AppPullToRefreshState extends State<AppPullToRefresh> {
     if (_refreshing) return;
     _refreshing = true;
     setState(() => _state = _PullState.refreshing);
+    final refreshFuture = Future<void>.sync(widget.onRefresh);
     try {
-      await widget.onRefresh();
+      await _animateOffsetTo(_holdDistance);
+      await refreshFuture;
     } finally {
-      await Future<void>.delayed(_retractDuration);
       if (mounted) {
-        setState(() {
+        await _animateOffsetTo(0);
-          _pullDistance = 0;
+        if (mounted) {
-          _state = _PullState.idle;
+          setState(() {
-          _refreshing = false;
+            _state = _PullState.idle;
-        });
+            _refreshing = false;
+          });
+        }
       }
     }
   }
 
+  Future<void> _animateOffsetTo(double target) async {
+    try {
+      await _offsetController
+          .animateTo(target, duration: _settleDuration, curve: Curves.easeOut)
+          .orCancel;
+    } on TickerCanceled {
+      // The overlay can be removed while the refresh future is still pending.
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return NotificationListener<ScrollNotification>(
       onNotification: _onScroll,
-      child: Stack(
+      child: AnimatedBuilder(
-        fit: StackFit.expand,
+        animation: _offsetController,
-        children: [
+        child: Listener(
-          Listener(
+          onPointerUp: (_) => _release(),
-            onPointerUp: (_) => _release(),
+          onPointerCancel: (_) => _release(),
-            onPointerCancel: (_) => _release(),
+          child: widget.child,
-            child: widget.child,
+        ),
-          ),
+        builder: (context, child) {
-          if (_state != _PullState.idle)
+          final offset = _offsetController.value;
-            Positioned(
+          return Stack(
-              top: widget.edgeOffset,
+            fit: StackFit.expand,
-              left: 0,
+            children: [
-              right: 0,
+              Transform.translate(
-              child: IgnorePointer(child: _indicatorLayer(context)),
+                key: const Key('pull-refresh-content'),
-            ),
+                offset: Offset(0, offset),
-        ],
+                child: IgnorePointer(ignoring: _refreshing, child: child),
+              ),
+              if (_state != _PullState.idle && offset > 0)
+                Positioned(
+                  top: widget.edgeOffset,
+                  left: 0,
+                  right: 0,
+                  child: IgnorePointer(child: _indicatorLayer(context, offset)),
+                ),
+            ],
+          );
+        },
       ),
     );
   }
 
-  Widget _indicatorLayer(BuildContext context) {
+  Widget _indicatorLayer(BuildContext context, double offset) {
-    final progress = (_pullDistance / _refreshThreshold).clamp(0.0, 1.0);
+    final progress = (offset / _refreshThreshold).clamp(0.0, 1.0);
-    final opacity = _state == _PullState.refreshing
-        ? 1.0
-        : progress.clamp(0.0, 1.0);
     return SizedBox(
       height: _indicatorHeight,
       child: Opacity(
-        opacity: opacity,
+        opacity: progress,
         child: Transform.translate(
           offset: Offset(0, _indicatorMaxOffset * progress),
           child: Align(

test/core/app_pull_to_refresh_test.dart

@@ -9,76 +9,92 @@ import 'package:fruitshorts/core/widgets/app_pull_to_refresh.dart';
 import 'package:fruitshorts/l10n/app_localizations.dart';
 
 void main() {
-  testWidgets(
+  testWidgets('should_hold_pull_offset_until_refresh_completes', (
-    'should_show_pull_release_and_refreshing_states_and_refresh_once',
+    tester,
-    (tester) async {
+  ) async {
-      final refresh = Completer<void>();
+    final refresh = Completer<void>();
-      var calls = 0;
+    var calls = 0;
-      await tester.pumpWidget(
+    await tester.pumpWidget(
-        MaterialApp(
+      MaterialApp(
-          locale: const Locale('en'),
+        locale: const Locale('en'),
-          localizationsDelegates: AppLocalizations.localizationsDelegates,
+        localizationsDelegates: AppLocalizations.localizationsDelegates,
-          supportedLocales: AppLocalizations.supportedLocales,
+        supportedLocales: AppLocalizations.supportedLocales,
-          home: Scaffold(
+        home: Scaffold(
-            body: AppPullToRefresh(
+          body: AppPullToRefresh(
-              onRefresh: () {
+            onRefresh: () {
-                calls++;
+              calls++;
-                return refresh.future;
+              return refresh.future;
-              },
+            },
-              child: ListView(
+            child: ListView(
-                key: const Key('pull-refresh-list'),
+              key: const Key('pull-refresh-list'),
-                physics: AppPullToRefresh.physics,
+              physics: AppPullToRefresh.physics,
-                children: const [SizedBox(height: 1200)],
+              children: const [SizedBox(height: 1200)],
-              ),
             ),
           ),
         ),
-      );
+      ),
+    );
 
-      final list = find.byKey(const Key('pull-refresh-list'));
+    final list = find.byKey(const Key('pull-refresh-list'));
-      final gesture = await tester.startGesture(tester.getCenter(list));
+    final gesture = await tester.startGesture(tester.getCenter(list));
-      await gesture.moveBy(const Offset(0, 30));
+    await gesture.moveBy(const Offset(0, 30));
-      await tester.pump();
+    await tester.pump();
-      final scrollable = tester.state<ScrollableState>(
+    final scrollable = tester.state<ScrollableState>(
-        find.descendant(of: list, matching: find.byType(Scrollable)).first,
+      find.descendant(of: list, matching: find.byType(Scrollable)).first,
-      );
+    );
-      expect(scrollable.position.pixels, lessThan(0));
+    expect(scrollable.position.pixels, 0);
-      expect(find.text('Pull to refresh'), findsOneWidget);
+    expect(find.text('Pull to refresh'), findsOneWidget);
-      expect(
+    expect(_contentOffset(tester), greaterThan(0));
-        tester.widget<Text>(find.text('Pull to refresh')).style?.color,
+    expect(
-        AppColors.blue,
+      tester.widget<Text>(find.text('Pull to refresh')).style?.color,
-      );
+      AppColors.blue,
+    );
 
-      await gesture.moveBy(const Offset(0, 120));
+    await gesture.moveBy(const Offset(0, 120));
-      await tester.pump();
+    await tester.pump();
-      expect(find.text('Release to refresh'), findsOneWidget);
+    expect(find.text('Release to refresh'), findsOneWidget);
-      expect(
+    expect(
-        tester.widget<Text>(find.text('Release to refresh')).style?.color,
+      tester.widget<Text>(find.text('Release to refresh')).style?.color,
-        AppColors.blue,
+      AppColors.blue,
-      );
+    );
 
-      await gesture.up();
+    await gesture.up();
-      await tester.pump();
+    await tester.pump();
-      expect(find.text('Refreshing…'), findsOneWidget);
+    expect(find.text('Refreshing…'), findsOneWidget);
-      expect(
+    expect(
-        tester.widget<Text>(find.text('Refreshing…')).style?.color,
+      tester.widget<Text>(find.text('Refreshing…')).style?.color,
-        AppColors.blue,
+      AppColors.blue,
-      );
+    );
-      expect(calls, 1);
+    expect(calls, 1);
+    expect(_contentOffset(tester), greaterThan(56));
+    expect(find.byType(CircularProgressIndicator), findsOneWidget);
 
-      final duplicate = await tester.startGesture(
+    await tester.pump(const Duration(milliseconds: 200));
-        tester.getCenter(find.byKey(const Key('pull-refresh-list'))),
+    expect(_contentOffset(tester), closeTo(56, 0.1));
-      );
+    await tester.pump(const Duration(milliseconds: 300));
-      await duplicate.moveBy(const Offset(0, 70));
+    expect(_contentOffset(tester), closeTo(56, 0.1));
-      await duplicate.up();
-      await tester.pump();
-      expect(calls, 1);
 
-      refresh.complete();
+    final duplicate = await tester.startGesture(
-      await tester.pump();
+      tester.getCenter(find.byKey(const Key('pull-refresh-list'))),
-      await tester.pump(const Duration(milliseconds: 200));
+    );
-      expect(find.text('Refreshing…'), findsNothing);
+    await duplicate.moveBy(const Offset(0, 70));
-      expect(find.text('Pull to refresh'), findsNothing);
+    await duplicate.up();
-    },
+    await tester.pump();
+    expect(calls, 1);
+    expect(_contentOffset(tester), closeTo(56, 0.1));
+
+    refresh.complete();
+    await tester.pump();
+    await tester.pumpAndSettle();
+    expect(_contentOffset(tester), closeTo(0, 0.1));
+    expect(find.text('Refreshing…'), findsNothing);
+    expect(find.text('Pull to refresh'), findsNothing);
+  });
+}
+
+double _contentOffset(WidgetTester tester) {
+  final transform = tester.widget<Transform>(
+    find.byKey(const Key('pull-refresh-content')),
   );
+  return transform.transform.storage[13];
 }