fix(player): 使用根Overlay渲染飘心
This commit is contained in:
1 parent
e7afd316f8
commit
30b43878ab
3 files changed
+122
-31
No files matched your search
@@ -14,6 +14,7 @@ class PlayerDoubleTapHeartBurst extends StatefulWidget {
|
|||||||
required this.burstId,
|
required this.burstId,
|
||||||
required this.onCompleted,
|
required this.onCompleted,
|
||||||
this.random,
|
this.random,
|
||||||
|
this.origin = Offset.zero,
|
||||||
});
|
});
|
||||||
|
|
||||||
static const int minParticleCount = 4;
|
static const int minParticleCount = 4;
|
||||||
@@ -23,6 +24,7 @@ class PlayerDoubleTapHeartBurst extends StatefulWidget {
|
|||||||
final int burstId;
|
final int burstId;
|
||||||
final VoidCallback onCompleted;
|
final VoidCallback onCompleted;
|
||||||
final Random? random;
|
final Random? random;
|
||||||
|
final Offset origin;
|
||||||
|
|
||||||
@visibleForTesting
|
@visibleForTesting
|
||||||
static double opacityForProgress(double progress) =>
|
static double opacityForProgress(double progress) =>
|
||||||
@@ -94,7 +96,9 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
|
|||||||
debugPrint('[player] phase=heart-burst-init id=${widget.burstId}');
|
debugPrint('[player] phase=heart-burst-init id=${widget.burstId}');
|
||||||
debugPrint(
|
debugPrint(
|
||||||
'[player] phase=heart-burst-start '
|
'[player] phase=heart-burst-start '
|
||||||
'id=${widget.burstId} count=${_particles.length}',
|
'id=${widget.burstId} count=${_particles.length} '
|
||||||
|
'at=${widget.origin.dx.toStringAsFixed(1)},'
|
||||||
|
'${widget.origin.dy.toStringAsFixed(1)}',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
_controller = AnimationController(
|
_controller = AnimationController(
|
||||||
@@ -168,7 +172,7 @@ class _PlayerDoubleTapHeartBurstState extends State<PlayerDoubleTapHeartBurst>
|
|||||||
final scale = PlayerDoubleTapHeartBurst.scaleForProgress(progress);
|
final scale = PlayerDoubleTapHeartBurst.scaleForProgress(progress);
|
||||||
return Positioned(
|
return Positioned(
|
||||||
left: particle.drift * move - particle.size / 2,
|
left: particle.drift * move - particle.size / 2,
|
||||||
top: -particle.travel * move,
|
top: -particle.size / 2 - particle.travel * move,
|
||||||
child: Opacity(
|
child: Opacity(
|
||||||
opacity: PlayerDoubleTapHeartBurst.opacityForProgress(progress),
|
opacity: PlayerDoubleTapHeartBurst.opacityForProgress(progress),
|
||||||
child: Transform.scale(
|
child: Transform.scale(
|
||||||
|
|||||||
@@ -50,12 +50,18 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
|
|||||||
int _downSerial = 0;
|
int _downSerial = 0;
|
||||||
int _tapSeq = 0;
|
int _tapSeq = 0;
|
||||||
int _nextHeartBurstId = 0;
|
int _nextHeartBurstId = 0;
|
||||||
final List<({int id, Offset position})> _heartBursts = [];
|
final Map<int, OverlayEntry> _heartOverlayEntries = {};
|
||||||
|
|
||||||
@override
|
@override
|
||||||
void dispose() {
|
void dispose() {
|
||||||
_tapSeq++;
|
_tapSeq++;
|
||||||
_singleTapTimer?.cancel();
|
_singleTapTimer?.cancel();
|
||||||
|
for (final entry in _heartOverlayEntries.values.toList()) {
|
||||||
|
entry
|
||||||
|
..remove()
|
||||||
|
..dispose();
|
||||||
|
}
|
||||||
|
_heartOverlayEntries.clear();
|
||||||
super.dispose();
|
super.dispose();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -81,26 +87,6 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
|
|||||||
onLongPressEnd: (_) => widget.onInteractionEnd(),
|
onLongPressEnd: (_) => widget.onInteractionEnd(),
|
||||||
onLongPressCancel: widget.onInteractionEnd,
|
onLongPressCancel: widget.onInteractionEnd,
|
||||||
),
|
),
|
||||||
if (_heartBursts.isNotEmpty)
|
|
||||||
Positioned.fill(
|
|
||||||
child: IgnorePointer(
|
|
||||||
child: Stack(
|
|
||||||
clipBehavior: Clip.none,
|
|
||||||
children: [
|
|
||||||
for (final burst in _heartBursts)
|
|
||||||
Positioned(
|
|
||||||
left: burst.position.dx,
|
|
||||||
top: burst.position.dy - 10,
|
|
||||||
child: PlayerDoubleTapHeartBurst(
|
|
||||||
key: ValueKey(burst.id),
|
|
||||||
burstId: burst.id,
|
|
||||||
onCompleted: () => _removeHeartBurst(burst.id),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
|
||||||
),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
],
|
],
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
@@ -142,7 +128,7 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
|
|||||||
void _handleTapUp(TapUpDetails details) {
|
void _handleTapUp(TapUpDetails details) {
|
||||||
final now = _now();
|
final now = _now();
|
||||||
if (_doubleTapDown || _singleTapBlocked(now)) {
|
if (_doubleTapDown || _singleTapBlocked(now)) {
|
||||||
_handleDoubleTapLike(details.localPosition);
|
_handleDoubleTapLike(details.globalPosition);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
final serial = _downSerial;
|
final serial = _downSerial;
|
||||||
@@ -160,24 +146,56 @@ class _PlayerTapGestureRegionState extends State<PlayerTapGestureRegion> {
|
|||||||
_singleTapTimer = pending;
|
_singleTapTimer = pending;
|
||||||
}
|
}
|
||||||
|
|
||||||
void _handleDoubleTapLike(Offset position) {
|
void _handleDoubleTapLike(Offset globalPosition) {
|
||||||
_blockSingleTapUntil = _now().add(_singleTapDelay);
|
_blockSingleTapUntil = _now().add(_singleTapDelay);
|
||||||
_cancelPendingSingleTap();
|
_cancelPendingSingleTap();
|
||||||
if (!widget.doubleTapEnabled || _likedThisPair) return;
|
if (!widget.doubleTapEnabled || _likedThisPair) return;
|
||||||
_likedThisPair = true;
|
_likedThisPair = true;
|
||||||
final id = _nextHeartBurstId++;
|
_showHeartBurst(globalPosition);
|
||||||
setState(() => _heartBursts.add((id: id, position: position)));
|
|
||||||
if (kDebugMode) {
|
if (kDebugMode) {
|
||||||
debugPrint(
|
debugPrint(
|
||||||
'[player] phase=double-tap-like episodeId=${widget.episodeId}',
|
'[player] phase=double-tap-like episodeId=${widget.episodeId}',
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
widget.onDoubleTapLike?.call(position);
|
widget.onDoubleTapLike?.call(globalPosition);
|
||||||
}
|
}
|
||||||
|
|
||||||
void _removeHeartBurst(int id) {
|
void _showHeartBurst(Offset globalPosition) {
|
||||||
if (!mounted) return;
|
final overlay = Overlay.maybeOf(context, rootOverlay: true);
|
||||||
setState(() => _heartBursts.removeWhere((burst) => burst.id == id));
|
if (overlay == null) return;
|
||||||
|
final overlayBox = overlay.context.findRenderObject();
|
||||||
|
final origin = overlayBox is RenderBox
|
||||||
|
? overlayBox.globalToLocal(globalPosition)
|
||||||
|
: globalPosition;
|
||||||
|
final id = _nextHeartBurstId++;
|
||||||
|
late final OverlayEntry entry;
|
||||||
|
entry = OverlayEntry(
|
||||||
|
builder: (context) => Positioned(
|
||||||
|
left: origin.dx,
|
||||||
|
top: origin.dy,
|
||||||
|
child: IgnorePointer(
|
||||||
|
child: PlayerDoubleTapHeartBurst(
|
||||||
|
key: ValueKey('heart-overlay-$id'),
|
||||||
|
burstId: id,
|
||||||
|
origin: origin,
|
||||||
|
onCompleted: () => _removeHeartOverlay(id),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
_heartOverlayEntries[id] = entry;
|
||||||
|
overlay.insert(entry);
|
||||||
|
}
|
||||||
|
|
||||||
|
void _removeHeartOverlay(int id) {
|
||||||
|
final entry = _heartOverlayEntries.remove(id);
|
||||||
|
if (entry == null) return;
|
||||||
|
entry
|
||||||
|
..remove()
|
||||||
|
..dispose();
|
||||||
|
if (kDebugMode) {
|
||||||
|
debugPrint('[player] phase=heart-burst-entry-removed id=$id');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
void _handleLongPressStart(LongPressStartDetails details, double width) {
|
void _handleLongPressStart(LongPressStartDetails details, double width) {
|
||||||
|
|||||||
@@ -143,6 +143,75 @@ void main() {
|
|||||||
expect(tester.state(burstFinder), same(burstState));
|
expect(tester.state(burstFinder), same(burstState));
|
||||||
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
|
expect(find.byKey(const Key('double-tap-heart-0')), findsOneWidget);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
testWidgets('heart overlay starts at global tap position and is cleaned up', (
|
||||||
|
tester,
|
||||||
|
) async {
|
||||||
|
final key = GlobalKey<_HarnessState>();
|
||||||
|
final clock = _TestClock();
|
||||||
|
await _pumpHarness(
|
||||||
|
tester,
|
||||||
|
FakeInteractionRepository(),
|
||||||
|
FakeHaptics(),
|
||||||
|
key,
|
||||||
|
clock,
|
||||||
|
);
|
||||||
|
const tapPosition = Offset(120, 220);
|
||||||
|
|
||||||
|
await tester.tapAt(tapPosition);
|
||||||
|
clock.advance(const Duration(milliseconds: 100));
|
||||||
|
await tester.pump(const Duration(milliseconds: 100));
|
||||||
|
await tester.tapAt(tapPosition);
|
||||||
|
await tester.pump();
|
||||||
|
await tester.pump(const Duration(milliseconds: 1));
|
||||||
|
|
||||||
|
final firstHeart = find.byKey(const Key('double-tap-heart-0'));
|
||||||
|
expect(firstHeart, findsOneWidget);
|
||||||
|
expect(
|
||||||
|
(tester.getCenter(firstHeart) - tapPosition).distance,
|
||||||
|
lessThanOrEqualTo(1),
|
||||||
|
);
|
||||||
|
|
||||||
|
await tester.pumpWidget(const SizedBox.shrink());
|
||||||
|
await tester.pump();
|
||||||
|
expect(find.byType(PlayerDoubleTapHeartBurst), findsNothing);
|
||||||
|
});
|
||||||
|
|
||||||
|
testWidgets('multiple heart overlays run independently', (tester) async {
|
||||||
|
final key = GlobalKey<_HarnessState>();
|
||||||
|
final clock = _TestClock();
|
||||||
|
await _pumpHarness(
|
||||||
|
tester,
|
||||||
|
FakeInteractionRepository(),
|
||||||
|
FakeHaptics(),
|
||||||
|
key,
|
||||||
|
clock,
|
||||||
|
);
|
||||||
|
|
||||||
|
await tester.tapAt(const Offset(100, 180));
|
||||||
|
clock.advance(const Duration(milliseconds: 100));
|
||||||
|
await tester.pump(const Duration(milliseconds: 100));
|
||||||
|
await tester.tapAt(const Offset(100, 180));
|
||||||
|
await tester.pump();
|
||||||
|
await tester.pump(const Duration(milliseconds: 100));
|
||||||
|
|
||||||
|
clock.advance(const Duration(milliseconds: 400));
|
||||||
|
await tester.pump(const Duration(milliseconds: 400));
|
||||||
|
await tester.tapAt(const Offset(260, 360));
|
||||||
|
clock.advance(const Duration(milliseconds: 100));
|
||||||
|
await tester.pump(const Duration(milliseconds: 100));
|
||||||
|
await tester.tapAt(const Offset(260, 360));
|
||||||
|
await tester.pump();
|
||||||
|
await tester.pump(const Duration(milliseconds: 1));
|
||||||
|
|
||||||
|
expect(find.byType(PlayerDoubleTapHeartBurst), findsNWidgets(2));
|
||||||
|
expect(find.byKey(const ValueKey('heart-overlay-0')), findsOneWidget);
|
||||||
|
expect(find.byKey(const ValueKey('heart-overlay-1')), findsOneWidget);
|
||||||
|
|
||||||
|
await tester.pumpWidget(const SizedBox.shrink());
|
||||||
|
await tester.pump();
|
||||||
|
expect(find.byType(PlayerDoubleTapHeartBurst), findsNothing);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
Future<void> _pumpHarness(
|
Future<void> _pumpHarness(
|
||||||
|
|||||||
Reference in new issue
Block a user