feat: modify recommend page's card width separately (#1771)

* feat: modify recommend card width setting separately

lib/pages/rcmd/view.dart

@@ -7,6 +7,7 @@ import 'package:PiliPlus/http/loading_state.dart';
 import 'package:PiliPlus/pages/common/common_page.dart';
 import 'package:PiliPlus/pages/rcmd/controller.dart';
 import 'package:PiliPlus/utils/grid.dart';
+import 'package:PiliPlus/utils/storage_pref.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 
@@ -56,7 +57,7 @@ class _RcmdPageState extends CommonPageState<RcmdPage, RcmdController>
   late final gridDelegate = SliverGridDelegateWithExtentAndRatio(
     mainAxisSpacing: StyleString.cardSpace,
     crossAxisSpacing: StyleString.cardSpace,
-    maxCrossAxisExtent: Grid.smallCardWidth,
+    maxCrossAxisExtent: Pref.recommendCardWidth,
     childAspectRatio: StyleString.aspectRatio,
     mainAxisExtent: MediaQuery.textScalerOf(context).scale(90),
   );

lib/pages/setting/models/style_settings.dart

@@ -18,6 +18,7 @@ import 'package:PiliPlus/pages/mine/controller.dart';
 import 'package:PiliPlus/pages/setting/models/model.dart';
 import 'package:PiliPlus/pages/setting/pages/color_select.dart';
 import 'package:PiliPlus/pages/setting/slide_color_picker.dart';
+import 'package:PiliPlus/pages/setting/widgets/dual_slide_dialog.dart';
 import 'package:PiliPlus/pages/setting/widgets/multi_select_dialog.dart';
 import 'package:PiliPlus/pages/setting/widgets/select_dialog.dart';
 import 'package:PiliPlus/pages/setting/widgets/slide_dialog.dart';
@@ -153,12 +154,15 @@ List<SettingsModel> get styleSettings => [
   SettingsModel(
     settingsType: SettingsType.normal,
     onTap: (setState) async {
-      final result = await showDialog<double>(
+      final result = await showDialog<(double, double)>(
         context: Get.context!,
         builder: (context) {
-          return SlideDialog(
+          return DualSlideDialog(
             title: '列表最大列宽度（默认240dp）',
-            value: Pref.smallCardWidth,
+            value1: Pref.recommendCardWidth,
+            value2: Pref.smallCardWidth,
+            description1: '主页推荐流',
+            description2: '其他',
             min: 150.0,
             max: 500.0,
             divisions: 35,
@@ -167,7 +171,10 @@ List<SettingsModel> get styleSettings => [
         },
       );
       if (result != null) {
-        await GStorage.setting.put(SettingBoxKey.smallCardWidth, result);
+        await GStorage.setting.putAll({
+          SettingBoxKey.recommendCardWidth: result.$1,
+          SettingBoxKey.smallCardWidth: result.$2,
+        });
         SmartDialog.showToast('重启生效');
         setState();
       }
@@ -175,7 +182,7 @@ List<SettingsModel> get styleSettings => [
     leading: const Icon(Icons.calendar_view_week_outlined),
     title: '列表宽度（dp）限制',
     getSubtitle: () =>
-        '当前:${Pref.smallCardWidth.toInt()}dp，屏幕宽度:${Get.mediaQuery.size.width.toPrecision(2)}dp。宽度越小列数越多。',
+        '当前: 主页${Pref.recommendCardWidth.toInt()}dp 其他${Pref.smallCardWidth.toInt()}dp，屏幕宽度:${Get.mediaQuery.size.width.toPrecision(2)}dp。宽度越小列数越多。',
   ),
   SettingsModel(
     settingsType: SettingsType.sw1tch,

lib/pages/setting/widgets/dual_slide_dialog.dart

@@ -0,0 +1,109 @@
+import 'package:flutter/material.dart';
+import 'package:get/get_utils/get_utils.dart';
+
+class DualSlideDialog extends StatefulWidget {
+  final double value1;
+  final double value2;
+  final String title;
+  final String description1;
+  final String description2;
+  final double min;
+  final double max;
+  final int? divisions;
+  final String suffix;
+  final int precise;
+
+  const DualSlideDialog({
+    super.key,
+    required this.value1,
+    required this.value2,
+    required this.description1,
+    required this.description2,
+    required this.title,
+    required this.min,
+    required this.max,
+    this.divisions,
+    this.suffix = '',
+    this.precise = 1,
+  });
+
+  @override
+  State<DualSlideDialog> createState() => _DualSlideDialogState();
+}
+
+class _DualSlideDialogState extends State<DualSlideDialog> {
+  late double _tempValue1;
+  late double _tempValue2;
+
+  @override
+  void initState() {
+    super.initState();
+    _tempValue1 = widget.value1;
+    _tempValue2 = widget.value2;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return AlertDialog(
+      title: Text(widget.title),
+      contentPadding: const EdgeInsets.only(
+        top: 20,
+        left: 8,
+        right: 8,
+        bottom: 8,
+      ),
+      content: Column(
+        mainAxisSize: .min,
+        children: [
+          Text(widget.description1),
+          Builder(
+            builder: (context) {
+              return Slider(
+                value: _tempValue1,
+                min: widget.min,
+                max: widget.max,
+                divisions: widget.divisions,
+                label:
+                    '${_tempValue1.toStringAsFixed(widget.precise)}${widget.suffix}',
+                onChanged: (double value) {
+                  _tempValue1 = value.toPrecision(widget.precise);
+                  (context as Element).markNeedsBuild();
+                },
+              );
+            },
+          ),
+          Text(widget.description2),
+          Builder(
+            builder: (context) {
+              return Slider(
+                value: _tempValue2,
+                min: widget.min,
+                max: widget.max,
+                divisions: widget.divisions,
+                label:
+                    '${_tempValue2.toStringAsFixed(widget.precise)}${widget.suffix}',
+                onChanged: (double value) {
+                  _tempValue2 = value.toPrecision(widget.precise);
+                  (context as Element).markNeedsBuild();
+                },
+              );
+            },
+          ),
+        ],
+      ),
+      actions: [
+        TextButton(
+          onPressed: Navigator.of(context).pop,
+          child: Text(
+            '取消',
+            style: TextStyle(color: Theme.of(context).colorScheme.outline),
+          ),
+        ),
+        TextButton(
+          onPressed: () => Navigator.pop(context, (_tempValue1, _tempValue2)),
+          child: const Text('确定'),
+        ),
+      ],
+    );
+  }
+}

lib/utils/storage_key.dart

@@ -208,6 +208,7 @@ abstract class SettingBoxKey {
       enableSingleRow = 'enableSingleRow',
       displayMode = 'displayMode',
       smallCardWidth = 'smallCardWidth',
+      recommendCardWidth = 'recommendCardWidth',
       dynamicsWaterfallFlow = 'dynamicsWaterfallFlow',
       upPanelPosition = 'upPanelPosition',
       dynamicsShowAllFollowedUp = 'dynamicsShowAllFollowedUp',

lib/utils/storage_pref.dart

@@ -172,6 +172,9 @@ abstract class Pref {
   static double get smallCardWidth =>
       _setting.get(SettingBoxKey.smallCardWidth, defaultValue: 240.0);
 
+  static double get recommendCardWidth =>
+      _setting.get(SettingBoxKey.recommendCardWidth, defaultValue: 240.0);
+
   static UpPanelPosition get upPanelPosition =>
       UpPanelPosition.values[_setting.get(
         SettingBoxKey.upPanelPosition,