From 2fd1cc422b5d68506f3ef254eb38f1f2ee263163 Mon Sep 17 00:00:00 2001 From: guozhigq Date: Sat, 22 Apr 2023 00:22:36 +0800 Subject: [PATCH] =?UTF-8?q?mod:=20=E5=A2=9E=E5=8A=A0=E9=AA=A8=E6=9E=B6?= =?UTF-8?q?=E5=B1=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- lib/common/skeleton/video_card_h.dart | 119 ++++++++++++++++++++++ lib/common/skeleton/video_card_v.dart | 4 +- lib/common/widgets/network_img_layer.dart | 4 +- lib/common/widgets/video_card_h.dart | 64 ------------ lib/pages/video/detail/related/view.dart | 9 +- 5 files changed, 130 insertions(+), 70 deletions(-) create mode 100644 lib/common/skeleton/video_card_h.dart diff --git a/lib/common/skeleton/video_card_h.dart b/lib/common/skeleton/video_card_h.dart new file mode 100644 index 00000000..dc5e9c32 --- /dev/null +++ b/lib/common/skeleton/video_card_h.dart @@ -0,0 +1,119 @@ +import 'package:pilipala/common/constants.dart'; +import 'package:flutter/material.dart'; +import 'skeleton.dart'; + +class VideoCardHSkeleton extends StatefulWidget { + const VideoCardHSkeleton({super.key}); + + @override + State createState() => _VideoCardHSkeletonState(); +} + +class _VideoCardHSkeletonState extends State { + @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) { + double maxWidth = boxConstraints.maxWidth; + double maxHeight = boxConstraints.maxHeight; + double PR = MediaQuery.of(context).devicePixelRatio; + 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: 13, + margin: const EdgeInsets.only(bottom: 5), + ), + 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: 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/skeleton/video_card_v.dart b/lib/common/skeleton/video_card_v.dart index 1c9ef23d..4f83501e 100644 --- a/lib/common/skeleton/video_card_v.dart +++ b/lib/common/skeleton/video_card_v.dart @@ -49,15 +49,15 @@ class VideoCardVSkeleton extends StatelessWidget { Container( width: 200, height: 13, + margin: const EdgeInsets.only(bottom: 5), color: Theme.of(context).colorScheme.background, ), - const SizedBox(height: 5), Container( width: 150, height: 13, + margin: const EdgeInsets.only(bottom: 12), color: Theme.of(context).colorScheme.background, ), - const SizedBox(height: 12), Container( width: 80, height: 13, diff --git a/lib/common/widgets/network_img_layer.dart b/lib/common/widgets/network_img_layer.dart index abaa369d..e8249b80 100644 --- a/lib/common/widgets/network_img_layer.dart +++ b/lib/common/widgets/network_img_layer.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:cached_network_image/cached_network_image.dart'; +import 'package:pilipala/common/constants.dart'; class NetworkImgLayer extends StatelessWidget { final String? src; @@ -29,7 +30,8 @@ class NetworkImgLayer extends StatelessWidget { // double pr = 2; return src != '' ? ClipRRect( - borderRadius: BorderRadius.circular(type == 'avatar' ? 50 : 4), + borderRadius: BorderRadius.circular( + type == 'avatar' ? 50 : StyleString.imgRadius.x), child: CachedNetworkImage( imageUrl: src!, width: width ?? double.infinity, diff --git a/lib/common/widgets/video_card_h.dart b/lib/common/widgets/video_card_h.dart index b14b6911..6e881831 100644 --- a/lib/common/widgets/video_card_h.dart +++ b/lib/common/widgets/video_card_h.dart @@ -92,70 +92,6 @@ class VideoCardH extends StatelessWidget { ) ], ), - // Container( - // padding: const EdgeInsets.fromLTRB( - // StyleString.cardSpace, 5, StyleString.cardSpace, 5), - // 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: ClipRRect( - // // borderRadius: StyleString.mdRadius, - // child: LayoutBuilder( - // builder: (context, boxConstraints) { - // double maxWidth = boxConstraints.maxWidth; - // double maxHeight = boxConstraints.maxHeight; - // double PR = MediaQuery.of(context).devicePixelRatio; - // return Stack( - // children: [ - // Hero( - // tag: heroTag, - // child: NetworkImgLayer( - // // src: videoItem['pic'] + - // // '@${(maxWidth * 2).toInt()}w', - // src: videoItem.pic + '@.webp', - // width: maxWidth, - // height: maxHeight, - // ), - // ), - // // 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) - // ], - // ), - // ); - // }, - // ), - // ), ); } } diff --git a/lib/pages/video/detail/related/view.dart b/lib/pages/video/detail/related/view.dart index 32492d13..4034cdfb 100644 --- a/lib/pages/video/detail/related/view.dart +++ b/lib/pages/video/detail/related/view.dart @@ -1,5 +1,6 @@ import 'package:flutter/material.dart'; import 'package:get/get.dart'; +import 'package:pilipala/common/skeleton/video_card_h.dart'; import 'package:pilipala/common/widgets/video_card_h.dart'; import './controller.dart'; @@ -22,7 +23,6 @@ class _RelatedVideoPanelState extends State { if (snapshot.connectionState == ConnectionState.done) { if (snapshot.data!['status']) { // 请求成功 - // List videoList = _releatedController.relatedVideoList; return SliverList( delegate: SliverChildBuilderDelegate((context, index) { if (index == snapshot.data['data'].length) { @@ -40,8 +40,11 @@ class _RelatedVideoPanelState extends State { ); } } else { - return const SliverToBoxAdapter( - child: Text('请求中'), + // 骨架屏 + return SliverList( + delegate: SliverChildBuilderDelegate((context, index) { + return const VideoCardHSkeleton(); + }, childCount: 5), ); } },