From da025b16ffcdf644244b3fb0ff2434142ff0a06f Mon Sep 17 00:00:00 2001 From: nyne Date: Tue, 10 Dec 2024 16:01:06 +0800 Subject: [PATCH] improve performance & ui --- lib/components/comic.dart | 2 +- lib/components/loading.dart | 18 +++++++++++++++--- lib/components/menu.dart | 9 ++++++--- lib/pages/comic_page.dart | 26 +++++++++++--------------- lib/pages/explore_page.dart | 15 +++++++++------ 5 files changed, 42 insertions(+), 28 deletions(-) diff --git a/lib/components/comic.dart b/lib/components/comic.dart index ddccd21..55d0838 100644 --- a/lib/components/comic.dart +++ b/lib/components/comic.dart @@ -43,7 +43,7 @@ class ComicTile extends StatelessWidget { var renderBox = context.findRenderObject() as RenderBox; var size = renderBox.size; var location = renderBox.localToGlobal( - Offset(size.width / 2, size.height / 2), + Offset((size.width - 242) / 2, size.height / 2), ); showMenu(location, context); } diff --git a/lib/components/loading.dart b/lib/components/loading.dart index e03ba40..161bf8f 100644 --- a/lib/components/loading.dart +++ b/lib/components/loading.dart @@ -96,6 +96,20 @@ class ListLoadingIndicator extends StatelessWidget { } } +class SliverListLoadingIndicator extends StatelessWidget { + const SliverListLoadingIndicator({super.key}); + + @override + Widget build(BuildContext context) { + // SliverToBoxAdapter can not been lazy loaded. + // Use SliverList to make sure the animation can be lazy loaded. + return SliverList.list(children: const [ + SizedBox(), + ListLoadingIndicator(), + ]); + } +} + abstract class LoadingState extends State { bool isLoading = false; @@ -299,9 +313,7 @@ abstract class MultiPageLoadingState Widget buildLoading(BuildContext context) { return Center( - child: const CircularProgressIndicator( - strokeWidth: 2, - ).fixWidth(32).fixHeight(32), + child: const CircularProgressIndicator().fixWidth(32).fixHeight(32), ); } diff --git a/lib/components/menu.dart b/lib/components/menu.dart index 7ba17f0..411295f 100644 --- a/lib/components/menu.dart +++ b/lib/components/menu.dart @@ -42,6 +42,9 @@ class _MenuRoute extends PopupRoute { child: Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(4), + border: context.brightness == Brightness.dark + ? Border.all(color: context.colorScheme.outlineVariant) + : null, boxShadow: [ BoxShadow( color: context.colorScheme.shadow.withOpacity(0.2), @@ -51,10 +54,10 @@ class _MenuRoute extends PopupRoute { ], ), child: BlurEffect( - borderRadius: BorderRadius.circular(8), + borderRadius: BorderRadius.circular(4), child: Material( - color: context.colorScheme.surface.withOpacity(0.82), - borderRadius: BorderRadius.circular(8), + color: context.colorScheme.surface.withOpacity(0.78), + borderRadius: BorderRadius.circular(4), child: Container( width: width, padding: diff --git a/lib/pages/comic_page.dart b/lib/pages/comic_page.dart index 12d84f5..58c46f0 100644 --- a/lib/pages/comic_page.dart +++ b/lib/pages/comic_page.dart @@ -223,7 +223,8 @@ class _ComicPageState extends LoadingState children: [ SelectableText(comic.title, style: ts.s18), if (comic.subTitle != null) - SelectableText(comic.subTitle!, style: ts.s14).paddingVertical(4), + SelectableText(comic.subTitle!, style: ts.s14) + .paddingVertical(4), Text( (ComicSource.find(comic.sourceKey)?.name) ?? '', style: ts.s12, @@ -1115,14 +1116,12 @@ class _ComicChaptersState extends State<_ComicChapters> { (state.history?.readEpisode ?? const {}).contains(i + 1); return Padding( padding: const EdgeInsets.fromLTRB(8, 4, 8, 4), - child: InkWell( - borderRadius: const BorderRadius.all(Radius.circular(16)), - child: Material( - elevation: 5, - color: context.colorScheme.surface, - surfaceTintColor: context.colorScheme.surfaceTint, + child: Material( + color: context.colorScheme.surfaceContainer, + borderRadius: const BorderRadius.all(Radius.circular(12)), + child: InkWell( + onTap: () => state.read(i + 1), borderRadius: const BorderRadius.all(Radius.circular(12)), - shadowColor: Colors.transparent, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4), @@ -1133,19 +1132,18 @@ class _ComicChaptersState extends State<_ComicChapters> { textAlign: TextAlign.center, overflow: TextOverflow.ellipsis, style: TextStyle( - color: - visited ? context.colorScheme.outline : null), + color: visited ? context.colorScheme.outline : null, + ), ), ), ), ), - onTap: () => state.read(i + 1), ), ); }), gridDelegate: const SliverGridDelegateWithFixedHeight( maxCrossAxisExtent: 200, itemHeight: 48), - ), + ).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)), if (eps.length > 20 && !showAll) SliverToBoxAdapter( child: Align( @@ -1328,9 +1326,7 @@ class _ComicThumbnailsState extends State<_ComicThumbnails> { ), ) else if (isLoading) - const SliverToBoxAdapter( - child: ListLoadingIndicator(), - ), + const SliverListLoadingIndicator(), const SliverToBoxAdapter( child: Divider(), ), diff --git a/lib/pages/explore_page.dart b/lib/pages/explore_page.dart index 519f8c5..2c10f52 100644 --- a/lib/pages/explore_page.dart +++ b/lib/pages/explore_page.dart @@ -1,4 +1,5 @@ import 'package:flutter/material.dart'; +import 'package:sliver_tools/sliver_tools.dart'; import 'package:venera/components/components.dart'; import 'package:venera/foundation/app.dart'; import 'package:venera/foundation/appdata.dart'; @@ -110,7 +111,9 @@ class _ExplorePageState extends State return Tab(text: i.ts(comicSource.key), key: Key(i)); } - Widget buildBody(String i) => _SingleExplorePage(i, key: PageStorageKey(i)); + Widget buildBody(String i) => Material( + child: _SingleExplorePage(i, key: PageStorageKey(i)), + ); Widget buildEmpty() { var msg = "No Explore Pages".tl; @@ -401,7 +404,7 @@ class _MixedExplorePageState controller: widget.controller, slivers: [ ...buildSlivers(context, data), - if (haveNextPage) const ListLoadingIndicator().toSliver() + const SliverListLoadingIndicator(), ], ); } @@ -514,10 +517,10 @@ class _MultiPartExplorePageState extends State<_MultiPartExplorePage> { String? message; Map get state => { - "loading": loading, - "message": message, - "parts": parts, - }; + "loading": loading, + "message": message, + "parts": parts, + }; void restoreState(dynamic state) { if (state == null) return;