动画效果美化

2026-05-23 17:25:48 +08:00
parent c6ba9da0ab
commit 254ddd8970
17 changed files with 1911 additions and 1073 deletions
--- a/lib/widgets/animated_star_rating.dart
+++ b/lib/widgets/animated_star_rating.dart
@@ -0,0 +1,96 @@
+import 'package:flutter/material.dart';
+
+/// 带动画的星级评分组件 — 星星依次亮起 + 数字滚动
+class AnimatedStarRating extends StatefulWidget {
+  final double rating;
+  final double starSize;
+  final Color color;
+  final bool showNumber;
+
+  const AnimatedStarRating({
+    super.key,
+    required this.rating,
+    this.starSize = 14,
+    this.color = const Color(0xFFFFB800),
+    this.showNumber = false,
+  });
+
+  @override
+  State<AnimatedStarRating> createState() => _AnimatedStarRatingState();
+}
+
+class _AnimatedStarRatingState extends State<AnimatedStarRating>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late List<Animation<double>> _animations;
+  late Animation<double> _numberAnim;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 600),
+    );
+    _animations = List.generate(5, (i) {
+      return CurvedAnimation(
+        parent: _controller,
+        curve: Interval(i * 0.12, (i * 0.12) + 0.35, curve: Curves.easeOutBack),
+      );
+    });
+    _numberAnim = Tween<double>(begin: 0, end: widget.rating).animate(
+      CurvedAnimation(
+        parent: _controller,
+        curve: const Interval(0.1, 0.8, curve: Curves.easeOut),
+      ),
+    );
+    _controller.forward();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final starValue = widget.rating / 2;
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        ...List.generate(5, (index) {
+          final starIndex = index + 1;
+          IconData iconData;
+          if (starValue >= starIndex) {
+            iconData = Icons.star;
+          } else if (starValue >= starIndex - 0.5) {
+            iconData = Icons.star_half;
+          } else {
+            iconData = Icons.star_border;
+          }
+          return ScaleTransition(
+            scale: _animations[index],
+            child: Icon(iconData, size: widget.starSize, color: widget.color),
+          );
+        }),
+        if (widget.showNumber) ...[
+          const SizedBox(width: 4),
+          AnimatedBuilder(
+            animation: _numberAnim,
+            builder: (context, child) {
+              return Text(
+                _numberAnim.value.toStringAsFixed(1),
+                style: TextStyle(
+                  fontSize: widget.starSize,
+                  fontWeight: FontWeight.w600,
+                  color: const Color(0xFF666666),
+                ),
+              );
+            },
+          ),
+        ],
+      ],
+    );
+  }
+}
--- a/lib/widgets/app_refresh_indicator.dart
+++ b/lib/widgets/app_refresh_indicator.dart
@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+
+/// 自定义下拉刷新包装器 — 统一使用品牌色
+class AppRefreshIndicator extends StatelessWidget {
+  final Future<void> Function() onRefresh;
+  final Widget child;
+  final String? semanticsLabel;
+
+  const AppRefreshIndicator({
+    super.key,
+    required this.onRefresh,
+    required this.child,
+    this.semanticsLabel,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return RefreshIndicator(
+      onRefresh: onRefresh,
+      color: const Color(0xFF1A1A1A),
+      backgroundColor: Colors.white,
+      strokeWidth: 2.5,
+      displacement: 60,
+      semanticsLabel: semanticsLabel,
+      child: child,
+    );
+  }
+}
--- a/lib/widgets/book_list_item.dart
+++ b/lib/widgets/book_list_item.dart
@@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../models/data_models.dart';
 import '../providers/app_provider.dart';
+import '../widgets/fade_in_local_image.dart';
+import '../widgets/animated_star_rating.dart';
 import '../utils/toast_util.dart';

 /// 书籍列表项组件 - 网格布局设计
@@ -42,9 +44,9 @@ class BookListItem extends StatelessWidget {

          const SizedBox(height: 4),

-          // 评分 - 5星显示
+          // 评分
          if (book.rating != null)
-            _buildStarRating(book.rating!)
+            AnimatedStarRating(rating: book.rating!, starSize: 12, showNumber: true)
          else
            const SizedBox(height: 16),
        ],
@@ -57,75 +59,19 @@ class BookListItem extends StatelessWidget {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
-        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: const Color(0xFFE5E5E5), width: 0.5),
      ),
      clipBehavior: Clip.antiAlias,
-      child: book.coverPath != null && book.coverPath!.isNotEmpty
-          ? Image.file(
-              File(book.coverPath!),
-              fit: BoxFit.cover,
-              errorBuilder: (_, __, ___) => _buildCoverPlaceholder(),
-            )
-          : _buildCoverPlaceholder(),
-    );
-  }
-
-  Widget _buildCoverPlaceholder() {
-    return const Center(
-      child: Icon(
-        Icons.menu_book_outlined,
-        size: 32,
-        color: Color(0xFFCCCCCC),
+      child: FadeInLocalImage(
+        path: book.coverPath,
+        fit: BoxFit.cover,
+        placeholder: const Center(child: Icon(Icons.menu_book_outlined, size: 32, color: Color(0xFFCCCCCC))),
+        errorWidget: const Center(child: Icon(Icons.menu_book_outlined, size: 32, color: Color(0xFFCCCCCC))),
      ),
    );
  }

-  /// 构建5星评分显示（评分范围1-10，每星2分）
-  Widget _buildStarRating(double rating) {
-    // 将10分制转换为5星制
-    final starValue = rating / 2;
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        // 5个星星
-        ...List.generate(5, (index) {
-          final starIndex = index + 1;
-          IconData iconData;
-
-          if (starValue >= starIndex) {
-            // 满星
-            iconData = Icons.star;
-          } else if (starValue >= starIndex - 0.5) {
-            // 半星
-            iconData = Icons.star_half;
-          } else {
-            // 空星
-            iconData = Icons.star_border;
-          }
-
-          return Icon(
-            iconData,
-            size: 12,
-            color: const Color(0xFFFFB800),
-          );
-        }),
-        const SizedBox(width: 4),
-        // 评分数字
-        Text(
-          rating.toStringAsFixed(1),
-          style: const TextStyle(
-            fontSize: 12,
-            fontWeight: FontWeight.w500,
-            color: Color(0xFF666666),
-          ),
-        ),
-      ],
-    );
-  }
-
  /// 显示删除确认对话框
  void _showDeleteDialog(BuildContext context) {
    showDialog(
--- a/lib/widgets/fade_in_local_image.dart
+++ b/lib/widgets/fade_in_local_image.dart
@@ -0,0 +1,111 @@
+import 'dart:io';
+import 'package:flutter/material.dart';
+
+/// 带淡入动画的本地图片组件
+class FadeInLocalImage extends StatefulWidget {
+  final String? path;
+  final double? width;
+  final double? height;
+  final BoxFit fit;
+  final Widget? placeholder;
+  final Widget? errorWidget;
+  final Duration duration;
+
+  const FadeInLocalImage({
+    super.key,
+    required this.path,
+    this.width,
+    this.height,
+    this.fit = BoxFit.cover,
+    this.placeholder,
+    this.errorWidget,
+    this.duration = const Duration(milliseconds: 400),
+  });
+
+  @override
+  State<FadeInLocalImage> createState() => _FadeInLocalImageState();
+}
+
+class _FadeInLocalImageState extends State<FadeInLocalImage>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _opacity;
+  bool _loaded = false;
+  bool _error = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(vsync: this, duration: widget.duration);
+    _opacity = CurvedAnimation(parent: _controller, curve: Curves.easeIn);
+    _checkFile();
+  }
+
+  void _checkFile() {
+    if (widget.path == null || widget.path!.isEmpty) {
+      setState(() => _error = true);
+      return;
+    }
+    final file = File(widget.path!);
+    if (!file.existsSync()) {
+      setState(() => _error = true);
+      return;
+    }
+    setState(() => _loaded = true);
+    _controller.forward();
+  }
+
+  @override
+  void didUpdateWidget(FadeInLocalImage oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (widget.path != oldWidget.path) {
+      _error = false;
+      _loaded = false;
+      _controller.reset();
+      _checkFile();
+    }
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    if (_error) {
+      return widget.errorWidget ??
+          Container(
+            width: widget.width,
+            height: widget.height,
+            color: const Color(0xFFF5F5F5),
+            child: const Icon(Icons.broken_image_outlined, size: 24, color: Color(0xFFCCCCCC)),
+          );
+    }
+    if (!_loaded) {
+      return widget.placeholder ??
+          Container(
+            width: widget.width,
+            height: widget.height,
+            color: const Color(0xFFF5F5F5),
+          );
+    }
+    return FadeTransition(
+      opacity: _opacity,
+      child: Image.file(
+        File(widget.path!),
+        width: widget.width,
+        height: widget.height,
+        fit: widget.fit,
+        errorBuilder: (_, __, ___) => widget.errorWidget ??
+            Container(
+              width: widget.width,
+              height: widget.height,
+              color: const Color(0xFFF5F5F5),
+              child: const Icon(Icons.broken_image_outlined, size: 24, color: Color(0xFFCCCCCC)),
+            ),
+      ),
+    );
+  }
+}
--- a/lib/widgets/movie_list_item.dart
+++ b/lib/widgets/movie_list_item.dart
@@ -3,6 +3,8 @@ import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import '../models/data_models.dart';
 import '../providers/app_provider.dart';
+import '../widgets/fade_in_local_image.dart';
+import '../widgets/animated_star_rating.dart';
 import '../utils/toast_util.dart';

 /// 观影列表项组件 - 网格布局设计
@@ -42,9 +44,9 @@ class MovieListItem extends StatelessWidget {

          const SizedBox(height: 4),

-          // 评分 - 5星显示
+          // 评分
          if (movie.rating != null)
-            _buildStarRating(movie.rating!)
+            AnimatedStarRating(rating: movie.rating!, starSize: 12, showNumber: true)
          else
            const SizedBox(height: 16),
        ],
@@ -57,75 +59,19 @@ class MovieListItem extends StatelessWidget {
    return Container(
      width: double.infinity,
      decoration: BoxDecoration(
-        color: const Color(0xFFF5F5F5),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(color: const Color(0xFFE5E5E5), width: 0.5),
      ),
      clipBehavior: Clip.antiAlias,
-      child: movie.posterPath != null && movie.posterPath!.isNotEmpty
-          ? Image.file(
-              File(movie.posterPath!),
-              fit: BoxFit.cover,
-              errorBuilder: (_, __, ___) => _buildPosterPlaceholder(),
-            )
-          : _buildPosterPlaceholder(),
-    );
-  }
-  
-  Widget _buildPosterPlaceholder() {
-    return const Center(
-      child: Icon(
-        Icons.movie_outlined,
-        size: 24,
-        color: Color(0xFFCCCCCC),
+      child: FadeInLocalImage(
+        path: movie.posterPath,
+        fit: BoxFit.cover,
+        placeholder: const Center(child: Icon(Icons.movie_outlined, size: 24, color: Color(0xFFCCCCCC))),
+        errorWidget: const Center(child: Icon(Icons.movie_outlined, size: 24, color: Color(0xFFCCCCCC))),
      ),
    );
  }
-
-  /// 构建5星评分显示（评分范围1-10，每星2分）
-  Widget _buildStarRating(double rating) {
-    // 将10分制转换为5星制
-    final starValue = rating / 2;
-
-    return Row(
-      mainAxisSize: MainAxisSize.min,
-      children: [
-        // 5个星星
-        ...List.generate(5, (index) {
-          final starIndex = index + 1;
-          IconData iconData;
-
-          if (starValue >= starIndex) {
-            // 满星
-            iconData = Icons.star;
-          } else if (starValue >= starIndex - 0.5) {
-            // 半星
-            iconData = Icons.star_half;
-          } else {
-            // 空星
-            iconData = Icons.star_border;
-          }
-
-          return Icon(
-            iconData,
-            size: 12,
-            color: const Color(0xFFFFB800),
-          );
-        }),
-        const SizedBox(width: 4),
-        // 评分数字
-        Text(
-          rating.toStringAsFixed(1),
-          style: const TextStyle(
-            fontSize: 12,
-            fontWeight: FontWeight.w500,
-            color: Color(0xFF666666),
-          ),
-        ),
-      ],
-    );
-  }
-
+  
  /// 显示删除确认对话框
  void _showDeleteDialog(BuildContext context) {
    showDialog(
--- a/lib/widgets/shimmer_skeleton.dart
+++ b/lib/widgets/shimmer_skeleton.dart
@@ -0,0 +1,168 @@
+import 'package:flutter/material.dart';
+
+/// 骨架屏加载组件 — 闪烁占位动画
+class ShimmerSkeleton extends StatefulWidget {
+  final double width;
+  final double height;
+  final double borderRadius;
+
+  const ShimmerSkeleton({
+    super.key,
+    required this.width,
+    required this.height,
+    this.borderRadius = 6,
+  });
+
+  @override
+  State<ShimmerSkeleton> createState() => _ShimmerSkeletonState();
+}
+
+class _ShimmerSkeletonState extends State<ShimmerSkeleton>
+    with SingleTickerProviderStateMixin {
+  late AnimationController _controller;
+  late Animation<double> _animation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      vsync: this,
+      duration: const Duration(milliseconds: 1000),
+    )..repeat(reverse: true);
+    _animation = Tween<double>(begin: 0.3, end: 1.0).animate(
+      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
+    );
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AnimatedBuilder(
+      animation: _animation,
+      builder: (context, child) {
+        return Container(
+          width: widget.width,
+          height: widget.height,
+          decoration: BoxDecoration(
+            color: const Color(0xFFE0E0E0).withValues(alpha: _animation.value),
+            borderRadius: BorderRadius.circular(widget.borderRadius),
+          ),
+        );
+      },
+    );
+  }
+}
+
+/// 影视骨架屏
+class MovieSkeletonGrid extends StatelessWidget {
+  const MovieSkeletonGrid({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        childAspectRatio: 0.55,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 16,
+      ),
+      itemCount: 9,
+      itemBuilder: (_, __) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: ShimmerSkeleton(
+              width: double.infinity,
+              height: double.infinity,
+              borderRadius: 8,
+            ),
+          ),
+          const SizedBox(height: 8),
+          const ShimmerSkeleton(width: double.infinity, height: 14),
+          const SizedBox(height: 4),
+          const ShimmerSkeleton(width: 70, height: 12),
+        ],
+      ),
+    );
+  }
+}
+
+/// 书籍骨架屏
+class BookSkeletonGrid extends StatelessWidget {
+  const BookSkeletonGrid({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      padding: const EdgeInsets.fromLTRB(16, 16, 16, 100),
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 3,
+        childAspectRatio: 0.55,
+        crossAxisSpacing: 12,
+        mainAxisSpacing: 16,
+      ),
+      itemCount: 9,
+      itemBuilder: (_, __) => Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Expanded(
+            child: ShimmerSkeleton(
+              width: double.infinity,
+              height: double.infinity,
+              borderRadius: 4,
+            ),
+          ),
+          const SizedBox(height: 8),
+          const ShimmerSkeleton(width: double.infinity, height: 14),
+          const SizedBox(height: 4),
+          const ShimmerSkeleton(width: 70, height: 12),
+        ],
+      ),
+    );
+  }
+}
+
+/// 笔记列表骨架屏
+class NoteSkeletonList extends StatelessWidget {
+  const NoteSkeletonList({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return ListView.builder(
+      padding: const EdgeInsets.fromLTRB(12, 10, 12, 100),
+      itemCount: 6,
+      itemBuilder: (_, __) => Container(
+        margin: const EdgeInsets.only(bottom: 8),
+        padding: const EdgeInsets.all(12),
+        decoration: BoxDecoration(
+          color: const Color(0xFFF8F8F8),
+          borderRadius: BorderRadius.circular(8),
+        ),
+        child: const Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Row(
+              children: [
+                ShimmerSkeleton(width: 60, height: 12),
+                SizedBox(width: 8),
+                ShimmerSkeleton(width: 24, height: 12),
+              ],
+            ),
+            SizedBox(height: 8),
+            ShimmerSkeleton(width: 150, height: 16),
+            SizedBox(height: 6),
+            ShimmerSkeleton(width: double.infinity, height: 13),
+            SizedBox(height: 4),
+            ShimmerSkeleton(width: 200, height: 13),
+          ],
+        ),
+      ),
+    );
+  }
+}