From f5f1ffb2be41ca3107d3dca8a405d31136409896 Mon Sep 17 00:00:00 2001 From: guozhigq Date: Sun, 6 Aug 2023 14:55:13 +0800 Subject: [PATCH] =?UTF-8?q?mod:=20=E6=90=9C=E7=B4=A2=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/common/skeleton/media_bangumi.dart | 79 ++++++++++ lib/common/skeleton/video_card_h.dart | 149 ++++++++---------- lib/common/widgets/video_card_h.dart | 102 ++++++------ lib/pages/search/view.dart | 9 +- lib/pages/searchPanel/view.dart | 14 +- lib/pages/searchPanel/widgets/live_panel.dart | 129 ++++++++------- .../widgets/media_bangumi_panel.dart | 4 +- 7 files changed, 284 insertions(+), 202 deletions(-) create mode 100644 lib/common/skeleton/media_bangumi.dart diff --git a/lib/common/skeleton/media_bangumi.dart b/lib/common/skeleton/media_bangumi.dart new file mode 100644 index 00000000..50148f0d --- /dev/null +++ b/lib/common/skeleton/media_bangumi.dart @@ -0,0 +1,79 @@ +import 'package:flutter/material.dart'; +import 'package:pilipala/common/constants.dart'; + +import 'skeleton.dart'; + +class MediaBangumiSkeleton extends StatefulWidget { + const MediaBangumiSkeleton({super.key}); + + @override + State createState() => _MediaBangumiSkeletonState(); +} + +class _MediaBangumiSkeletonState extends State { + @override + Widget build(BuildContext context) { + Color bgColor = Theme.of(context).colorScheme.onInverseSurface; + return Skeleton( + child: Padding( + padding: const EdgeInsets.fromLTRB( + StyleString.safeSpace, 7, StyleString.safeSpace, 7), + child: Row( + children: [ + Container( + width: 111, + height: 148, + decoration: BoxDecoration( + borderRadius: const BorderRadius.all(Radius.circular(6)), + color: bgColor), + ), + const SizedBox(width: 10), + SizedBox( + height: 148, + child: Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 200, + height: 20, + margin: const EdgeInsets.only(bottom: 15), + ), + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 150, + height: 13, + margin: const EdgeInsets.only(bottom: 5), + ), + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 150, + height: 13, + margin: const EdgeInsets.only(bottom: 5), + ), + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 150, + height: 13, + ), + const Spacer(), + Container( + width: 90, + height: 35, + decoration: BoxDecoration( + borderRadius: + const BorderRadius.all(Radius.circular(20)), + color: Theme.of(context).colorScheme.onInverseSurface, + ), + ), + ], + ), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/common/skeleton/video_card_h.dart b/lib/common/skeleton/video_card_h.dart index 71a659ea..547f836c 100644 --- a/lib/common/skeleton/video_card_h.dart +++ b/lib/common/skeleton/video_card_h.dart @@ -8,103 +8,86 @@ class VideoCardHSkeleton extends StatelessWidget { @override Widget build(BuildContext context) { return Skeleton( - child: Column( - children: [ - Padding( - padding: const EdgeInsets.fromLTRB( - StyleString.cardSpace, 7, StyleString.cardSpace, 7), - child: LayoutBuilder( - builder: (context, boxConstraints) { - double width = - (boxConstraints.maxWidth - StyleString.cardSpace * 6) / 2; - return SizedBox( - height: width / StyleString.aspectRatio, - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - AspectRatio( - aspectRatio: StyleString.aspectRatio, - child: LayoutBuilder( - builder: (context, boxConstraints) { - return Container( - decoration: BoxDecoration( - color: Theme.of(context) - .colorScheme - .onInverseSurface, - borderRadius: BorderRadius.circular( - StyleString.imgRadius.x), - ), - ); - }, + child: Padding( + padding: const EdgeInsets.fromLTRB( + StyleString.safeSpace, 7, StyleString.safeSpace, 7), + child: LayoutBuilder( + builder: (context, boxConstraints) { + double width = + (boxConstraints.maxWidth - StyleString.cardSpace * 9) / 2; + return SizedBox( + height: width / StyleString.aspectRatio, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AspectRatio( + aspectRatio: StyleString.aspectRatio, + child: LayoutBuilder( + builder: (context, boxConstraints) { + return Container( + decoration: BoxDecoration( + color: + Theme.of(context).colorScheme.onInverseSurface, + borderRadius: + BorderRadius.circular(StyleString.imgRadius.x), + ), + ); + }, + ), + ), + // VideoContent(videoItem: videoItem) + Expanded( + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 4, 6, 4), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 200, + height: 11, + margin: const EdgeInsets.only(bottom: 5), ), - ), - // VideoContent(videoItem: videoItem) - Expanded( - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 4, 6, 4), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 150, + height: 13, + ), + const Spacer(), + Container( + color: Theme.of(context).colorScheme.onInverseSurface, + width: 100, + height: 13, + margin: const EdgeInsets.only(bottom: 5), + ), + Row( children: [ Container( color: Theme.of(context) .colorScheme .onInverseSurface, - width: 200, - height: 11, - margin: const EdgeInsets.only(bottom: 5), + width: 40, + height: 13, + margin: const EdgeInsets.only(right: 8), ), Container( color: Theme.of(context) .colorScheme .onInverseSurface, - width: 150, + width: 40, height: 13, ), - const Spacer(), - Container( - color: Theme.of(context) - .colorScheme - .onInverseSurface, - width: 100, - height: 13, - margin: const EdgeInsets.only(bottom: 5), - ), - Row( - children: [ - Container( - color: Theme.of(context) - .colorScheme - .onInverseSurface, - width: 40, - height: 13, - margin: const EdgeInsets.only(right: 8), - ), - Container( - color: Theme.of(context) - .colorScheme - .onInverseSurface, - width: 40, - height: 13, - ), - ], - ) ], - ), - )), - ], - ), - ); - }, - ), - ), - Divider( - height: 1, - indent: 8, - endIndent: 12, - color: Theme.of(context).dividerColor.withOpacity(0.08), - ) - ], + ) + ], + ), + )), + ], + ), + ); + }, + ), ), ); } diff --git a/lib/common/widgets/video_card_h.dart b/lib/common/widgets/video_card_h.dart index d5bbfa0a..fed20c7b 100644 --- a/lib/common/widgets/video_card_h.dart +++ b/lib/common/widgets/video_card_h.dart @@ -56,63 +56,53 @@ class VideoCardH extends StatelessWidget { SmartDialog.showToast(err.toString()); } }, - child: Column( - children: [ - Padding( - padding: const EdgeInsets.fromLTRB( - StyleString.safeSpace, 6, StyleString.safeSpace, 6), - child: LayoutBuilder( - builder: (context, boxConstraints) { - double width = - (boxConstraints.maxWidth - StyleString.cardSpace * 9) / 2; - return SizedBox( - height: width / StyleString.aspectRatio, - child: Row( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - AspectRatio( - aspectRatio: StyleString.aspectRatio, - child: LayoutBuilder( - builder: (context, boxConstraints) { - double maxWidth = boxConstraints.maxWidth; - double maxHeight = boxConstraints.maxHeight; - return Stack( - children: [ - Hero( - tag: heroTag, - child: NetworkImgLayer( - src: videoItem.pic, - width: maxWidth, - height: maxHeight, - ), - ), - pBadge(Utils.timeFormat(videoItem.duration!), - context, null, 6.0, 6.0, null, - type: 'gray'), - if (videoItem.rcmdReason != null && - videoItem.rcmdReason.content != '') - pBadge(videoItem.rcmdReason.content, - context, 6.0, 6.0, null, null), - ], - ); - }, - ), - ), - VideoContent(videoItem: videoItem) - ], + child: Padding( + padding: const EdgeInsets.fromLTRB( + StyleString.safeSpace, 7, StyleString.safeSpace, 7), + child: LayoutBuilder( + builder: (context, boxConstraints) { + double width = + (boxConstraints.maxWidth - StyleString.cardSpace * 9) / 2; + return SizedBox( + height: width / StyleString.aspectRatio, + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + AspectRatio( + aspectRatio: StyleString.aspectRatio, + child: LayoutBuilder( + builder: (context, boxConstraints) { + double maxWidth = boxConstraints.maxWidth; + double maxHeight = boxConstraints.maxHeight; + return Stack( + children: [ + Hero( + tag: heroTag, + child: NetworkImgLayer( + src: videoItem.pic, + width: maxWidth, + height: maxHeight, + ), + ), + pBadge(Utils.timeFormat(videoItem.duration!), + context, null, 6.0, 6.0, null, + type: 'gray'), + if (videoItem.rcmdReason != null && + videoItem.rcmdReason.content != '') + pBadge(videoItem.rcmdReason.content, context, + 6.0, 6.0, null, null), + ], + ); + }, + ), ), - ); - }, - ), - ), - // Divider( - // height: 1, - // indent: 8, - // endIndent: 12, - // color: Theme.of(context).dividerColor.withOpacity(0.08), - // ) - ], + VideoContent(videoItem: videoItem) + ], + ), + ); + }, + ), ), ), ); diff --git a/lib/pages/search/view.dart b/lib/pages/search/view.dart index 300154a9..e6c9735b 100644 --- a/lib/pages/search/view.dart +++ b/lib/pages/search/view.dart @@ -17,6 +17,13 @@ class SearchPage extends StatefulWidget { class _SearchPageState extends State with RouteAware { final SSearchController _searchController = Get.put(SSearchController()); + late Future? _futureBuilderFuture; + + @override + void initState() { + super.initState(); + _futureBuilderFuture = _searchController.queryHotSearchList(); + } @override // 返回当前页面时 @@ -159,7 +166,7 @@ class _SearchPageState extends State with RouteAware { builder: (context, boxConstraints) { final double width = boxConstraints.maxWidth; return FutureBuilder( - future: _searchController.queryHotSearchList(), + future: _futureBuilderFuture, builder: (context, snapshot) { if (snapshot.connectionState == ConnectionState.done) { Map data = snapshot.data as Map; diff --git a/lib/pages/searchPanel/view.dart b/lib/pages/searchPanel/view.dart index 2683e7e9..5dd15b8f 100644 --- a/lib/pages/searchPanel/view.dart +++ b/lib/pages/searchPanel/view.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:get/get.dart'; +import 'package:pilipala/common/skeleton/media_bangumi.dart'; import 'package:pilipala/common/skeleton/video_card_h.dart'; import 'package:pilipala/common/widgets/http_error.dart'; import 'package:pilipala/models/common/search_type.dart'; @@ -104,7 +105,18 @@ class _SearchPanelState extends State addRepaintBoundaries: false, itemCount: 15, itemBuilder: (context, index) { - return const VideoCardHSkeleton(); + switch (widget.searchType) { + case SearchType.video: + return const VideoCardHSkeleton(); + case SearchType.media_bangumi: + return const MediaBangumiSkeleton(); + case SearchType.bili_user: + return const VideoCardHSkeleton(); + case SearchType.live_room: + return const VideoCardHSkeleton(); + default: + return const VideoCardHSkeleton(); + } }, ); } diff --git a/lib/pages/searchPanel/widgets/live_panel.dart b/lib/pages/searchPanel/widgets/live_panel.dart index bb569128..f00660e6 100644 --- a/lib/pages/searchPanel/widgets/live_panel.dart +++ b/lib/pages/searchPanel/widgets/live_panel.dart @@ -6,7 +6,7 @@ import 'package:pilipala/utils/utils.dart'; Widget searchLivePanel(BuildContext context, ctr, list) { return Padding( padding: const EdgeInsets.only( - left: StyleString.cardSpace, right: StyleString.cardSpace), + left: StyleString.safeSpace, right: StyleString.safeSpace), child: GridView.builder( primary: false, controller: ctr!.scrollController, @@ -16,73 +16,82 @@ Widget searchLivePanel(BuildContext context, ctr, list) { mainAxisSpacing: StyleString.cardSpace + 3, mainAxisExtent: MediaQuery.of(context).size.width / 2 / StyleString.aspectRatio + - 65, + 60, ), itemCount: list.length, itemBuilder: (context, index) { - var i = list![index]; - return Card( - elevation: 0, - clipBehavior: Clip.hardEdge, - shape: RoundedRectangleBorder( - borderRadius: StyleString.mdRadius, - ), - margin: EdgeInsets.zero, - child: InkWell( - onTap: () {}, - child: Column( - children: [ - ClipRRect( - borderRadius: const BorderRadius.only( - topLeft: StyleString.imgRadius, - topRight: StyleString.imgRadius, - bottomLeft: StyleString.imgRadius, - bottomRight: StyleString.imgRadius, - ), - child: AspectRatio( - aspectRatio: StyleString.aspectRatio, - child: LayoutBuilder(builder: (context, boxConstraints) { - double maxWidth = boxConstraints.maxWidth; - double maxHeight = boxConstraints.maxHeight; - return Stack( - children: [ - Hero( - tag: Utils.makeHeroTag(i.roomid), - child: NetworkImgLayer( - src: i.cover, - type: 'emote', - width: maxWidth, - height: maxHeight, - ), - ), - Positioned( - left: 0, - right: 0, - bottom: 0, - child: AnimatedOpacity( - opacity: 1, - duration: const Duration(milliseconds: 200), - child: LiveStat( - online: i.online, - cateName: i.cateName, - ), - ), - ), - ], - ); - }), - ), - ), - LiveContent(liveItem: i) - ], - ), - ), - ); + return LiveItem(liveItem: list![index]); }, ), ); } +class LiveItem extends StatelessWidget { + final dynamic liveItem; + const LiveItem({Key? key, required this.liveItem}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Card( + elevation: 0, + clipBehavior: Clip.hardEdge, + shape: RoundedRectangleBorder( + borderRadius: StyleString.mdRadius, + ), + margin: EdgeInsets.zero, + child: InkWell( + onTap: () {}, + child: Column( + children: [ + ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: StyleString.imgRadius, + topRight: StyleString.imgRadius, + bottomLeft: StyleString.imgRadius, + bottomRight: StyleString.imgRadius, + ), + child: AspectRatio( + aspectRatio: StyleString.aspectRatio, + child: LayoutBuilder(builder: (context, boxConstraints) { + double maxWidth = boxConstraints.maxWidth; + double maxHeight = boxConstraints.maxHeight; + return Stack( + children: [ + Hero( + tag: Utils.makeHeroTag(liveItem.roomid), + child: NetworkImgLayer( + src: liveItem.cover, + type: 'emote', + width: maxWidth, + height: maxHeight, + ), + ), + Positioned( + left: 0, + right: 0, + bottom: 0, + child: AnimatedOpacity( + opacity: 1, + duration: const Duration(milliseconds: 200), + child: LiveStat( + online: liveItem.online, + cateName: liveItem.cateName, + ), + ), + ), + ], + ); + }), + ), + ), + LiveContent(liveItem: liveItem) + ], + ), + ), + ); + } +} + class LiveContent extends StatelessWidget { final dynamic liveItem; const LiveContent({Key? key, required this.liveItem}) : super(key: key); diff --git a/lib/pages/searchPanel/widgets/media_bangumi_panel.dart b/lib/pages/searchPanel/widgets/media_bangumi_panel.dart index 82558105..69b94fd7 100644 --- a/lib/pages/searchPanel/widgets/media_bangumi_panel.dart +++ b/lib/pages/searchPanel/widgets/media_bangumi_panel.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_smart_dialog/flutter_smart_dialog.dart'; import 'package:get/get.dart'; +import 'package:pilipala/common/constants.dart'; import 'package:pilipala/common/widgets/badge.dart'; import 'package:pilipala/common/widgets/network_img_layer.dart'; import 'package:pilipala/http/search.dart'; @@ -28,7 +29,8 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) { // }); }, child: Padding( - padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8), + padding: const EdgeInsets.fromLTRB( + StyleString.safeSpace, 7, StyleString.safeSpace, 7), child: Row( crossAxisAlignment: CrossAxisAlignment.start, children: [