feat: 开屏后直接展示首页骨架

lib/core/theme/app_colors.dart

@@ -78,6 +78,7 @@ abstract final class AppColors {
   /// 中性深灰卡片与控件表面。
   static const contentCard = Color(0xFF16161A);
   static const contentSurface = Color(0xFF1C1C1E);
+  static const skeletonSurface = Color(0xFF141414);
   static const contentChip = Color(0xFF2C2C2E);
   static const contentBorder = Color(0x1AFFFFFF);
   static const filterChipSelected = Color(0xFF21090E);

lib/core/theme/app_dimens.dart

@@ -110,6 +110,11 @@ abstract final class AppDimens {
   static const double cardBadgeFont = 9;
   static const double cardCoverTitleGap = 6;
   static const double cardTitleTagGap = 6;
+  static const double skeletonBarHeight = 10;
+  static const double skeletonBarRadius = 4;
+  static const double skeletonBarGap = 4;
+  static const double skeletonTitleBarGap = 3;
+  static const double skeletonBodyExtent = 34;
   static const double cardCoverAspectRatio = 3 / 4;
   static const double homeCardBodyExtent = 84;
   static const double homePrimaryTabFont = 18;

lib/core/widgets/drama_grid_skeleton.dart

@@ -0,0 +1,96 @@
+// Author: fruit.com.cn
+
+import 'package:flutter/material.dart';
+
+import '../theme/app_colors.dart';
+import '../theme/app_dimens.dart';
+
+class DramaGridSkeleton extends StatelessWidget {
+  const DramaGridSkeleton({
+    super.key,
+    required this.columns,
+    required this.horizontalPadding,
+    required this.crossAxisSpacing,
+    required this.mainAxisSpacing,
+    this.itemCount = 9,
+    this.physics = const NeverScrollableScrollPhysics(),
+  });
+
+  final int columns;
+  final double horizontalPadding;
+  final double crossAxisSpacing;
+  final double mainAxisSpacing;
+  final int itemCount;
+  final ScrollPhysics physics;
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final itemWidth =
+            (constraints.maxWidth -
+                horizontalPadding * 2 -
+                crossAxisSpacing * (columns - 1)) /
+            columns;
+        final itemExtent =
+            itemWidth / AppDimens.cardCoverAspectRatio +
+            AppDimens.skeletonBodyExtent;
+        return GridView.builder(
+          physics: physics,
+          padding: EdgeInsets.fromLTRB(
+            horizontalPadding,
+            AppDimens.spaceMd,
+            horizontalPadding,
+            AppDimens.spaceXl,
+          ),
+          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: columns,
+            crossAxisSpacing: crossAxisSpacing,
+            mainAxisSpacing: mainAxisSpacing,
+            mainAxisExtent: itemExtent,
+          ),
+          itemCount: itemCount,
+          itemBuilder: (context, index) => Column(
+            key: Key('drama-grid-skeleton-$index'),
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              AspectRatio(
+                aspectRatio: AppDimens.cardCoverAspectRatio,
+                child: Container(
+                  decoration: BoxDecoration(
+                    color: AppColors.skeletonSurface,
+                    borderRadius: BorderRadius.circular(
+                      AppDimens.homeCardRadius,
+                    ),
+                  ),
+                ),
+              ),
+              const SizedBox(height: AppDimens.cardCoverTitleGap),
+              const _SkeletonBar(),
+              const SizedBox(height: AppDimens.skeletonTitleBarGap),
+              const FractionallySizedBox(
+                widthFactor: 0.62,
+                child: _SkeletonBar(),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
+
+class _SkeletonBar extends StatelessWidget {
+  const _SkeletonBar();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: AppDimens.skeletonBarHeight,
+      decoration: BoxDecoration(
+        color: AppColors.skeletonSurface,
+        borderRadius: BorderRadius.circular(AppDimens.skeletonBarRadius),
+      ),
+    );
+  }
+}