mod: 骨架屏
This commit is contained in:
84
lib/common/skeleton/video_reply.dart
Normal file
84
lib/common/skeleton/video_reply.dart
Normal 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),
|
||||
)
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
@ -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),
|
||||
);
|
||||
}
|
||||
|
Reference in New Issue
Block a user