mirrors/pilipala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #4 from guozhigq/feature-longPress

Browse Source 
Feature long press
This commit is contained in:
Infinite
2023-05-15 10:31:23 +08:00
committed by GitHub
parent 351cc0a850 a9ae6941f3
commit 5426e10b35
10 changed files with 322 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
lib/common/widgets/animated_dialog.dart Normal file
View File

@ -0,0 +1,53 @@
import 'package:flutter/material.dart';
class AnimatedDialog extends StatefulWidget {
const AnimatedDialog({Key? key, required this.child}) : super(key: key);
final Widget child;
@override
State<StatefulWidget> createState() => AnimatedDialogState();
}
class AnimatedDialogState extends State<AnimatedDialog>
with SingleTickerProviderStateMixin {
late AnimationController? controller;
late Animation<double>? opacityAnimation;
late Animation<double>? scaleAnimation;
@override
void initState() {
super.initState();
controller = AnimationController(
vsync: this, duration: const Duration(milliseconds: 800));
opacityAnimation = Tween<double>(begin: 0.0, end: 0.6).animate(
CurvedAnimation(parent: controller!, curve: Curves.easeOutExpo));
scaleAnimation =
CurvedAnimation(parent: controller!, curve: Curves.easeOutExpo);
controller!.addListener(() => setState(() {}));
controller!.forward();
}
@override
void dispose() {
controller!.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Material(
color: Colors.black.withOpacity(opacityAnimation!.value),
child: Center(
child: FadeTransition(
opacity: scaleAnimation!,
child: ScaleTransition(
scale: scaleAnimation!,
child: widget.child,
),
),
),
);
}
}

43
lib/common/widgets/overlay_pop.dart Normal file
View File

@ -0,0 +1,43 @@
import 'package:flutter/material.dart';
import 'package:pilipala/common/constants.dart';
import 'package:pilipala/common/widgets/network_img_layer.dart';
class OverlayPop extends StatelessWidget {
var videoItem;
OverlayPop({super.key, this.videoItem});
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 8.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.background,
borderRadius: BorderRadius.circular(6.0),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(6.0),
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
NetworkImgLayer(
width: (MediaQuery.of(context).size.width - 16),
height: (MediaQuery.of(context).size.width - 16) /
StyleString.aspectRatio,
src: videoItem.pic!,
),
Padding(
padding: const EdgeInsets.fromLTRB(12, 15, 10, 15),
child: Text(
videoItem.title!,
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
),
),
],
),
),
);
}
}

166
lib/common/widgets/video_card_h.dart
View File

@ -9,89 +9,111 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
class VideoCardH extends StatelessWidget { class VideoCardH extends StatelessWidget {
// ignore: prefer_typing_uninitialized_variables // ignore: prefer_typing_uninitialized_variables
var videoItem; var videoItem;
Function()? longPress;
Function()? longPressEnd;
VideoCardH({Key? key, required this.videoItem}) : super(key: key); VideoCardH({
Key? key,
required this.videoItem,
this.longPress,
this.longPressEnd,
}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
int aid = videoItem.aid; int aid = videoItem.aid;
String heroTag = Utils.makeHeroTag(aid); String heroTag = Utils.makeHeroTag(aid);
return InkWell( return GestureDetector(
onTap: () async { onLongPress: () {
await Future.delayed(const Duration(milliseconds: 200)); if (longPress != null) {
Get.toNamed('/video?aid=$aid', longPress!();
arguments: {'videoItem': videoItem, 'heroTag': heroTag}); }
}, },
child: Column( onLongPressEnd: (details) {
children: [ if (longPressEnd != null) {
Padding( longPressEnd!();
padding: const EdgeInsets.fromLTRB( }
StyleString.cardSpace, 7, StyleString.cardSpace, 7), },
child: LayoutBuilder( child: InkWell(
builder: (context, boxConstraints) { onTap: () async {
double width = await Future.delayed(const Duration(milliseconds: 200));
(boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; Get.toNamed('/video?aid=$aid',
return SizedBox( arguments: {'videoItem': videoItem, 'heroTag': heroTag});
height: width / StyleString.aspectRatio, },
child: Row( child: Column(
mainAxisAlignment: MainAxisAlignment.start, children: [
crossAxisAlignment: CrossAxisAlignment.start, Padding(
children: [ padding: const EdgeInsets.fromLTRB(
AspectRatio( StyleString.cardSpace, 7, StyleString.cardSpace, 7),
aspectRatio: StyleString.aspectRatio, child: LayoutBuilder(
child: LayoutBuilder( builder: (context, boxConstraints) {
builder: (context, boxConstraints) { double width =
double maxWidth = boxConstraints.maxWidth; (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2;
double maxHeight = boxConstraints.maxHeight; return SizedBox(
double PR = MediaQuery.of(context).devicePixelRatio; height: width / StyleString.aspectRatio,
return Stack( child: Row(
children: [ mainAxisAlignment: MainAxisAlignment.start,
Hero( crossAxisAlignment: CrossAxisAlignment.start,
tag: heroTag, children: [
child: NetworkImgLayer( AspectRatio(
// src: videoItem['pic'] + aspectRatio: StyleString.aspectRatio,
// '@${(maxWidth * 2).toInt()}w', child: LayoutBuilder(
src: videoItem.pic + '@.webp', builder: (context, boxConstraints) {
width: maxWidth, double maxWidth = boxConstraints.maxWidth;
height: maxHeight, double maxHeight = boxConstraints.maxHeight;
), double PR =
), MediaQuery.of(context).devicePixelRatio;
// Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,), return Stack(
Positioned( children: [
right: 4, Hero(
bottom: 4, tag: heroTag,
child: Container( child: NetworkImgLayer(
padding: const EdgeInsets.symmetric( // src: videoItem['pic'] +
vertical: 1, horizontal: 6), // '@${(maxWidth * 2).toInt()}w',
decoration: BoxDecoration( src: videoItem.pic + '@.webp',
borderRadius: BorderRadius.circular(4), width: maxWidth,
color: Colors.black54.withOpacity(0.4)), height: maxHeight,
child: Text(
Utils.timeFormat(videoItem.duration!),
style: const TextStyle(
fontSize: 11, color: Colors.white),
), ),
), ),
) // Image.network( videoItem['pic'], width: double.infinity, height: double.infinity,),
], Positioned(
); right: 4,
}, bottom: 4,
child: Container(
padding: const EdgeInsets.symmetric(
vertical: 1, horizontal: 6),
decoration: BoxDecoration(
borderRadius:
BorderRadius.circular(4),
color:
Colors.black54.withOpacity(0.4)),
child: Text(
Utils.timeFormat(videoItem.duration!),
style: const TextStyle(
fontSize: 11, color: Colors.white),
),
),
)
],
);
},
),
), ),
), VideoContent(videoItem: videoItem)
VideoContent(videoItem: videoItem) ],
], ),
), );
); },
}, ),
), ),
), Divider(
Divider( height: 1,
height: 1, indent: 8,
indent: 8, endIndent: 12,
endIndent: 12, color: Theme.of(context).dividerColor.withOpacity(0.08),
color: Theme.of(context).dividerColor.withOpacity(0.08), )
) ],
], ),
), ),
); );
} }

118
lib/common/widgets/video_card_v.dart
View File

@ -10,8 +10,15 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
// 视频卡片 - 垂直布局 // 视频卡片 - 垂直布局
class VideoCardV extends StatelessWidget { class VideoCardV extends StatelessWidget {
var videoItem; var videoItem;
Function()? longPress;
Function()? longPressEnd;
VideoCardV({Key? key, required this.videoItem}) : super(key: key); VideoCardV({
Key? key,
required this.videoItem,
this.longPress,
this.longPressEnd,
}) : super(key: key);
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
@ -23,61 +30,70 @@ class VideoCardV extends StatelessWidget {
borderRadius: StyleString.mdRadius, borderRadius: StyleString.mdRadius,
), ),
margin: EdgeInsets.zero, margin: EdgeInsets.zero,
child: InkWell( child: GestureDetector(
onTap: () async {
await Future.delayed(const Duration(milliseconds: 200));
Get.toNamed('/video?aid=${videoItem.id}',
arguments: {'videoItem': videoItem, 'heroTag': heroTag});
},
onLongPress: () { onLongPress: () {
print('长按'); if (longPress != null) {
longPress!();
}
}, },
child: Column( onLongPressEnd: (details) {
children: [ if (longPressEnd != null) {
ClipRRect( longPressEnd!();
borderRadius: const BorderRadius.only( }
topLeft: StyleString.imgRadius, },
topRight: StyleString.imgRadius, child: InkWell(
), onTap: () async {
child: AspectRatio( await Future.delayed(const Duration(milliseconds: 200));
aspectRatio: StyleString.aspectRatio, Get.toNamed('/video?aid=${videoItem.id}',
child: LayoutBuilder(builder: (context, boxConstraints) { arguments: {'videoItem': videoItem, 'heroTag': heroTag});
double maxWidth = boxConstraints.maxWidth; },
double maxHeight = boxConstraints.maxHeight; child: Column(
double PR = MediaQuery.of(context).devicePixelRatio; children: [
return Stack( ClipRRect(
children: [ borderRadius: const BorderRadius.only(
Hero( topLeft: StyleString.imgRadius,
tag: heroTag, topRight: StyleString.imgRadius,
child: NetworkImgLayer( ),
// 指定图片尺寸 child: AspectRatio(
// src: videoItem.pic + '@${(maxWidth * 2).toInt()}w', aspectRatio: StyleString.aspectRatio,
src: videoItem.pic + '@.webp', child: LayoutBuilder(builder: (context, boxConstraints) {
width: maxWidth, double maxWidth = boxConstraints.maxWidth;
height: maxHeight, double maxHeight = boxConstraints.maxHeight;
), double PR = MediaQuery.of(context).devicePixelRatio;
), return Stack(
Positioned( children: [
left: 0, Hero(
right: 0, tag: heroTag,
bottom: 0, child: NetworkImgLayer(
child: AnimatedOpacity( // 指定图片尺寸
opacity: 1, // src: videoItem.pic + '@${(maxWidth * 2).toInt()}w',
duration: const Duration(milliseconds: 200), src: videoItem.pic + '@.webp',
child: VideoStat( width: maxWidth,
view: videoItem.stat.view, height: maxHeight,
danmaku: videoItem.stat.danmaku,
duration: videoItem.duration,
), ),
), ),
) Positioned(
], left: 0,
); right: 0,
}), bottom: 0,
child: AnimatedOpacity(
opacity: 1,
duration: const Duration(milliseconds: 200),
child: VideoStat(
view: videoItem.stat.view,
danmaku: videoItem.stat.danmaku,
duration: videoItem.duration,
),
),
),
],
);
}),
),
), ),
), VideoContent(videoItem: videoItem)
VideoContent(videoItem: videoItem) ],
], ),
), ),
), ),
); );

1
lib/pages/home/controller.dart
View File

@ -11,6 +11,7 @@ class HomeController extends GetxController {
RxList<RecVideoItemModel> videoList = [RecVideoItemModel()].obs; RxList<RecVideoItemModel> videoList = [RecVideoItemModel()].obs;
bool isLoadingMore = false; bool isLoadingMore = false;
bool flag = false; bool flag = false;
OverlayEntry? popupDialog;
@override @override
void onInit() { void onInit() {

23
lib/pages/home/view.dart
View File

@ -1,6 +1,8 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:pilipala/common/skeleton/video_card_v.dart'; import 'package:pilipala/common/skeleton/video_card_v.dart';
import 'package:pilipala/common/widgets/animated_dialog.dart';
import 'package:pilipala/common/widgets/overlay_pop.dart';
import 'package:pilipala/common/widgets/http_error.dart'; import 'package:pilipala/common/widgets/http_error.dart';
import 'package:pilipala/common/widgets/video_card_v.dart'; import 'package:pilipala/common/widgets/video_card_v.dart';
import './controller.dart'; import './controller.dart';
@ -101,6 +103,13 @@ class _HomePageState extends State<HomePage>
); );
} }
OverlayEntry _createPopupDialog(videoItem) {
return OverlayEntry(
builder: (context) => AnimatedDialog(
child: OverlayPop(videoItem: videoItem),
));
}
Widget contentGrid(ctr, videoList) { Widget contentGrid(ctr, videoList) {
return SliverGrid( return SliverGrid(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
@ -118,7 +127,19 @@ class _HomePageState extends State<HomePage>
delegate: SliverChildBuilderDelegate( delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) { (BuildContext context, int index) {
return videoList!.isNotEmpty return videoList!.isNotEmpty
? VideoCardV(videoItem: videoList![index]) ?
// VideoCardV(videoItem: videoList![index])
VideoCardV(
videoItem: videoList[index],
longPress: () {
_homeController.popupDialog =
_createPopupDialog(videoList[index]);
Overlay.of(context).insert(_homeController.popupDialog!);
},
longPressEnd: () {
_homeController.popupDialog?.remove();
},
)
: const VideoCardVSkeleton(); : const VideoCardVSkeleton();
}, },
childCount: videoList!.isNotEmpty ? videoList!.length : 10, childCount: videoList!.isNotEmpty ? videoList!.length : 10,

1
lib/pages/hot/controller.dart
View File

@ -10,6 +10,7 @@ class HotController extends GetxController {
RxList<HotVideoItemModel> videoList = [HotVideoItemModel()].obs; RxList<HotVideoItemModel> videoList = [HotVideoItemModel()].obs;
bool isLoadingMore = false; bool isLoadingMore = false;
bool flag = false; bool flag = false;
OverlayEntry? popupDialog;
// 获取推荐 // 获取推荐
Future queryHotFeed(type) async { Future queryHotFeed(type) async {

19
lib/pages/hot/view.dart
View File

@ -1,5 +1,7 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:pilipala/common/widgets/animated_dialog.dart';
import 'package:pilipala/common/widgets/overlay_pop.dart';
import 'package:pilipala/common/skeleton/video_card_h.dart'; import 'package:pilipala/common/skeleton/video_card_h.dart';
import 'package:pilipala/common/widgets/http_error.dart'; import 'package:pilipala/common/widgets/http_error.dart';
import 'package:pilipala/common/widgets/video_card_h.dart'; import 'package:pilipala/common/widgets/video_card_h.dart';
@ -62,6 +64,15 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
delegate: SliverChildBuilderDelegate((context, index) { delegate: SliverChildBuilderDelegate((context, index) {
return VideoCardH( return VideoCardH(
videoItem: _hotController.videoList[index], videoItem: _hotController.videoList[index],
longPress: () {
_hotController.popupDialog = _createPopupDialog(
_hotController.videoList[index]);
Overlay.of(context)
.insert(_hotController.popupDialog!);
},
longPressEnd: () {
_hotController.popupDialog?.remove();
},
); );
}, childCount: _hotController.videoList.length), }, childCount: _hotController.videoList.length),
), ),
@ -92,4 +103,12 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
), ),
); );
} }
OverlayEntry _createPopupDialog(videoItem) {
return OverlayEntry(
builder: (context) => AnimatedDialog(
child: OverlayPop(videoItem: videoItem),
),
);
}
} }

3
lib/pages/video/detail/related/controller.dart
View File

@ -1,3 +1,4 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:pilipala/http/video.dart'; import 'package:pilipala/http/video.dart';
@ -7,5 +8,7 @@ class ReleatedController extends GetxController {
// 推荐视频列表 // 推荐视频列表
List relatedVideoList = []; List relatedVideoList = [];
OverlayEntry? popupDialog;
Future<dynamic> queryRelatedVideo() => VideoHttp.relatedVideoList(aid: aid); Future<dynamic> queryRelatedVideo() => VideoHttp.relatedVideoList(aid: aid);
} }

20
lib/pages/video/detail/related/view.dart
View File

@ -1,8 +1,9 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart'; import 'package:get/get.dart';
import 'package:pilipala/common/skeleton/video_card_h.dart'; import 'package:pilipala/common/skeleton/video_card_h.dart';
import 'package:pilipala/common/widgets/animated_dialog.dart';
import 'package:pilipala/common/widgets/overlay_pop.dart';
import 'package:pilipala/common/widgets/video_card_h.dart'; import 'package:pilipala/common/widgets/video_card_h.dart';
import 'package:pilipala/common/widgets/video_card_v.dart';
import './controller.dart'; import './controller.dart';
class RelatedVideoPanel extends StatefulWidget { class RelatedVideoPanel extends StatefulWidget {
@ -31,6 +32,15 @@ class _RelatedVideoPanelState extends State<RelatedVideoPanel> {
} else { } else {
return VideoCardH( return VideoCardH(
videoItem: snapshot.data['data'][index], videoItem: snapshot.data['data'][index],
longPress: () {
_releatedController.popupDialog =
_createPopupDialog(snapshot.data['data'][index]);
Overlay.of(context)
.insert(_releatedController.popupDialog!);
},
longPressEnd: () {
_releatedController.popupDialog?.remove();
},
); );
} }
}, childCount: snapshot.data['data'].length + 1)); }, childCount: snapshot.data['data'].length + 1));
@ -51,4 +61,12 @@ class _RelatedVideoPanelState extends State<RelatedVideoPanel> {
}, },
); );
} }
OverlayEntry _createPopupDialog(videoItem) {
return OverlayEntry(
builder: (context) => AnimatedDialog(
child: OverlayPop(videoItem: videoItem),
),
);
}
} }