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

mod: 增加骨架屏

Browse Source
This commit is contained in:
guozhigq
2023-04-22 00:22:36 +08:00
parent 572d2a4139
commit 2fd1cc422b
5 changed files with 130 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
lib/common/skeleton/video_card_h.dart Normal file
View File

@ -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<VideoCardHSkeleton> createState() => _VideoCardHSkeletonState();
}
class _VideoCardHSkeletonState extends State<VideoCardHSkeleton> {
@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),
)
],
),
);
}
}

4
lib/common/skeleton/video_card_v.dart
View File

@ -49,15 +49,15 @@ class VideoCardVSkeleton extends StatelessWidget {
Container( Container(
width: 200, width: 200,
height: 13, height: 13,
margin: const EdgeInsets.only(bottom: 5),
color: Theme.of(context).colorScheme.background, color: Theme.of(context).colorScheme.background,
), ),
const SizedBox(height: 5),
Container( Container(
width: 150, width: 150,
height: 13, height: 13,
margin: const EdgeInsets.only(bottom: 12),
color: Theme.of(context).colorScheme.background, color: Theme.of(context).colorScheme.background,
), ),
const SizedBox(height: 12),
Container( Container(
width: 80, width: 80,
height: 13, height: 13,

4
lib/common/widgets/network_img_layer.dart
View File

@ -1,5 +1,6 @@
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart'; import 'package:cached_network_image/cached_network_image.dart';
import 'package:pilipala/common/constants.dart';
class NetworkImgLayer extends StatelessWidget { class NetworkImgLayer extends StatelessWidget {
final String? src; final String? src;
@ -29,7 +30,8 @@ class NetworkImgLayer extends StatelessWidget {
// double pr = 2; // double pr = 2;
return src != '' return src != ''
? ClipRRect( ? ClipRRect(
borderRadius: BorderRadius.circular(type == 'avatar' ? 50 : 4), borderRadius: BorderRadius.circular(
type == 'avatar' ? 50 : StyleString.imgRadius.x),
child: CachedNetworkImage( child: CachedNetworkImage(
imageUrl: src!, imageUrl: src!,
width: width ?? double.infinity, width: width ?? double.infinity,

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

@ -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)
// ],
// ),
// );
// },
// ),
// ),
); );
} }
} }

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

@ -1,5 +1,6 @@
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/widgets/video_card_h.dart'; import 'package:pilipala/common/widgets/video_card_h.dart';
import './controller.dart'; import './controller.dart';
@ -22,7 +23,6 @@ class _RelatedVideoPanelState extends State<RelatedVideoPanel> {
if (snapshot.connectionState == ConnectionState.done) { if (snapshot.connectionState == ConnectionState.done) {
if (snapshot.data!['status']) { if (snapshot.data!['status']) {
// 请求成功 // 请求成功
// List videoList = _releatedController.relatedVideoList;
return SliverList( return SliverList(
delegate: SliverChildBuilderDelegate((context, index) { delegate: SliverChildBuilderDelegate((context, index) {
if (index == snapshot.data['data'].length) { if (index == snapshot.data['data'].length) {
@ -40,8 +40,11 @@ class _RelatedVideoPanelState extends State<RelatedVideoPanel> {
); );
} }
} else { } else {
return const SliverToBoxAdapter( // 骨架屏
child: Text('请求中'), return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return const VideoCardHSkeleton();
}, childCount: 5),
); );
} }
}, },