From f912e57bfd312fc04d400191414725977c6c100b Mon Sep 17 00:00:00 2001 From: AnxuNA <41771421+axlmly@users.noreply.github.com> Date: Thu, 14 Nov 2024 19:29:46 +0800 Subject: [PATCH] Change the style of _buildBriefMode. (#44) Change the style of _buildBriefMode --- lib/components/comic.dart | 247 ++++++++++++++++--------------------- lib/components/layout.dart | 20 +-- 2 files changed, 112 insertions(+), 155 deletions(-) diff --git a/lib/components/comic.dart b/lib/components/comic.dart index 70c9e3e..11d994b 100644 --- a/lib/components/comic.dart +++ b/lib/components/comic.dart @@ -25,8 +25,7 @@ class ComicTile extends StatelessWidget { onTap!(); return; } - App.mainNavigatorKey?.currentContext - ?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey)); + App.mainNavigatorKey?.currentContext?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey)); } void onLongPress(BuildContext context) { @@ -51,8 +50,7 @@ class ComicTile extends StatelessWidget { icon: Icons.chrome_reader_mode_outlined, text: 'Details'.tl, onClick: () { - App.mainNavigatorKey?.currentContext - ?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey)); + App.mainNavigatorKey?.currentContext?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey)); }, ), MenuEntry( @@ -84,17 +82,13 @@ class ComicTile extends StatelessWidget { Widget build(BuildContext context) { var type = appdata.settings['comicDisplayMode']; - Widget child = type == 'detailed' - ? _buildDetailedMode(context) - : _buildBriefMode(context); + Widget child = type == 'detailed' ? _buildDetailedMode(context) : _buildBriefMode(context); var isFavorite = appdata.settings['showFavoriteStatusOnTile'] - ? LocalFavoritesManager() - .isExist(comic.id, ComicType(comic.sourceKey.hashCode)) + ? LocalFavoritesManager().isExist(comic.id, ComicType(comic.sourceKey.hashCode)) : false; var history = appdata.settings['showHistoryStatusOnTile'] - ? HistoryManager() - .findSync(comic.id, ComicType(comic.sourceKey.hashCode)) + ? HistoryManager().findSync(comic.id, ComicType(comic.sourceKey.hashCode)) : null; if (history?.page == 0) { history!.page = 1; @@ -138,8 +132,7 @@ class ComicTile extends StatelessWidget { constraints: const BoxConstraints(minWidth: 24), padding: const EdgeInsets.symmetric(horizontal: 4), child: CustomPaint( - painter: - _ReadingHistoryPainter(history.page, history.maxPage), + painter: _ReadingHistoryPainter(history.page, history.maxPage), ), ) ], @@ -212,9 +205,7 @@ class ComicTile extends StatelessWidget { badge: badge ?? comic.language, tags: comic.tags, maxLines: 2, - enableTranslate: ComicSource.find(comic.sourceKey) - ?.enableTagsTranslate ?? - false, + enableTranslate: ComicSource.find(comic.sourceKey)?.enableTagsTranslate ?? false, rating: comic.stars, ), ), @@ -225,75 +216,82 @@ class ComicTile extends StatelessWidget { } Widget _buildBriefMode(BuildContext context) { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8), - child: Material( - color: Colors.transparent, - borderRadius: BorderRadius.circular(8), - elevation: 1, - child: Stack( - children: [ - Positioned.fill( - child: Container( - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.secondaryContainer, - borderRadius: BorderRadius.circular(8), + return LayoutBuilder( + builder: (context, constraints) { + return InkWell( + borderRadius: BorderRadius.circular(12), + onTap: _onTap, + onLongPress: enableLongPressed ? () => onLongPress(context) : null, + onSecondaryTapDown: (detail) => onSecondaryTap(detail, context), + child: Padding( + padding: const EdgeInsets.fromLTRB(8, 8, 8, 8), + child: Column( + children: [ + Expanded( + // Wrap the Container with Expanded + child: SizedBox( + width: constraints.maxWidth, + height: constraints.maxHeight, + child: Stack( + children: [ + Positioned.fill( + child: Container( + decoration: BoxDecoration( + color: Theme.of(context).colorScheme.secondaryContainer, + borderRadius: BorderRadius.circular(8), + ), + clipBehavior: Clip.antiAlias, + child: buildImage(context), + ), + ), + Positioned( + bottom: 0, + right: 0, + child: ClipRRect( + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(10.0), + topRight: Radius.circular(10.0), + ), + child: Container( + color: Colors.black.withOpacity(0.5), // 半透明黑色背景 + child: Padding( + padding: const EdgeInsets.fromLTRB(8, 4, 8, 4), + child: Text( + comic.description.replaceAll("\n", ""), + style: const TextStyle( + fontWeight: FontWeight.w500, + fontSize: 12, + color: Colors.white, + ), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + ), + ), + ), + ], + ), + ), ), - clipBehavior: Clip.antiAlias, - child: buildImage(context), - ), + Padding( + padding: const EdgeInsets.fromLTRB(8, 4, 8, 0), + child: Text( + comic.title.replaceAll("\n", ""), + style: const TextStyle( + fontWeight: FontWeight.w500, + fontSize: 14.0, + color: Colors.white, + ), + maxLines: 1, + overflow: TextOverflow.ellipsis, + ), + ), + ], ), - Positioned( - bottom: 0, - left: 0, - right: 0, - child: Container( - width: double.infinity, - decoration: BoxDecoration( - gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [ - Colors.transparent, - Colors.black.withOpacity(0.3), - Colors.black.withOpacity(0.5), - ]), - borderRadius: const BorderRadius.only( - bottomLeft: Radius.circular(8), - bottomRight: Radius.circular(8), - ), - ), - child: Padding( - padding: const EdgeInsets.fromLTRB(8, 4, 8, 4), - child: Text( - comic.title.replaceAll("\n", ""), - style: const TextStyle( - fontWeight: FontWeight.w500, - fontSize: 14.0, - color: Colors.white, - ), - maxLines: 2, - overflow: TextOverflow.ellipsis, - ), - ), - )), - Positioned.fill( - child: Material( - color: Colors.transparent, - child: InkWell( - onTap: _onTap, - onLongPress: - enableLongPressed ? () => onLongPress(context) : null, - onSecondaryTapDown: (detail) => - onSecondaryTap(detail, context), - borderRadius: BorderRadius.circular(8), - child: const SizedBox.expand(), - ), - ), - ) - ], - ), - ), + ), + ); + }, ); } @@ -340,9 +338,7 @@ class ComicTile extends StatelessWidget { } appdata.saveData(); context.showMessage(message: 'Blocked'.tl); - comicTileContext - .findAncestorStateOfType<_SliverGridComicsState>()! - .update(); + comicTileContext.findAncestorStateOfType<_SliverGridComicsState>()!.update(); }, child: Text('Block'.tl), ), @@ -383,8 +379,7 @@ class _ComicDescription extends StatelessWidget { s = s.replaceAll("\n", " "); } } - var enableTranslate = - App.locale.languageCode == 'zh' && this.enableTranslate; + var enableTranslate = App.locale.languageCode == 'zh' && this.enableTranslate; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -401,9 +396,7 @@ class _ComicDescription extends StatelessWidget { if (subtitle != "") Text( subtitle, - style: TextStyle( - fontSize: 10.0, - color: context.colorScheme.onSurface.withOpacity(0.7)), + style: TextStyle(fontSize: 10.0, color: context.colorScheme.onSurface.withOpacity(0.7)), maxLines: 1, softWrap: true, overflow: TextOverflow.ellipsis, @@ -440,18 +433,13 @@ class _ComicDescription extends StatelessWidget { decoration: BoxDecoration( color: s == "Unavailable" ? Theme.of(context).colorScheme.errorContainer - : Theme.of(context) - .colorScheme - .secondaryContainer, - borderRadius: - const BorderRadius.all(Radius.circular(8)), + : Theme.of(context).colorScheme.secondaryContainer, + borderRadius: const BorderRadius.all(Radius.circular(8)), ), child: Center( widthFactor: 1, child: Text( - enableTranslate - ? TagsTranslation.translateTag(s) - : s.split(':').last, + enableTranslate ? TagsTranslation.translateTag(s) : s.split(':').last, style: const TextStyle(fontSize: 12), softWrap: true, overflow: TextOverflow.ellipsis, @@ -522,20 +510,17 @@ class _ReadingHistoryPainter extends CustomPainter { textDirection: TextDirection.ltr, ); textPainter.layout(); - textPainter.paint( - canvas, - Offset((size.width - textPainter.width) / 2, - (size.height - textPainter.height) / 2)); + textPainter.paint(canvas, Offset((size.width - textPainter.width) / 2, (size.height - textPainter.height) / 2)); } else if (page == maxPage) { // 在中央绘制勾 final paint = Paint() ..color = Colors.white ..strokeWidth = 2 ..style = PaintingStyle.stroke; - canvas.drawLine(Offset(size.width * 0.2, size.height * 0.5), - Offset(size.width * 0.45, size.height * 0.75), paint); - canvas.drawLine(Offset(size.width * 0.45, size.height * 0.75), - Offset(size.width * 0.85, size.height * 0.3), paint); + canvas.drawLine( + Offset(size.width * 0.2, size.height * 0.5), Offset(size.width * 0.45, size.height * 0.75), paint); + canvas.drawLine( + Offset(size.width * 0.45, size.height * 0.75), Offset(size.width * 0.85, size.height * 0.3), paint); } else { // 在左上角绘制page, 在右下角绘制maxPage final textPainter = TextPainter( @@ -561,18 +546,13 @@ class _ReadingHistoryPainter extends CustomPainter { textDirection: TextDirection.ltr, ); textPainter2.layout(); - textPainter2.paint( - canvas, - Offset(size.width - textPainter2.width, - size.height - textPainter2.height)); + textPainter2.paint(canvas, Offset(size.width - textPainter2.width, size.height - textPainter2.height)); } } @override bool shouldRepaint(covariant CustomPainter oldDelegate) { - return oldDelegate is! _ReadingHistoryPainter || - oldDelegate.page != page || - oldDelegate.maxPage != maxPage; + return oldDelegate is! _ReadingHistoryPainter || oldDelegate.page != page || oldDelegate.maxPage != maxPage; } } @@ -683,8 +663,7 @@ class _SliverGridComics extends StatelessWidget { onLastItemBuild?.call(); } var badge = badgeBuilder?.call(comics[index]); - var isSelected = - selection == null ? false : selection![comics[index]] ?? false; + var isSelected = selection == null ? false : selection![comics[index]] ?? false; var comic = ComicTile( comic: comics[index], badge: badge, @@ -693,9 +672,7 @@ class _SliverGridComics extends StatelessWidget { ); return Container( decoration: BoxDecoration( - color: isSelected - ? Theme.of(context).colorScheme.surfaceContainer - : null, + color: isSelected ? Theme.of(context).colorScheme.surfaceContainer : null, borderRadius: BorderRadius.circular(12), ), margin: const EdgeInsets.all(4), @@ -820,9 +797,7 @@ class ComicListState extends State { decoration: InputDecoration( labelText: "Page".tl, ), - inputFormatters: [ - FilteringTextInputFormatter.digitsOnly - ], + inputFormatters: [FilteringTextInputFormatter.digitsOnly], onChanged: (v) { value = v; }, @@ -835,15 +810,13 @@ class ComicListState extends State { if (page == null) { context.showMessage(message: "Invalid page".tl); } else { - if (page > 0 && - (_maxPage == null || page <= _maxPage!)) { + if (page > 0 && (_maxPage == null || page <= _maxPage!)) { setState(() { _error = null; _page = page; }); } else { - context.showMessage( - message: "Invalid page".tl); + context.showMessage(message: "Invalid page".tl); } } }, @@ -855,8 +828,7 @@ class ComicListState extends State { ); }, child: Padding( - padding: - const EdgeInsets.symmetric(horizontal: 16, vertical: 6), + padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6), child: Text("Page $_page / ${_maxPage ?? '?'}"), ), ), @@ -987,8 +959,7 @@ class ComicListState extends State { comics: _data[_page] ?? const [], menuBuilder: widget.menuBuilder, ), - if (_data[_page]!.length > 6 && _maxPage != 1) - _buildSliverPageSelector(), + if (_data[_page]!.length > 6 && _maxPage != 1) _buildSliverPageSelector(), if (widget.trailingSliver != null) widget.trailingSliver!, ], ); @@ -1149,20 +1120,15 @@ class _RatingWidgetState extends State { if (!widget.selectable) { return; } - if (dx >= - widget.size * widget.count + widget.padding * (widget.count - 1)) { + if (dx >= widget.size * widget.count + widget.padding * (widget.count - 1)) { value = widget.maxRating; } else { for (double i = 1; i < widget.count + 1; i++) { - if (dx > widget.size * i + widget.padding * (i - 1) && - dx < widget.size * i + widget.padding * i) { + if (dx > widget.size * i + widget.padding * (i - 1) && dx < widget.size * i + widget.padding * i) { value = i * (widget.maxRating / widget.count); break; - } else if (dx > widget.size * (i - 1) + widget.padding * (i - 1) && - dx < widget.size * i + widget.padding * i) { - value = (dx - widget.padding * (i - 1)) / - (widget.size * widget.count) * - widget.maxRating; + } else if (dx > widget.size * (i - 1) + widget.padding * (i - 1) && dx < widget.size * i + widget.padding * i) { + value = (dx - widget.padding * (i - 1)) / (widget.size * widget.count) * widget.maxRating; break; } } @@ -1190,8 +1156,7 @@ class _RatingWidgetState extends State { if (widget.count / fullStars() == widget.maxRating / value) { return 0; } - return (value % (widget.maxRating / widget.count)) / - (widget.maxRating / widget.count); + return (value % (widget.maxRating / widget.count)) / (widget.maxRating / widget.count); } List buildRow() { diff --git a/lib/components/layout.dart b/lib/components/layout.dart index fa65475..1d098a2 100644 --- a/lib/components/layout.dart +++ b/lib/components/layout.dart @@ -2,10 +2,7 @@ part of 'components.dart'; class SliverGridViewWithFixedItemHeight extends StatelessWidget { const SliverGridViewWithFixedItemHeight( - {required this.delegate, - required this.maxCrossAxisExtent, - required this.itemHeight, - super.key}); + {required this.delegate, required this.maxCrossAxisExtent, required this.itemHeight, super.key}); final SliverChildDelegate delegate; @@ -65,8 +62,7 @@ class SliverGridDelegateWithFixedHeight extends SliverGridDelegate { @override bool shouldRelayout(covariant SliverGridDelegate oldDelegate) { if (oldDelegate is! SliverGridDelegateWithFixedHeight) return true; - if (oldDelegate.maxCrossAxisExtent != maxCrossAxisExtent || - oldDelegate.itemHeight != itemHeight) { + if (oldDelegate.maxCrossAxisExtent != maxCrossAxisExtent || oldDelegate.itemHeight != itemHeight) { return true; } return false; @@ -95,8 +91,7 @@ class SliverGridDelegateWithComics extends SliverGridDelegate { } } - SliverGridLayout getDetailedModeLayout( - SliverConstraints constraints, double scale) { + SliverGridLayout getDetailedModeLayout(SliverConstraints constraints, double scale) { const minCrossAxisExtent = 360; final itemHeight = 152 * scale; final width = constraints.crossAxisExtent; @@ -111,14 +106,11 @@ class SliverGridDelegateWithComics extends SliverGridDelegate { reverseCrossAxis: false); } - SliverGridLayout getBriefModeLayout( - SliverConstraints constraints, double scale) { + SliverGridLayout getBriefModeLayout(SliverConstraints constraints, double scale) { final maxCrossAxisExtent = 192.0 * scale; - const childAspectRatio = 0.72; + const childAspectRatio = 0.68; const crossAxisSpacing = 0.0; - int crossAxisCount = - (constraints.crossAxisExtent / (maxCrossAxisExtent + crossAxisSpacing)) - .ceil(); + int crossAxisCount = (constraints.crossAxisExtent / (maxCrossAxisExtent + crossAxisSpacing)).ceil(); // Ensure a minimum count of 1, can be zero and result in an infinite extent // below when the window size is 0. crossAxisCount = math.max(1, crossAxisCount);