mod: 骨架屏

lib/common/skeleton/video_reply.dart

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

lib/pages/video/detail/reply/view.dart

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