Support customizing the number of thumbnail columns in the details page

支持自定义详情页缩略图列数

changelog/v7.4.8+147.md

@@ -5,6 +5,7 @@
 - 收藏页和关注页搜索不再继承关键字
 - 去除自动重定向至表站的是设置，现在会强制优先访问表站画廊链接
 - 去除下载超时设置，现在下载图片不会超时中断
+- 支持自定义详情页缩略图列数
 
 ------------------------------------------------------------------------------------------
 
@@ -14,4 +15,5 @@
 - Optimize the icon display when decompressing archives
 - The search in favorites and following page no longer inherits keywords
 - Remove the setting of automatically redirecting to the EH site, now it is enabled by default
-- Remove the download timeout setting, now the download will not be interrupted due to timeout
+- Remove the download timeout setting, now the download will not be interrupted due to timeout
+- Support customizing the number of thumbnail columns in the details page

lib/src/config/ui_config.dart

@@ -65,11 +65,9 @@ class UIConfig {
   static const double tabBarHeight = 36;
   static const double searchBarHeight = 40;
   static const double refreshTriggerPullDistance = 100;
-
 
   static Color layoutDividerColor(BuildContext context) => Theme.of(context).colorScheme.surfaceVariant;
 
-
   static Color desktopLeftTabIconColor(BuildContext context) => Theme.of(context).colorScheme.onBackground;
   static const double desktopTitleBarHeight = 32;
   static const double desktopFullScreenTopPadding = 12;
@@ -186,6 +184,7 @@ class UIConfig {
 
   static const double detailsPageThumbnailHeight = 200;
   static const double detailsPageThumbnailWidth = 150;
+  static const double detailsPageGridViewCardAspectRatio = 0.75;
 
   static const int detailsPageAnimationDuration = 150;
 

lib/src/l18n/en_US.dart

@@ -286,6 +286,7 @@ class en_US {
       'pageListStyle': 'Gallery List Style (Page)',
       'crossAxisCountInGridDownloadPageForGroup': 'Download Page Grid Column Count(Group)',
       'crossAxisCountInGridDownloadPageForGallery': 'Download Page Grid Column Count(Gallery)',
+      'crossAxisCountInDetailPage': 'Detail Page Thumbnail Column Count',
       'global': 'Global',
       'auto': 'Auto',
       'moveCover2RightSide': 'Move Cover to Right Side',

lib/src/l18n/ko_KR.dart

@@ -286,6 +286,7 @@ class ko_KR {
       'pageListStyle': '갤러리 리스트 스타일 (개별)',
       'crossAxisCountInGridDownloadPageForGroup': '다운로드 페이지 그리드 정렬 세로줄 개수(폴더)',
       'crossAxisCountInGridDownloadPageForGallery': '다운로드 페이지 그리드 정렬 세로줄 개수(폴더 내부)',
+      'crossAxisCountInDetailPage': 'Detail Page Thumbnail Column Count',
       'global': '기본값',
       'auto': '자동',
       'moveCover2RightSide': '섬네일을 오른쪽으로 배치',

lib/src/l18n/pt_BR.dart

@@ -288,6 +288,7 @@ class pt_BR {
       'pageListStyle': 'Gallery List Style (Page)',
       'crossAxisCountInGridDownloadPageForGroup': 'Download Page Grid Column Count(Group)',
       'crossAxisCountInGridDownloadPageForGallery': 'Download Page Grid Column Count(Gallery)',
+      'crossAxisCountInDetailPage': 'Detail Page Thumbnail Column Count',
       'global': 'Global',
       'auto': 'Auto',
       'moveCover2RightSide': 'Mover a tampa para o lado direito',

lib/src/l18n/zh_CN.dart

@@ -286,6 +286,7 @@ class zh_CN {
       'crossAxisCountInGridDownloadPage': '下载页网格布局列数',
       'crossAxisCountInGridDownloadPageForGroup': '下载页网格布局列数(分组)',
       'crossAxisCountInGridDownloadPageForGallery': '下载页网格布局列数(画廊)',
+      'crossAxisCountInDetailPage': '详情页缩略图列数',
       'global': '全局',
       'auto': '自动',
       'moveCover2RightSide': '移动封面图至右侧',

lib/src/l18n/zh_TW.dart

@@ -285,6 +285,7 @@ class zh_TW {
       'pageListStyle': '畫廊列表樣式(頁面)',
       'crossAxisCountInGridDownloadPageForGroup': '下載頁網格布局列數(分組)',
       'crossAxisCountInGridDownloadPageForGallery': '下載頁網格布局列數(畫廊)',
+      'crossAxisCountInDetailPage': '詳情頁縮略圖列數',
       'global': '全局',
       'auto': '自動',
       'moveCover2RightSide': '移動封面圖至右側',

lib/src/pages/details/details_page.dart

@@ -1154,12 +1154,19 @@ class DetailsPage extends StatelessWidget with Scroll2TopPageMixin {
               },
               childCount: state.galleryDetails?.thumbnails.length ?? 0,
             ),
-            gridDelegate: const SliverGridDelegateWithMaxCrossAxisExtent(
-              mainAxisExtent: UIConfig.detailsPageThumbnailHeight,
-              maxCrossAxisExtent: UIConfig.detailsPageThumbnailWidth,
-              mainAxisSpacing: 20,
-              crossAxisSpacing: 5,
-            ),
+            gridDelegate: StyleSetting.crossAxisCountInDetailPage.value == null
+                ? const SliverGridDelegateWithMaxCrossAxisExtent(
+                    mainAxisExtent: UIConfig.detailsPageThumbnailHeight,
+                    maxCrossAxisExtent: UIConfig.detailsPageThumbnailWidth,
+                    mainAxisSpacing: 20,
+                    crossAxisSpacing: 5,
+                  )
+                : SliverGridDelegateWithFixedCrossAxisCount(
+                    crossAxisCount: StyleSetting.crossAxisCountInDetailPage.value!,
+                    mainAxisSpacing: 20,
+                    crossAxisSpacing: 5,
+                    childAspectRatio: UIConfig.detailsPageGridViewCardAspectRatio,
+                  ),
           ),
         ),
       ),

lib/src/pages/setting/style/setting_style_page.dart

@@ -26,6 +26,7 @@ class SettingStylePage extends StatelessWidget {
             _buildPageListMode(),
             _buildCrossAxisCountInGridDownloadPageForGroup(),
             _buildCrossAxisCountInGridDownloadPageForGallery(),
+            _buildCrossAxisCountInDetailPage(),
             if (!StyleSetting.isInWaterFlowListMode) _buildMoveCover2RightSide().fadeIn(),
             _buildLayout(context),
           ],
@@ -139,6 +140,26 @@ class SettingStylePage extends StatelessWidget {
       ),
     );
   }
+
+  Widget _buildCrossAxisCountInDetailPage() {
+    return ListTile(
+      title: Text('crossAxisCountInDetailPage'.tr),
+      trailing: DropdownButton<int?>(
+        value: StyleSetting.crossAxisCountInDetailPage.value,
+        elevation: 4,
+        alignment: AlignmentDirectional.centerEnd,
+        onChanged: StyleSetting.saveCrossAxisCountInDetailPage,
+        items: [
+          DropdownMenuItem(child: Text('auto'.tr), value: null),
+          DropdownMenuItem(child: Text('2'.tr), value: 2),
+          DropdownMenuItem(child: Text('3'.tr), value: 3),
+          DropdownMenuItem(child: Text('4'.tr), value: 4),
+          DropdownMenuItem(child: Text('5'.tr), value: 5),
+          DropdownMenuItem(child: Text('6'.tr), value: 6),
+        ],
+      ),
+    );
+  }
 
   Widget _buildPageListMode() {
     return ListTile(

lib/src/setting/style_setting.dart

@@ -26,6 +26,7 @@ class StyleSetting {
   static RxnInt crossAxisCountInWaterFallFlow = RxnInt(null);
   static RxnInt crossAxisCountInGridDownloadPageForGroup = RxnInt(null);
   static RxnInt crossAxisCountInGridDownloadPageForGallery = RxnInt(null);
+  static RxnInt crossAxisCountInDetailPage = RxnInt(null);
   static RxMap<String, ListMode> pageListMode = <String, ListMode>{}.obs;
   static RxBool moveCover2RightSide = false.obs;
   static Rx<LayoutMode> layout =
@@ -110,6 +111,12 @@ class StyleSetting {
     StyleSetting.crossAxisCountInGridDownloadPageForGallery.value = crossAxisCountInGridDownloadPageForGallery;
     _save();
   }
+
+  static saveCrossAxisCountInDetailPage(int? crossAxisCountInDetailPage) {
+    Log.debug('saveCrossAxisCountInDetailPage:$crossAxisCountInDetailPage');
+    StyleSetting.crossAxisCountInDetailPage.value = crossAxisCountInDetailPage;
+    _save();
+  }
 
   static savePageListMode(String routeName, ListMode? listMode) {
     Log.debug('savePageListMode:$routeName, $listMode');
@@ -146,6 +153,7 @@ class StyleSetting {
       'crossAxisCountInWaterFallFlow': crossAxisCountInWaterFallFlow.value,
       'crossAxisCountInGridDownloadPageForGroup': crossAxisCountInGridDownloadPageForGroup.value,
       'crossAxisCountInGridDownloadPageForGallery': crossAxisCountInGridDownloadPageForGallery.value,
+      'crossAxisCountInDetailPage': crossAxisCountInDetailPage.value,
       'pageListMode': pageListMode.map((route, listMode) => MapEntry(route, listMode.index)),
       'moveCover2RightSide': moveCover2RightSide.value,
       'layout': layout.value.index,
@@ -160,6 +168,7 @@ class StyleSetting {
     crossAxisCountInWaterFallFlow.value = map['crossAxisCountInWaterFallFlow'];
     crossAxisCountInGridDownloadPageForGroup.value = map['crossAxisCountInGridDownloadPageForGroup'];
     crossAxisCountInGridDownloadPageForGallery.value = map['crossAxisCountInGridDownloadPageForGallery'];
+    crossAxisCountInDetailPage.value = map['crossAxisCountInDetailPage'];
     pageListMode.value = Map.from(map['pageListMode']?.map((route, listModeIndex) => MapEntry(route, ListMode.values[listModeIndex])) ?? {});
     moveCover2RightSide.value = map['moveCover2RightSide'] ?? moveCover2RightSide.value;
     layout.value = LayoutMode.values[map['layout'] ?? layout.value.index];