HCha/PiliPlus
1
0
Fork 0
mirror of https://github.com/HChaZZY/PiliPlus.git synced 2025-12-06 09:13:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

opt: ActionItem (#974)

Browse Source
This commit is contained in:
My-Responsitories
2025-08-10 00:29:58 +08:00
committed by GitHub
parent fac37e59aa
commit aaad7fc6dc
15 changed files with 550 additions and 531 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/pages/video/introduction/ugc/controller.dart
View File

@@ -269,7 +269,7 @@ class UgcIntroController extends CommonIntroController with ReloadMixin {
// 投币
@override
void actionCoinVideo() {
Future<void> actionCoinVideo() async {
if (!accountService.isLogin.value) {
SmartDialog.showToast('账号未登录');
return;

174
lib/pages/video/introduction/ugc/view.dart
View File

@@ -15,6 +15,7 @@ import 'package:PiliPlus/pages/video/introduction/ugc/controller.dart';
import 'package:PiliPlus/pages/video/introduction/ugc/widgets/action_item.dart';
import 'package:PiliPlus/pages/video/introduction/ugc/widgets/page.dart';
import 'package:PiliPlus/pages/video/introduction/ugc/widgets/season.dart';
import 'package:PiliPlus/pages/video/introduction/ugc/widgets/triple_state.dart';
import 'package:PiliPlus/utils/app_scheme.dart';
import 'package:PiliPlus/utils/context_ext.dart';
import 'package:PiliPlus/utils/date_util.dart';
@@ -51,11 +52,7 @@ class UgcIntroPanel extends StatefulWidget {
}
class _UgcIntroPanelState extends State<UgcIntroPanel>
with
AutomaticKeepAliveClientMixin,
SingleTickerProviderStateMixin,
TripleAnimMixin {
@override
with AutomaticKeepAliveClientMixin {
late UgcIntroController introController;
late final VideoDetailController videoDetailCtr =
Get.find<VideoDetailController>(tag: widget.heroTag);
@@ -509,86 +506,95 @@ class _UgcIntroPanelState extends State<UgcIntroPanel>
) {
return SizedBox(
height: 48,
child: Row(
children: [
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.thumbsUp),
selectIcon: const Icon(FontAwesomeIcons.solidThumbsUp),
onTap: () => handleAction(introController.actionLikeVideo),
selectStatus: introController.hasLike.value,
semanticsLabel: '点赞',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.like)
: null,
controller: animController,
animation: animation,
onStartTriple: onStartTriple,
onCancelTriple: onCancelTriple,
),
),
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.thumbsDown),
selectIcon: const Icon(FontAwesomeIcons.solidThumbsDown),
onTap: () => handleAction(introController.actionDislikeVideo),
selectStatus: introController.hasDislike.value,
semanticsLabel: '点踩',
text: "点踩",
),
),
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.b),
selectIcon: const Icon(FontAwesomeIcons.b),
onTap: introController.actionCoinVideo,
selectStatus: introController.hasCoin,
semanticsLabel: '投币',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.coin)
: null,
controller: animController,
animation: animation,
),
),
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.star),
selectIcon: const Icon(FontAwesomeIcons.solidStar),
onTap: () => introController.showFavBottomSheet(context),
onLongPress: () => introController.showFavBottomSheet(
context,
isLongPress: true,
child: TripleBuilder(
introController: introController,
builder: (context, tripleAnimation, onStartTriple, onCancelTriple) {
return Row(
children: [
Obx(
() => ActionItem(
animation: tripleAnimation,
icon: const Icon(FontAwesomeIcons.thumbsUp),
selectIcon: const Icon(FontAwesomeIcons.solidThumbsUp),
onTap: () => introController.handleAction(
introController.actionLikeVideo,
),
selectStatus: introController.hasLike.value,
semanticsLabel: '点赞',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.like)
: null,
onStartTriple: onStartTriple,
onCancelTriple: onCancelTriple,
),
),
selectStatus: introController.hasFav.value,
semanticsLabel: '收藏',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.favorite)
: null,
controller: animController,
animation: animation,
),
),
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.clock),
selectIcon: const Icon(FontAwesomeIcons.solidClock),
onTap: () => handleAction(introController.viewLater),
selectStatus: introController.hasLater.value,
semanticsLabel: '再看',
text: '再看',
),
),
ActionItem(
icon: const Icon(FontAwesomeIcons.shareFromSquare),
onTap: () => introController.actionShareVideo(context),
selectStatus: false,
semanticsLabel: '分享',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.share!)
: null,
),
],
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.thumbsDown),
selectIcon: const Icon(FontAwesomeIcons.solidThumbsDown),
onTap: () => introController.handleAction(
introController.actionDislikeVideo,
),
selectStatus: introController.hasDislike.value,
semanticsLabel: '点踩',
text: "点踩",
),
),
Obx(
() => ActionItem(
animation: tripleAnimation,
icon: const Icon(FontAwesomeIcons.b),
selectIcon: const Icon(FontAwesomeIcons.b),
onTap: () => introController.handleAction(
introController.actionCoinVideo,
),
selectStatus: introController.hasCoin,
semanticsLabel: '投币',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.coin)
: null,
),
),
Obx(
() => ActionItem(
animation: tripleAnimation,
icon: const Icon(FontAwesomeIcons.star),
selectIcon: const Icon(FontAwesomeIcons.solidStar),
onTap: () => introController.showFavBottomSheet(context),
onLongPress: () => introController.showFavBottomSheet(
context,
isLongPress: true,
),
selectStatus: introController.hasFav.value,
semanticsLabel: '收藏',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.favorite)
: null,
),
),
Obx(
() => ActionItem(
icon: const Icon(FontAwesomeIcons.clock),
selectIcon: const Icon(FontAwesomeIcons.solidClock),
onTap: () =>
introController.handleAction(introController.viewLater),
selectStatus: introController.hasLater.value,
semanticsLabel: '再看',
text: '再看',
),
),
ActionItem(
icon: const Icon(FontAwesomeIcons.shareFromSquare),
onTap: () => introController.actionShareVideo(context),
selectStatus: false,
semanticsLabel: '分享',
text: !isLoading
? NumUtil.numFormat(videoDetail.stat!.share!)
: null,
),
],
);
},
),
);
}

235
lib/pages/video/introduction/ugc/widgets/action_item.dart
View File

@@ -1,95 +1,6 @@
import 'dart:async' show Timer, FutureOr;
import 'dart:math' show pi;
import 'package:PiliPlus/pages/common/common_intro_controller.dart';
import 'package:PiliPlus/utils/feed_back.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show HapticFeedback;
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
mixin TripleAnimMixin<T extends StatefulWidget>
on SingleTickerProviderStateMixin<T> {
CommonIntroController get introController;
late AnimationController animController;
late Animation<double> animation;
late int _lastTime;
Timer? _timer;
bool get _hasTriple =>
introController.hasLike.value &&
introController.hasCoin &&
introController.hasFav.value;
bool isProcessing = false;
Future<void> handleAction(FutureOr Function() action) async {
if (!isProcessing) {
isProcessing = true;
await action();
isProcessing = false;
}
}
@override
void initState() {
super.initState();
animController = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1500),
reverseDuration: const Duration(milliseconds: 400),
);
animation = Tween<double>(begin: 0, end: -2 * pi).animate(
CurvedAnimation(
parent: animController,
curve: Curves.easeInOut,
),
);
}
void onStartTriple() {
_lastTime = DateTime.now().millisecondsSinceEpoch;
_timer ??= Timer(const Duration(milliseconds: 200), () {
HapticFeedback.lightImpact();
if (_hasTriple) {
SmartDialog.showToast('已经完成三连');
} else {
animController.forward().whenComplete(() {
animController.reset();
handleAction(introController.actionTriple);
});
}
cancelTimer();
});
}
void onCancelTriple(bool isCancel) {
int duration = DateTime.now().millisecondsSinceEpoch - _lastTime;
if (duration >= 200 && duration < 1500) {
if (!_hasTriple) {
animController.reverse();
}
} else if (duration < 200) {
cancelTimer();
if (!isCancel) {
feedBack();
handleAction(introController.actionLikeVideo);
}
}
}
void cancelTimer() {
_timer?.cancel();
_timer = null;
}
@override
void dispose() {
cancelTimer();
animController.dispose();
super.dispose();
}
}
class ActionItem extends StatelessWidget {
const ActionItem({
@@ -102,11 +13,11 @@ class ActionItem extends StatelessWidget {
this.selectStatus = false,
required this.semanticsLabel,
this.expand = true,
this.controller,
this.animation,
this.onStartTriple,
this.onCancelTriple,
}) : isThumbsUp = onStartTriple != null;
}) : assert(!selectStatus || selectIcon != null),
_isThumbsUp = onStartTriple != null;
final Icon icon;
final Icon? selectIcon;
@@ -116,87 +27,85 @@ class ActionItem extends StatelessWidget {
final bool selectStatus;
final String semanticsLabel;
final bool expand;
final AnimationController? controller;
final Animation<double>? animation;
final VoidCallback? onStartTriple;
final ValueChanged<bool>? onCancelTriple;
final bool isThumbsUp;
final void Function([bool])? onCancelTriple;
final bool _isThumbsUp;
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
Widget? textWidget;
if (expand) {
final hasText = text != null;
textWidget = Text(
hasText ? text! : '-',
key: hasText ? ValueKey(text!) : null,
style: TextStyle(
color: selectStatus
? theme.colorScheme.primary
: theme.colorScheme.outline,
fontSize: theme.textTheme.labelSmall!.fontSize,
),
);
if (hasText) {
textWidget = AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: textWidget,
);
}
}
final child = Material(
type: MaterialType.transparency,
child: InkWell(
borderRadius: const BorderRadius.all(Radius.circular(6)),
onTap: isThumbsUp
? null
: () {
feedBack();
onTap?.call();
},
onLongPress: isThumbsUp ? null : onLongPress,
onTapDown: isThumbsUp ? (details) => onStartTriple!() : null,
onTapUp: isThumbsUp ? (details) => onCancelTriple!(false) : null,
onTapCancel: isThumbsUp ? () => onCancelTriple!(true) : null,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
if (animation != null)
AnimatedBuilder(
animation: animation!,
builder: (context, child) => CustomPaint(
size: const Size(28, 28),
painter: _ArcPainter(
color: theme.colorScheme.primary,
sweepAngle: animation!.value,
),
),
)
else
const SizedBox(width: 28, height: 28),
Icon(
selectStatus ? selectIcon!.icon! : icon.icon,
size: 18,
color: selectStatus
? theme.colorScheme.primary
: icon.color ?? theme.colorScheme.outline,
),
],
Widget child = Icon(
selectStatus ? selectIcon!.icon! : icon.icon,
size: 18,
color: selectStatus
? theme.colorScheme.primary
: icon.color ?? theme.colorScheme.outline,
);
if (animation != null) {
child = Stack(
clipBehavior: Clip.none,
alignment: Alignment.center,
children: [
AnimatedBuilder(
animation: animation!,
builder: (context, child) => CustomPaint(
size: const Size.square(28),
painter: _ArcPainter(
color: theme.colorScheme.primary,
sweepAngle: animation!.value,
),
),
?textWidget,
],
),
),
child,
],
);
} else {
child = SizedBox.square(dimension: 28, child: child);
}
child = InkWell(
borderRadius: const BorderRadius.all(Radius.circular(6)),
onTap: _isThumbsUp ? null : onTap,
onLongPress: _isThumbsUp ? null : onLongPress,
onTapDown: _isThumbsUp ? (_) => onStartTriple!() : null,
onTapUp: _isThumbsUp ? (_) => onCancelTriple!(true) : null,
onTapCancel: _isThumbsUp ? onCancelTriple : null,
child: expand
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [child, _buildText(theme)],
)
: child,
);
return expand
? Expanded(child: child)
: Material(type: MaterialType.transparency, child: child);
}
Widget _buildText(ThemeData theme) {
final hasText = text != null;
final child = Text(
hasText ? text! : '-',
key: hasText ? ValueKey(text!) : null,
style: TextStyle(
color: selectStatus
? theme.colorScheme.primary
: theme.colorScheme.outline,
fontSize: theme.textTheme.labelSmall!.fontSize,
),
);
return expand ? Expanded(child: child) : child;
if (hasText) {
return AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (Widget child, Animation<double> animation) {
return ScaleTransition(scale: animation, child: child);
},
child: child,
);
}
return child;
}
}

4
lib/pages/video/introduction/ugc/widgets/menu_row.dart
View File

@@ -13,7 +13,7 @@ class ActionRowLineItem extends StatelessWidget {
});
final bool selectStatus;
final Function? onTap;
final bool? isLoading;
final bool isLoading;
final String? text;
final IconData? iconData;
final Widget? icon;
@@ -55,7 +55,7 @@ class ActionRowLineItem extends StatelessWidget {
else if (icon != null)
icon!,
AnimatedOpacity(
opacity: isLoading! ? 0 : 1,
opacity: isLoading ? 0 : 1,
duration: const Duration(milliseconds: 200),
child: Text(
text!,

109
lib/pages/video/introduction/ugc/widgets/triple_state.dart Normal file
View File

@@ -0,0 +1,109 @@
import 'dart:async';
import 'dart:math' show pi;
import 'package:PiliPlus/pages/common/common_intro_controller.dart';
import 'package:PiliPlus/utils/feed_back.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
abstract class TripleState<T extends StatefulWidget> extends State<T>
with SingleTickerProviderStateMixin {
late final tripleAnimCtr = AnimationController(
vsync: this,
duration: const Duration(milliseconds: 1000),
reverseDuration: const Duration(milliseconds: 400),
);
late final tripleAnimation = Tween<double>(
begin: 0,
end: -2 * pi,
).animate(CurvedAnimation(parent: tripleAnimCtr, curve: Curves.easeInOut));
CommonIntroController get introController;
Timer? _timer;
// @mustCallSuper
// void tripleListener(AnimationStatus status) {
// if (status == AnimationStatus.completed) {
// tripleAnimCtr.reset();
// onTriple();
// }
// }
void _cancelTimer() {
_timer?.cancel();
_timer = null;
}
@override
void dispose() {
_cancelTimer();
tripleAnimCtr.dispose();
super.dispose();
}
void onStartTriple() {
_timer ??= Timer(const Duration(milliseconds: 200), () {
if (introController.hasTriple) {
HapticFeedback.lightImpact();
SmartDialog.showToast('已完成三连');
} else {
tripleAnimCtr.forward().whenComplete(() {
tripleAnimCtr.reset();
introController.actionTriple();
});
}
_cancelTimer();
});
}
void onCancelTriple([bool isTapUp = false]) {
if (tripleAnimCtr.status == AnimationStatus.forward) {
tripleAnimCtr.reverse();
} else if (_timer != null && _timer!.tick == 0) {
_cancelTimer();
if (isTapUp) {
feedBack();
introController.actionLikeVideo();
}
}
}
}
class TripleBuilder extends StatefulWidget {
const TripleBuilder({
super.key,
required this.builder,
required this.introController,
// this.tripleListener,
});
final CommonIntroController introController;
final Widget Function(
BuildContext context,
Animation<double> tripleAnimation,
void Function() onStartTriple,
void Function([bool]) onCancelTriple,
)
builder;
// final AnimationStatusListener? tripleListener;
@override
State<TripleBuilder> createState() => _TripleBuilderState();
}
class _TripleBuilderState extends TripleState<TripleBuilder> {
@override
Widget build(BuildContext context) =>
widget.builder(context, tripleAnimation, onStartTriple, onCancelTriple);
@override
late final CommonIntroController introController = widget.introController;
// @override
// void tripleListener(AnimationStatus status) {
// super.tripleListener(status);
// widget.tripleListener?.call(status);
// }
}