Change the style of _buildBriefMode. (#44)

Change the style of _buildBriefMode

lib/components/comic.dart

@@ -25,8 +25,7 @@ class ComicTile extends StatelessWidget {
       onTap!();
       return;
     }
-    App.mainNavigatorKey?.currentContext
+    App.mainNavigatorKey?.currentContext?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey));
-        ?.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
+            App.mainNavigatorKey?.currentContext?.to(() => ComicPage(id: comic.id, sourceKey: comic.sourceKey));
-                ?.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'
+    Widget child = type == 'detailed' ? _buildDetailedMode(context) : _buildBriefMode(context);
-        ? _buildDetailedMode(context)
-        : _buildBriefMode(context);
 
     var isFavorite = appdata.settings['showFavoriteStatusOnTile']
-        ? LocalFavoritesManager()
+        ? LocalFavoritesManager().isExist(comic.id, ComicType(comic.sourceKey.hashCode))
-            .isExist(comic.id, ComicType(comic.sourceKey.hashCode))
         : false;
     var history = appdata.settings['showHistoryStatusOnTile']
-        ? HistoryManager()
+        ? HistoryManager().findSync(comic.id, ComicType(comic.sourceKey.hashCode))
-            .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:
+                      painter: _ReadingHistoryPainter(history.page, history.maxPage),
-                          _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)
+                    enableTranslate: ComicSource.find(comic.sourceKey)?.enableTagsTranslate ?? false,
-                            ?.enableTagsTranslate ??
-                        false,
                     rating: comic.stars,
                   ),
                 ),
@@ -225,12 +216,22 @@ class ComicTile extends StatelessWidget {
   }
 
   Widget _buildBriefMode(BuildContext context) {
-    return Padding(
+    return LayoutBuilder(
-      padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 8),
+      builder: (context, constraints) {
-      child: Material(
+        return InkWell(
-        color: Colors.transparent,
+          borderRadius: BorderRadius.circular(12),
-        borderRadius: BorderRadius.circular(8),
+          onTap: _onTap,
-        elevation: 1,
+          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(
@@ -245,26 +246,36 @@ class ComicTile extends StatelessWidget {
                         ),
                         Positioned(
                           bottom: 0,
-                left: 0,
                           right: 0,
-                child: Container(
+                          child: ClipRRect(
-                  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),
+                              topLeft: Radius.circular(10.0),
-                      bottomRight: Radius.circular(8),
+                              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,
+                                ),
+                              ),
+                            ),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ),
+                ),
+                Padding(
+                  padding: const EdgeInsets.fromLTRB(8, 4, 8, 0),
                   child: Text(
                     comic.title.replaceAll("\n", ""),
                     style: const TextStyle(
@@ -272,29 +283,16 @@ class ComicTile extends StatelessWidget {
                       fontSize: 14.0,
                       color: Colors.white,
                     ),
-                      maxLines: 2,
+                    maxLines: 1,
                     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(),
-                ),
-              ),
-            )
               ],
             ),
           ),
         );
+      },
+    );
   }
 
   void block(BuildContext comicTileContext) {
@@ -340,9 +338,7 @@ class ComicTile extends StatelessWidget {
                   }
                   appdata.saveData();
                   context.showMessage(message: 'Blocked'.tl);
-                  comicTileContext
+                  comicTileContext.findAncestorStateOfType<_SliverGridComicsState>()!.update();
-                      .findAncestorStateOfType<_SliverGridComicsState>()!
-                      .update();
                 },
                 child: Text('Block'.tl),
               ),
@@ -383,8 +379,7 @@ class _ComicDescription extends StatelessWidget {
         s = s.replaceAll("\n", " ");
       }
     }
-    var enableTranslate =
+    var enableTranslate = App.locale.languageCode == 'zh' && this.enableTranslate;
-        App.locale.languageCode == 'zh' && this.enableTranslate;
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: <Widget>[
@@ -401,9 +396,7 @@ class _ComicDescription extends StatelessWidget {
         if (subtitle != "")
           Text(
             subtitle,
-            style: TextStyle(
+            style: TextStyle(fontSize: 10.0, color: context.colorScheme.onSurface.withOpacity(0.7)),
-                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)
+                                : Theme.of(context).colorScheme.secondaryContainer,
-                                    .colorScheme
+                            borderRadius: const BorderRadius.all(Radius.circular(8)),
-                                    .secondaryContainer,
-                            borderRadius:
-                                const BorderRadius.all(Radius.circular(8)),
                           ),
                           child: Center(
                               widthFactor: 1,
                               child: Text(
-                                enableTranslate
+                                enableTranslate ? TagsTranslation.translateTag(s) : s.split(':').last,
-                                    ? 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(
+      textPainter.paint(canvas, Offset((size.width - textPainter.width) / 2, (size.height - textPainter.height) / 2));
-          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),
+      canvas.drawLine(
-          Offset(size.width * 0.45, size.height * 0.75), paint);
+          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),
+      canvas.drawLine(
-          Offset(size.width * 0.85, size.height * 0.3), paint);
+          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(
+      textPainter2.paint(canvas, Offset(size.width - textPainter2.width, size.height - textPainter2.height));
-          canvas,
-          Offset(size.width - textPainter2.width,
-              size.height - textPainter2.height));
     }
   }
 
   @override
   bool shouldRepaint(covariant CustomPainter oldDelegate) {
-    return oldDelegate is! _ReadingHistoryPainter ||
+    return oldDelegate is! _ReadingHistoryPainter || oldDelegate.page != page || oldDelegate.maxPage != maxPage;
-        oldDelegate.page != page ||
-        oldDelegate.maxPage != maxPage;
   }
 }
 
@@ -683,8 +663,7 @@ class _SliverGridComics extends StatelessWidget {
             onLastItemBuild?.call();
           }
           var badge = badgeBuilder?.call(comics[index]);
-          var isSelected =
+          var isSelected = selection == null ? false : selection![comics[index]] ?? false;
-              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
+              color: isSelected ? Theme.of(context).colorScheme.surfaceContainer : null,
-                  ? Theme.of(context).colorScheme.surfaceContainer
-                  : null,
               borderRadius: BorderRadius.circular(12),
             ),
             margin: const EdgeInsets.all(4),
@@ -820,9 +797,7 @@ class ComicListState extends State<ComicList> {
                           decoration: InputDecoration(
                             labelText: "Page".tl,
                           ),
-                          inputFormatters: <TextInputFormatter>[
+                          inputFormatters: <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly],
-                            FilteringTextInputFormatter.digitsOnly
-                          ],
                           onChanged: (v) {
                             value = v;
                           },
@@ -835,15 +810,13 @@ class ComicListState extends State<ComicList> {
                               if (page == null) {
                                 context.showMessage(message: "Invalid page".tl);
                               } else {
-                                if (page > 0 &&
+                                if (page > 0 && (_maxPage == null || page <= _maxPage!)) {
-                                    (_maxPage == null || page <= _maxPage!)) {
                                   setState(() {
                                     _error = null;
                                     _page = page;
                                   });
                                 } else {
-                                  context.showMessage(
+                                  context.showMessage(message: "Invalid page".tl);
-                                      message: "Invalid page".tl);
                                 }
                               }
                             },
@@ -855,8 +828,7 @@ class ComicListState extends State<ComicList> {
                   );
                 },
                 child: Padding(
-                  padding:
+                  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
-                      const EdgeInsets.symmetric(horizontal: 16, vertical: 6),
                   child: Text("Page $_page / ${_maxPage ?? '?'}"),
                 ),
               ),
@@ -987,8 +959,7 @@ class ComicListState extends State<ComicList> {
           comics: _data[_page] ?? const [],
           menuBuilder: widget.menuBuilder,
         ),
-        if (_data[_page]!.length > 6 && _maxPage != 1)
+        if (_data[_page]!.length > 6 && _maxPage != 1) _buildSliverPageSelector(),
-          _buildSliverPageSelector(),
         if (widget.trailingSliver != null) widget.trailingSliver!,
       ],
     );
@@ -1149,20 +1120,15 @@ class _RatingWidgetState extends State<RatingWidget> {
     if (!widget.selectable) {
       return;
     }
-    if (dx >=
+    if (dx >= widget.size * widget.count + widget.padding * (widget.count - 1)) {
-        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) &&
+        if (dx > widget.size * i + widget.padding * (i - 1) && dx < widget.size * i + widget.padding * i) {
-            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) &&
+        } else if (dx > widget.size * (i - 1) + widget.padding * (i - 1) && dx < widget.size * i + widget.padding * i) {
-            dx < widget.size * i + widget.padding * i) {
+          value = (dx - widget.padding * (i - 1)) / (widget.size * widget.count) * widget.maxRating;
-          value = (dx - widget.padding * (i - 1)) /
-              (widget.size * widget.count) *
-              widget.maxRating;
           break;
         }
       }
@@ -1190,8 +1156,7 @@ class _RatingWidgetState extends State<RatingWidget> {
     if (widget.count / fullStars() == widget.maxRating / value) {
       return 0;
     }
-    return (value % (widget.maxRating / widget.count)) /
+    return (value % (widget.maxRating / widget.count)) / (widget.maxRating / widget.count);
-        (widget.maxRating / widget.count);
   }
 
   List<Widget> buildRow() {

lib/components/layout.dart

@@ -2,10 +2,7 @@ part of 'components.dart';
 
 class SliverGridViewWithFixedItemHeight extends StatelessWidget {
   const SliverGridViewWithFixedItemHeight(
-      {required this.delegate,
+      {required this.delegate, required this.maxCrossAxisExtent, required this.itemHeight, super.key});
-      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 ||
+    if (oldDelegate.maxCrossAxisExtent != maxCrossAxisExtent || oldDelegate.itemHeight != itemHeight) {
-        oldDelegate.itemHeight != itemHeight) {
       return true;
     }
     return false;
@@ -95,8 +91,7 @@ class SliverGridDelegateWithComics extends SliverGridDelegate {
     }
   }
 
-  SliverGridLayout getDetailedModeLayout(
+  SliverGridLayout getDetailedModeLayout(SliverConstraints constraints, double scale) {
-      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(
+  SliverGridLayout getBriefModeLayout(SliverConstraints constraints, double scale) {
-      SliverConstraints constraints, double scale) {
     final maxCrossAxisExtent = 192.0 * scale;
-    const childAspectRatio = 0.72;
+    const childAspectRatio = 0.68;
     const crossAxisSpacing = 0.0;
-    int crossAxisCount =
+    int crossAxisCount = (constraints.crossAxisExtent / (maxCrossAxisExtent + crossAxisSpacing)).ceil();
-        (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);