From 2db409b44909f2ce06a485248846e8ba67f12071 Mon Sep 17 00:00:00 2001
From: guozhigq <guozhigq@outlook.com>
Date: Sat, 23 Nov 2024 15:15:58 +0800
Subject: [PATCH] opt: video intro skeleton

---
 lib/common/skeleton/video_intro.dart          | 126 ++++++++++++++++++
 lib/pages/video/detail/introduction/view.dart |  25 +---
 2 files changed, 133 insertions(+), 18 deletions(-)
 create mode 100644 lib/common/skeleton/video_intro.dart

diff --git a/lib/common/skeleton/video_intro.dart b/lib/common/skeleton/video_intro.dart
new file mode 100644
index 00000000..b7a5ec74
--- /dev/null
+++ b/lib/common/skeleton/video_intro.dart
@@ -0,0 +1,126 @@
+import 'package:flutter/material.dart';
+import '../constants.dart';
+import 'skeleton.dart';
+
+class VideoIntroSkeleton extends StatelessWidget {
+  const VideoIntroSkeleton({Key? key}) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    Color bgColor = Theme.of(context).colorScheme.onInverseSurface;
+    return Skeleton(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            const SizedBox(height: 18),
+            Container(
+              width: double.infinity,
+              height: 20,
+              margin: const EdgeInsets.only(bottom: 6),
+              color: bgColor,
+            ),
+            Container(
+              width: 220,
+              height: 20,
+              margin: const EdgeInsets.only(bottom: 12),
+              color: bgColor,
+            ),
+            Row(
+              children: [
+                Container(
+                  width: 45,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const SizedBox(width: 8),
+                Container(
+                  width: 45,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const SizedBox(width: 8),
+                Container(
+                  width: 45,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const Spacer(),
+                Container(
+                  width: 35,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const SizedBox(width: 4),
+              ],
+            ),
+            const SizedBox(height: 30),
+            LayoutBuilder(builder: (context, constraints) {
+              // 并列5个正方形
+              double width = (constraints.maxWidth - 30) / 5;
+              return Row(
+                mainAxisAlignment: MainAxisAlignment.spaceAround,
+                children: List.generate(5, (index) {
+                  return Container(
+                    width: width - 24,
+                    height: width - 24,
+                    decoration: BoxDecoration(
+                      color: bgColor,
+                      borderRadius: BorderRadius.circular(16),
+                    ),
+                  );
+                }),
+              );
+            }),
+            const SizedBox(height: 20),
+            Container(
+              width: double.infinity,
+              height: 30,
+              margin: const EdgeInsets.symmetric(horizontal: 6),
+              decoration: BoxDecoration(
+                color: bgColor,
+                borderRadius: BorderRadius.circular(8),
+              ),
+            ),
+            const SizedBox(height: 20),
+            Row(
+              children: [
+                ClipOval(
+                  child: Container(
+                    width: 44,
+                    height: 44,
+                    color: bgColor,
+                  ),
+                ),
+                const SizedBox(width: 12),
+                Container(
+                  width: 50,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const SizedBox(width: 8),
+                Container(
+                  width: 35,
+                  height: 14,
+                  color: bgColor,
+                ),
+                const Spacer(),
+                Container(
+                  width: 55,
+                  height: 30,
+                  decoration: BoxDecoration(
+                    color: bgColor,
+                    borderRadius: BorderRadius.circular(16),
+                  ),
+                ),
+                const SizedBox(width: 2)
+              ],
+            ),
+            const SizedBox(height: 10),
+          ],
+        ),
+      ),
+    );
+  }
+}
diff --git a/lib/pages/video/detail/introduction/view.dart b/lib/pages/video/detail/introduction/view.dart
index 451173dd..d283d086 100644
--- a/lib/pages/video/detail/introduction/view.dart
+++ b/lib/pages/video/detail/introduction/view.dart
@@ -6,8 +6,8 @@ import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:flutter/material.dart';
 import 'package:hive/hive.dart';
-import 'package:lottie/lottie.dart';
 import 'package:pilipala/common/constants.dart';
+import 'package:pilipala/common/skeleton/video_intro.dart';
 import 'package:pilipala/common/widgets/http_error.dart';
 import 'package:pilipala/pages/video/detail/index.dart';
 import 'package:pilipala/common/widgets/network_img_layer.dart';
@@ -76,10 +76,8 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
       future: _futureBuilderFuture,
       builder: (context, snapshot) {
         if (snapshot.connectionState == ConnectionState.done) {
-          if (snapshot.data == null) {
-            return const SliverToBoxAdapter(child: SizedBox());
-          }
-          if (snapshot.data['status']) {
+          Map? data = snapshot.data;
+          if (data != null && data['status']) {
             // 请求成功
             return Obx(
               () => VideoInfo(
@@ -91,25 +89,16 @@ class _VideoIntroPanelState extends State<VideoIntroPanel>
           } else {
             // 请求错误
             return HttpError(
-              errMsg: snapshot.data['msg'],
-              btnText: snapshot.data['code'] == -404 ||
-                      snapshot.data['code'] == 62002
+              errMsg: data?['msg'] ?? '请求异常',
+              btnText: (data?['code'] == -404 || data?['code'] == 62002)
                   ? '返回上一页'
                   : null,
               fn: () => Get.back(),
             );
           }
         } else {
-          return SliverToBoxAdapter(
-            child: SizedBox(
-              height: 100,
-              child: Center(
-                child: Lottie.asset(
-                  'assets/loading.json',
-                  width: 200,
-                ),
-              ),
-            ),
+          return const SliverToBoxAdapter(
+            child: VideoIntroSkeleton(),
           );
         }
       },