mod: 骨架屏

This commit is contained in:
guozhigq
2023-04-29 19:08:39 +08:00
parent 42fd0d7f62
commit 5dabb94a47
2 changed files with 86 additions and 1 deletions

View File

@ -0,0 +1,84 @@
import 'package:flutter/material.dart';
import 'skeleton.dart';
class VideoReplySkeleton extends StatelessWidget {
const VideoReplySkeleton({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Color bgColor = Theme.of(context).colorScheme.onInverseSurface;
return Skeleton(
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(12, 8, 8, 2),
child: Row(
children: [
ClipOval(
child: Container(
width: 34,
height: 34,
color: bgColor,
),
),
const SizedBox(width: 12),
Container(
width: 120,
height: 16,
color: bgColor,
)
],
),
),
Container(
width: double.infinity,
margin:
const EdgeInsets.only(top: 4, left: 57, right: 6, bottom: 6),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Container(
width: 300,
height: 16,
margin: const EdgeInsets.only(bottom: 4),
color: bgColor,
),
Container(
width: 180,
height: 16,
margin: const EdgeInsets.only(bottom: 6),
color: bgColor,
),
Row(
children: [
Container(
width: 60,
height: 16,
margin: const EdgeInsets.only(bottom: 4),
color: bgColor,
),
const Spacer(),
Container(
width: 60,
height: 16,
margin: const EdgeInsets.only(bottom: 4),
color: bgColor,
),
const SizedBox(width: 8)
],
)
],
),
),
Divider(
height: 1,
indent: 52,
endIndent: 10,
color: Theme.of(context).dividerColor.withOpacity(0.08),
)
],
),
);
}
}

View File

@ -1,6 +1,7 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:pilipala/common/skeleton/video_card_h.dart';
import 'package:pilipala/common/skeleton/video_reply.dart';
import 'package:pilipala/common/widgets/http_error.dart';
import 'package:pilipala/models/video/reply/item.dart';
import 'controller.dart';
@ -117,7 +118,7 @@ class _VideoReplyPanelState extends State<VideoReplyPanel>
// 骨架屏
return SliverList(
delegate: SliverChildBuilderDelegate((context, index) {
return const VideoCardHSkeleton();
return const VideoReplySkeleton();
}, childCount: 5),
);
}