Improve UI

2025-09-27 15:57:25 +00:00 · 2025-01-15 18:24:38 +08:00
parent d874920c88
commit 399b9abaee
9 changed files with 358 additions and 227 deletions
--- a/lib/pages/aggregated_search_page.dart
+++ b/lib/pages/aggregated_search_page.dart
@@ -1,14 +1,11 @@
 import "package:flutter/material.dart";
-import "package:shimmer/shimmer.dart";
+import 'package:shimmer_animation/shimmer_animation.dart';
 import "package:venera/components/components.dart";
 import "package:venera/foundation/app.dart";
 import "package:venera/foundation/comic_source/comic_source.dart";
-import "package:venera/foundation/image_provider/cached_image.dart";
 import "package:venera/pages/search_result_page.dart";
 import "package:venera/utils/translations.dart";

-import "comic_page.dart";
-
 class AggregatedSearchPage extends StatefulWidget {
  const AggregatedSearchPage({super.key, required this.keyword});

@@ -73,9 +70,9 @@ class _SliverSearchResultState extends State<_SliverSearchResult>
    with AutomaticKeepAliveClientMixin {
  bool isLoading = true;

-  static const _kComicHeight = 144.0;
+  static const _kComicHeight = 132.0;

-  get _comicWidth => _kComicHeight * 0.72;
+  get _comicWidth => _kComicHeight * 0.7;

  static const _kLeftPadding = 16.0;

@@ -123,28 +120,9 @@ class _SliverSearchResultState extends State<_SliverSearchResult>
  }

  Widget buildComic(Comic c) {
-    return AnimatedTapRegion(
-      borderRadius: 8,
-      onTap: () {
-        context.to(() => ComicPage(
-          id: c.id,
-          sourceKey: c.sourceKey,
-        ));
-      },
-      child: Container(
-        height: _kComicHeight,
-        width: _comicWidth,
-        decoration: BoxDecoration(
-          color: context.colorScheme.surfaceContainerLow,
-        ),
-        child: AnimatedImage(
-          width: _comicWidth,
-          height: _kComicHeight,
-          fit: BoxFit.cover,
-          image: CachedImageProvider(c.cover),
-        ),
-      ),
-    ).paddingLeft(_kLeftPadding);
+    return SimpleComicTile(comic: c)
+        .paddingLeft(_kLeftPadding)
+        .paddingBottom(2);
  }

  @override
@@ -169,10 +147,7 @@ class _SliverSearchResultState extends State<_SliverSearchResult>
            SizedBox(
              height: _kComicHeight,
              width: double.infinity,
-              child: Shimmer.fromColors(
-                baseColor: context.colorScheme.surfaceContainerLow,
-                highlightColor: context.colorScheme.surfaceContainer,
-                direction: ShimmerDirection.ltr,
+              child: Shimmer(
                child: LayoutBuilder(builder: (context, constrains) {
                  var itemWidth = _comicWidth + _kLeftPadding;
                  var items = (constrains.maxWidth / itemWidth).ceil();
--- a/lib/pages/comic_page.dart
+++ b/lib/pages/comic_page.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:shimmer_animation/shimmer_animation.dart';
 import 'package:sliver_tools/sliver_tools.dart';
 import 'package:url_launcher/url_launcher_string.dart';
 import 'package:venera/components/components.dart';
@@ -26,12 +27,22 @@ import 'dart:math' as math;
 import 'comments_page.dart';

 class ComicPage extends StatefulWidget {
-  const ComicPage({super.key, required this.id, required this.sourceKey});
+  const ComicPage({
+    super.key,
+    required this.id,
+    required this.sourceKey,
+    this.cover,
+    this.title,
+  });

  final String id;

  final String sourceKey;

+  final String? cover;
+
+  final String? title;
+
  @override
  State<ComicPage> createState() => _ComicPageState();
 }
@@ -55,13 +66,11 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>

  @override
  Widget buildLoading() {
-    return Column(
-      children: [
-        const Appbar(title: Text("")),
-        Expanded(
-          child: super.buildLoading(),
-        ),
-      ],
+    return _ComicPageLoadingPlaceHolder(
+      cover: widget.cover,
+      title: widget.title,
+      sourceKey: widget.sourceKey,
+      cid: widget.id,
    );
  }

@@ -201,21 +210,32 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(width: 16),
-        Container(
-          decoration: BoxDecoration(
-            color: context.colorScheme.primaryContainer,
-            borderRadius: BorderRadius.circular(8),
-          ),
-          height: 144,
-          width: 144 * 0.72,
-          clipBehavior: Clip.antiAlias,
-          child: AnimatedImage(
-            image: CachedImageProvider(
-              comic.cover,
-              sourceKey: comic.sourceKey,
+        Hero(
+          tag: "cover${comic.id}${comic.sourceKey}",
+          child: Container(
+            decoration: BoxDecoration(
+              color: context.colorScheme.primaryContainer,
+              borderRadius: BorderRadius.circular(8),
+              boxShadow: [
+                BoxShadow(
+                  color: context.colorScheme.outlineVariant,
+                  blurRadius: 1,
+                  offset: const Offset(0, 1),
+                ),
+              ],
+            ),
+            height: 144,
+            width: 144 * 0.72,
+            clipBehavior: Clip.antiAlias,
+            child: AnimatedImage(
+              image: CachedImageProvider(
+                widget.cover ?? comic.cover,
+                sourceKey: comic.sourceKey,
+                cid: comic.id,
+              ),
+              width: double.infinity,
+              height: double.infinity,
            ),
-            width: double.infinity,
-            height: double.infinity,
          ),
        ),
        const SizedBox(width: 16),
@@ -1946,3 +1966,124 @@ class _CommentWidget extends StatelessWidget {
    );
  }
 }
+
+class _ComicPageLoadingPlaceHolder extends StatelessWidget {
+  const _ComicPageLoadingPlaceHolder({
+    this.cover,
+    this.title,
+    required this.sourceKey,
+    required this.cid,
+  });
+
+  final String? cover;
+
+  final String? title;
+
+  final String sourceKey;
+
+  final String cid;
+
+  @override
+  Widget build(BuildContext context) {
+    Widget buildContainer(double? width, double? height,
+        {Color? color, double? radius}) {
+      return Container(
+        height: height,
+        width: width,
+        decoration: BoxDecoration(
+          color: color ?? context.colorScheme.surfaceContainerLow,
+          borderRadius: BorderRadius.circular(radius ?? 4),
+        ),
+      );
+    }
+
+    return Shimmer(
+      child: Column(
+        children: [
+          Appbar(title: Text(""), backgroundColor: context.colorScheme.surface),
+          const SizedBox(height: 8),
+          Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              const SizedBox(width: 16),
+              buildImage(context),
+              const SizedBox(width: 16),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    if (title != null)
+                      Text(title ?? "", style: ts.s18)
+                    else
+                      buildContainer(200, 25),
+                    const SizedBox(height: 8),
+                    buildContainer(80, 20),
+                  ],
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          if (context.width < changePoint)
+            Row(
+              children: [
+                Expanded(
+                  child: buildContainer(null, 36, radius: 18),
+                ),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: buildContainer(null, 36, radius: 18),
+                ),
+              ],
+            ).paddingHorizontal(16),
+          const Divider(),
+          const SizedBox(height: 8),
+          Center(
+            child: CircularProgressIndicator(
+              strokeWidth: 2.4,
+            ).fixHeight(24).fixWidth(24),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget buildImage(BuildContext context) {
+    Widget child;
+    if (cover != null) {
+      child = AnimatedImage(
+        image: CachedImageProvider(
+          cover!,
+          sourceKey: sourceKey,
+          cid: cid,
+        ),
+        width: double.infinity,
+        height: double.infinity,
+        fit: BoxFit.cover,
+      );
+    } else {
+      child = const SizedBox();
+    }
+
+    return Hero(
+      tag: "cover$cid$sourceKey",
+      child: Container(
+        decoration: BoxDecoration(
+          color: context.colorScheme.primaryContainer,
+          borderRadius: BorderRadius.circular(8),
+          boxShadow: [
+            BoxShadow(
+              color: context.colorScheme.outlineVariant,
+              blurRadius: 1,
+              offset: const Offset(0, 1),
+            ),
+          ],
+        ),
+        height: 144,
+        width: 144 * 0.72,
+        clipBehavior: Clip.antiAlias,
+        child: child,
+      ),
+    );
+  }
+}
--- a/lib/pages/home_page.dart
+++ b/lib/pages/home_page.dart
@@ -6,8 +6,6 @@ import 'package:venera/foundation/comic_source/comic_source.dart';
 import 'package:venera/foundation/consts.dart';
 import 'package:venera/foundation/favorites.dart';
 import 'package:venera/foundation/history.dart';
-import 'package:venera/foundation/image_provider/history_image_provider.dart';
-import 'package:venera/foundation/image_provider/local_comic_image.dart';
 import 'package:venera/foundation/local.dart';
 import 'package:venera/foundation/log.dart';
 import 'package:venera/pages/accounts_page.dart';
@@ -267,8 +265,8 @@ class _HistoryState extends State<_History> {
                    scrollDirection: Axis.horizontal,
                    itemCount: history.length,
                    itemBuilder: (context, index) {
-                      return AnimatedTapRegion(
-                        borderRadius: 8,
+                      return SimpleComicTile(
+                        comic: history[index],
                        onTap: () {
                          context.to(
                            () => ComicPage(
@@ -277,25 +275,7 @@ class _HistoryState extends State<_History> {
                            ),
                          );
                        },
-                        child: Container(
-                          width: 92,
-                          height: 114,
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(8),
-                            color: Theme.of(context)
-                                .colorScheme
-                                .secondaryContainer,
-                          ),
-                          clipBehavior: Clip.antiAlias,
-                          child: AnimatedImage(
-                            image: HistoryImageProvider(history[index]),
-                            width: 96,
-                            height: 128,
-                            fit: BoxFit.cover,
-                            filterQuality: FilterQuality.medium,
-                          ),
-                        ),
-                      ).paddingHorizontal(8);
+                      ).paddingHorizontal(8).paddingVertical(2);
                    },
                  ),
                ).paddingHorizontal(8).paddingBottom(16),
@@ -388,32 +368,8 @@ class _LocalState extends State<_Local> {
                    scrollDirection: Axis.horizontal,
                    itemCount: local.length,
                    itemBuilder: (context, index) {
-                      return AnimatedTapRegion(
-                        onTap: () {
-                          local[index].read();
-                        },
-                        borderRadius: 8,
-                        child: Container(
-                          width: 92,
-                          height: 114,
-                          decoration: BoxDecoration(
-                            borderRadius: BorderRadius.circular(8),
-                            color: Theme.of(context)
-                                .colorScheme
-                                .secondaryContainer,
-                          ),
-                          clipBehavior: Clip.antiAlias,
-                          child: AnimatedImage(
-                            image: LocalComicImageProvider(
-                              local[index],
-                            ),
-                            width: 96,
-                            height: 128,
-                            fit: BoxFit.cover,
-                            filterQuality: FilterQuality.medium,
-                          ),
-                        ),
-                      ).paddingHorizontal(8);
+                      return SimpleComicTile(comic: local[index])
+                          .paddingHorizontal(8);
                    },
                  ),
                ).paddingHorizontal(8),