opt: horizontal settings page

Signed-off-by: bggRGjQaUbCoE <githubaccount56556@proton.me>

lib/pages/about/index.dart

@@ -16,7 +16,9 @@ import '../../http/init.dart';
 import '../../utils/cache_manage.dart';
 
 class AboutPage extends StatefulWidget {
-  const AboutPage({super.key});
+  const AboutPage({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   State<AboutPage> createState() => _AboutPageState();
@@ -50,7 +52,7 @@ class _AboutPageState extends State<AboutPage> {
     TextStyle subTitleStyle =
         TextStyle(fontSize: 13, color: Theme.of(context).colorScheme.outline);
     return Scaffold(
-      appBar: AppBar(title: Text('关于')),
+      appBar: widget.showAppBar == false ? null : AppBar(title: Text('关于')),
       body: ListView(
         children: [
           GestureDetector(
@@ -455,7 +457,8 @@ Commit Hash: ${BuildConfig.commitHash}''',
                 },
               );
             },
-          )
+          ),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
         ],
       ),
     );

lib/pages/setting/extra_setting.dart

@@ -2,14 +2,19 @@ import 'package:PiliPlus/pages/setting/widgets/model.dart';
 import 'package:flutter/material.dart';
 
 class ExtraSetting extends StatelessWidget {
-  const ExtraSetting({super.key});
+  const ExtraSetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('其它设置')),
+      appBar: showAppBar == false ? null : AppBar(title: Text('其它设置')),
       body: ListView(
-        children: extraSettings.map((item) => item.widget).toList(),
+        children: [
+          ...extraSettings.map((item) => item.widget),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+        ],
       ),
     );
   }

lib/pages/setting/play_setting.dart

@@ -3,7 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:PiliPlus/services/service_locator.dart';
 
 class PlaySetting extends StatefulWidget {
-  const PlaySetting({super.key});
+  const PlaySetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   State<PlaySetting> createState() => _PlaySettingState();
@@ -21,9 +23,12 @@ class _PlaySettingState extends State<PlaySetting> {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('播放器设置')),
+      appBar: widget.showAppBar == false ? null : AppBar(title: Text('播放器设置')),
       body: ListView(
-        children: playSettings.map((item) => item.widget).toList(),
+        children: [
+          ...playSettings.map((item) => item.widget),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+        ],
       ),
     );
   }

lib/pages/setting/privacy_setting.dart

@@ -2,14 +2,19 @@ import 'package:PiliPlus/pages/setting/widgets/model.dart';
 import 'package:flutter/material.dart';
 
 class PrivacySetting extends StatelessWidget {
-  const PrivacySetting({super.key});
+  const PrivacySetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('隐私设置')),
+      appBar: showAppBar == false ? null : AppBar(title: Text('隐私设置')),
       body: ListView(
-        children: privacySettings.map((item) => item.widget).toList(),
+        children: [
+          ...privacySettings.map((item) => item.widget),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+        ],
       ),
     );
   }

lib/pages/setting/recommend_setting.dart

@@ -2,12 +2,14 @@ import 'package:PiliPlus/pages/setting/widgets/model.dart';
 import 'package:flutter/material.dart';
 
 class RecommendSetting extends StatelessWidget {
-  const RecommendSetting({super.key});
+  const RecommendSetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('推荐流设置')),
+      appBar: showAppBar == false ? null : AppBar(title: Text('推荐流设置')),
       body: ListView(
         children: [
           ...recommendSettings.map((item) => item.widget),
@@ -24,7 +26,8 @@ class RecommendSetting extends StatelessWidget {
                   color:
                       Theme.of(context).colorScheme.outline.withOpacity(0.7)),
             ),
-          )
+          ),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
         ],
       ),
     );

lib/pages/setting/search_page.dart

@@ -1,7 +1,9 @@
 import 'package:PiliPlus/common/widgets/http_error.dart';
 import 'package:PiliPlus/pages/setting/widgets/model.dart';
+import 'package:PiliPlus/utils/grid.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:waterfall_flow/waterfall_flow.dart';
 
 class SettingsSearchPage extends StatefulWidget {
   const SettingsSearchPage({super.key});
@@ -78,8 +80,18 @@ class _SettingsSearchPageState extends State<SettingsSearchPage> {
             ? CustomScrollView(
                 slivers: [HttpError()],
               )
-            : ListView(
+            : CustomScrollView(
-                children: _list.map((item) => item.widget).toList(),
+                slivers: [
+                  SliverWaterfallFlow.extent(
+                    maxCrossAxisExtent: Grid.smallCardWidth * 2,
+                    children: [
+                      ..._list.map((item) => item.widget),
+                      SizedBox(
+                        height: MediaQuery.paddingOf(context).bottom + 80,
+                      ),
+                    ],
+                  ),
+                ],
               ),
       ),
     );

lib/pages/setting/style_setting.dart

@@ -2,14 +2,19 @@ import 'package:PiliPlus/pages/setting/widgets/model.dart';
 import 'package:flutter/material.dart';
 
 class StyleSetting extends StatelessWidget {
-  const StyleSetting({super.key});
+  const StyleSetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('外观设置')),
+      appBar: showAppBar == false ? null : AppBar(title: Text('外观设置')),
       body: ListView(
-        children: styleSettings.map((item) => item.widget).toList(),
+        children: [
+          ...styleSettings.map((item) => item.widget),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+        ],
       ),
     );
   }

lib/pages/setting/video_setting.dart

@@ -2,14 +2,19 @@ import 'package:PiliPlus/pages/setting/widgets/model.dart';
 import 'package:flutter/material.dart';
 
 class VideoSetting extends StatelessWidget {
-  const VideoSetting({super.key});
+  const VideoSetting({super.key, this.showAppBar});
+
+  final bool? showAppBar;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: Text('音视频设置')),
+      appBar: showAppBar == false ? null : AppBar(title: Text('音视频设置')),
       body: ListView(
-        children: videoSettings.map((item) => item.widget).toList(),
+        children: [
+          ...videoSettings.map((item) => item.widget),
+          SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+        ],
       ),
     );
   }

lib/pages/setting/view.dart

@@ -1,4 +1,11 @@
+import 'package:PiliPlus/pages/about/index.dart';
 import 'package:PiliPlus/pages/main/controller.dart';
+import 'package:PiliPlus/pages/setting/extra_setting.dart';
+import 'package:PiliPlus/pages/setting/play_setting.dart';
+import 'package:PiliPlus/pages/setting/privacy_setting.dart';
+import 'package:PiliPlus/pages/setting/recommend_setting.dart';
+import 'package:PiliPlus/pages/setting/style_setting.dart';
+import 'package:PiliPlus/pages/setting/video_setting.dart';
 import 'package:PiliPlus/utils/extension.dart';
 import 'package:PiliPlus/utils/login.dart';
 import 'package:PiliPlus/utils/storage.dart';
@@ -8,145 +15,248 @@ import 'package:get/get.dart';
 
 import '../../http/init.dart';
 
-class SettingPage extends StatelessWidget {
+class _SettingsModel {
+  final String name;
+  final String title;
+  final String? subtitle;
+  final IconData icon;
+
+  const _SettingsModel({
+    required this.name,
+    required this.title,
+    this.subtitle,
+    required this.icon,
+  });
+}
+
+class SettingPage extends StatefulWidget {
   const SettingPage({super.key});
 
+  @override
+  State<SettingPage> createState() => _SettingPageState();
+}
+
+class _SettingPageState extends State<SettingPage> {
+  late String _type = 'privacySetting';
+  final RxBool _isLogin = GStorage.isLogin.obs;
+  TextStyle get _titleStyle => Theme.of(context).textTheme.titleMedium!;
+  TextStyle get _subTitleStyle => Theme.of(context)
+      .textTheme
+      .labelMedium!
+      .copyWith(color: Theme.of(context).colorScheme.outline);
+  bool get _isPortrait => context.orientation == Orientation.portrait;
+
+  final List<_SettingsModel> _items = [
+    _SettingsModel(
+      name: 'privacySetting',
+      title: '隐私设置',
+      subtitle: '黑名单、无痕模式',
+      icon: Icons.privacy_tip_outlined,
+    ),
+    _SettingsModel(
+      name: 'recommendSetting',
+      title: '推荐流设置',
+      subtitle: '推荐来源（web/app）、刷新保留内容、过滤器',
+      icon: Icons.explore_outlined,
+    ),
+    _SettingsModel(
+      name: 'videoSetting',
+      title: '音视频设置',
+      subtitle: '画质、音质、解码、缓冲、音频输出等',
+      icon: Icons.video_settings_outlined,
+    ),
+    _SettingsModel(
+      name: 'playSetting',
+      title: '播放器设置',
+      subtitle: '双击/长按、全屏、后台播放、弹幕、字幕、底部进度条等',
+      icon: Icons.touch_app_outlined,
+    ),
+    _SettingsModel(
+      name: 'styleSetting',
+      title: '外观设置',
+      subtitle: '横屏适配（平板）、侧栏、列宽、首页、动态红点、主题、字号、图片、帧率等',
+      icon: Icons.style_outlined,
+    ),
+    _SettingsModel(
+      name: 'extraSetting',
+      title: '其它设置',
+      subtitle: '震动、搜索、收藏、ai、评论、动态、代理、更新检查等',
+      icon: Icons.extension_outlined,
+    ),
+    _SettingsModel(
+      name: 'about',
+      title: '关于',
+      icon: Icons.info_outline,
+    ),
+  ];
+
   @override
   Widget build(BuildContext context) {
-    RxBool isLogin = GStorage.isLogin.obs;
-    final TextStyle titleStyle = Theme.of(context).textTheme.titleMedium!;
-    final TextStyle subTitleStyle = Theme.of(context)
-        .textTheme
-        .labelMedium!
-        .copyWith(color: Theme.of(context).colorScheme.outline);
     return Scaffold(
-      appBar: AppBar(title: Text('设置')),
+      appBar: AppBar(
-      body: ListView(
+        title: _isPortrait
-        children: [
+            ? const Text('设置')
-          Padding(
+            : Text(switch (_type) {
-            padding: const EdgeInsets.symmetric(horizontal: 16),
+                'privacySetting' => '隐私设置',
-            child: InkWell(
+                'recommendSetting' => '推荐流设置',
-              onTap: () => Get.toNamed('/settingsSearch'),
+                'videoSetting' => '音视频设置',
+                'playSetting' => '播放器设置',
+                'styleSetting' => '外观设置',
+                'extraSetting' => '其它设置',
+                'about' => '关于',
+                _ => '设置',
+              }),
+      ),
+      body: _isPortrait
+          ? _buildList
+          : Row(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Expanded(flex: 40, child: _buildList),
+                VerticalDivider(
+                  width: 1,
+                  color: Theme.of(context).colorScheme.outline.withOpacity(0.1),
+                ),
+                Expanded(
+                  flex: 60,
+                  child: switch (_type) {
+                    'privacySetting' => PrivacySetting(showAppBar: false),
+                    'recommendSetting' => RecommendSetting(showAppBar: false),
+                    'videoSetting' => VideoSetting(showAppBar: false),
+                    'playSetting' => PlaySetting(showAppBar: false),
+                    'styleSetting' => StyleSetting(showAppBar: false),
+                    'extraSetting' => ExtraSetting(showAppBar: false),
+                    'about' => AboutPage(showAppBar: false),
+                    _ => const SizedBox.shrink(),
+                  },
+                )
+              ],
+            ),
+    );
+  }
+
+  void _toPage(String name) {
+    if (_isPortrait) {
+      Get.toNamed('/$name');
+    } else {
+      _type = name;
+      setState(() {});
+    }
+  }
+
+  Color? _getTileColor(String name) {
+    if (_isPortrait) {
+      return null;
+    } else {
+      return name == _type
+          ? Theme.of(context).colorScheme.onInverseSurface
+          : null;
+    }
+  }
+
+  Widget get _buildList {
+    return ListView(
+      children: [
+        _buildSearchItem,
+        ..._items.sublist(0, _items.length - 1).map(
+              (item) => ListTile(
+                tileColor: _getTileColor(item.name),
+                onTap: () => _toPage(item.name),
+                leading: Icon(item.icon),
+                title: Text(item.title, style: _titleStyle),
+                subtitle: item.subtitle == null
+                    ? null
+                    : Text(item.subtitle!, style: _subTitleStyle),
+              ),
+            ),
+        _buildLoginItem,
+        ListTile(
+          tileColor: _getTileColor(_items.last.name),
+          onTap: () => _toPage(_items.last.name),
+          leading: Icon(_items.last.icon),
+          title: Text(_items.last.title, style: _titleStyle),
+        ),
+        SizedBox(height: MediaQuery.paddingOf(context).bottom + 80),
+      ],
+    );
+  }
+
+  Widget get _buildLoginItem => Obx(
+        () => _isLogin.value.not
+            ? const SizedBox.shrink()
+            : ListTile(
+                leading: const Icon(Icons.logout_outlined),
+                onTap: () {
+                  showDialog(
+                    context: context,
+                    builder: (context) {
+                      return AlertDialog(
+                        title: const Text('提示'),
+                        content: const Text('确认要退出登录吗'),
+                        actions: [
+                          TextButton(
+                            onPressed: Get.back,
+                            child: Text(
+                              '点错了',
+                              style: TextStyle(
+                                color: Theme.of(context).colorScheme.outline,
+                              ),
+                            ),
+                          ),
+                          TextButton(
+                            onPressed: () async {
+                              // 清空cookie
+                              await Request.cookieManager.cookieJar.deleteAll();
+                              await CookieManager().deleteAllCookies();
+                              Request.dio.options.headers['cookie'] = '';
+                              // 清空本地存储的用户标识
+                              GStorage.userInfo.put('userInfoCache', null);
+                              GStorage.localCache.put(LocalCacheKey.accessKey,
+                                  {'mid': -1, 'value': '', 'refresh': ''});
+                              _isLogin.value = false;
+                              if (Get.isRegistered<MainController>()) {
+                                MainController mainController =
+                                    Get.find<MainController>();
+                                mainController.isLogin.value = false;
+                              }
+                              await LoginUtils.onLogout();
+                              Get.back();
+                            },
+                            child: const Text('确认'),
+                          )
+                        ],
+                      );
+                    },
+                  );
+                },
+                title: Text('退出登录', style: _titleStyle),
+              ),
+      );
+
+  Widget get _buildSearchItem => Padding(
+        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 5),
+        child: InkWell(
+          onTap: () => Get.toNamed('/settingsSearch'),
+          borderRadius: BorderRadius.circular(50),
+          child: Ink(
+            padding: const EdgeInsets.symmetric(vertical: 6),
+            decoration: BoxDecoration(
               borderRadius: BorderRadius.circular(50),
-              child: Ink(
+              color: Theme.of(context).colorScheme.onInverseSurface,
-                padding: const EdgeInsets.symmetric(vertical: 6),
+            ),
-                decoration: BoxDecoration(
+            child: Center(
-                  borderRadius: BorderRadius.circular(50),
+              child: Row(
-                  color: Theme.of(context).colorScheme.onInverseSurface,
+                mainAxisSize: MainAxisSize.min,
-                ),
+                children: [
-                child: Center(
+                  Icon(
-                  child: Row(
+                    size: MediaQuery.textScalerOf(context).scale(18),
-                    mainAxisSize: MainAxisSize.min,
+                    Icons.search,
-                    children: [
-                      Icon(
-                        size: MediaQuery.textScalerOf(context).scale(18),
-                        Icons.search,
-                      ),
-                      const Text(' 搜索'),
-                    ],
                   ),
-                ),
+                  const Text(' 搜索'),
+                ],
               ),
             ),
           ),
-          ListTile(
+        ),
-            onTap: () => Get.toNamed('/privacySetting'),
+      );
-            leading: const Icon(Icons.privacy_tip_outlined),
-            title: Text('隐私设置', style: titleStyle),
-            subtitle: Text('黑名单、无痕模式', style: subTitleStyle),
-          ),
-          ListTile(
-            onTap: () => Get.toNamed('/recommendSetting'),
-            leading: const Icon(Icons.explore_outlined),
-            title: Text('推荐流设置', style: titleStyle),
-            subtitle: Text('推荐来源（web/app）、刷新保留内容、过滤器', style: subTitleStyle),
-          ),
-          ListTile(
-            onTap: () => Get.toNamed('/videoSetting'),
-            leading: const Icon(Icons.video_settings_outlined),
-            title: Text('音视频设置', style: titleStyle),
-            subtitle: Text('画质、音质、解码、缓冲、音频输出等', style: subTitleStyle),
-          ),
-          ListTile(
-            onTap: () => Get.toNamed('/playSetting'),
-            leading: const Icon(Icons.touch_app_outlined),
-            title: Text('播放器设置', style: titleStyle),
-            subtitle: Text('双击/长按、全屏、后台播放、弹幕、字幕、底部进度条等', style: subTitleStyle),
-          ),
-          ListTile(
-            onTap: () => Get.toNamed('/styleSetting'),
-            leading: const Icon(Icons.style_outlined),
-            title: Text('外观设置', style: titleStyle),
-            subtitle: Text('横屏适配（平板）、侧栏、列宽、首页、动态红点、主题、字号、图片、帧率等',
-                style: subTitleStyle),
-          ),
-          ListTile(
-            onTap: () => Get.toNamed('/extraSetting'),
-            leading: const Icon(Icons.extension_outlined),
-            title: Text('其它设置', style: titleStyle),
-            subtitle: Text('震动、搜索、收藏、ai、评论、动态、代理、更新检查等', style: subTitleStyle),
-          ),
-          Obx(
-            () => isLogin.value.not
-                ? const SizedBox.shrink()
-                : ListTile(
-                    leading: const Icon(Icons.logout_outlined),
-                    onTap: () {
-                      showDialog(
-                        context: context,
-                        builder: (context) {
-                          return AlertDialog(
-                            title: const Text('提示'),
-                            content: const Text('确认要退出登录吗'),
-                            actions: [
-                              TextButton(
-                                onPressed: Get.back,
-                                child: Text(
-                                  '点错了',
-                                  style: TextStyle(
-                                    color:
-                                        Theme.of(context).colorScheme.outline,
-                                  ),
-                                ),
-                              ),
-                              TextButton(
-                                onPressed: () async {
-                                  // 清空cookie
-                                  await Request.cookieManager.cookieJar
-                                      .deleteAll();
-                                  await CookieManager().deleteAllCookies();
-                                  Request.dio.options.headers['cookie'] = '';
-                                  // 清空本地存储的用户标识
-                                  GStorage.userInfo.put('userInfoCache', null);
-                                  GStorage.localCache.put(
-                                      LocalCacheKey.accessKey,
-                                      {'mid': -1, 'value': '', 'refresh': ''});
-                                  isLogin.value = false;
-                                  if (Get.isRegistered<MainController>()) {
-                                    MainController mainController =
-                                        Get.find<MainController>();
-                                    mainController.isLogin.value = false;
-                                  }
-                                  await LoginUtils.onLogout();
-                                  Get.back();
-                                },
-                                child: const Text('确认'),
-                              )
-                            ],
-                          );
-                        },
-                      );
-                    },
-                    title: Text('退出登录', style: titleStyle),
-                  ),
-          ),
-          ListTile(
-            leading: const Icon(Icons.info_outline),
-            onTap: () => Get.toNamed('/about'),
-            title: Text('关于', style: titleStyle),
-          ),
-        ],
-      ),
-    );
-  }
 }

lib/pages/setting/widgets/model.dart

@@ -1710,6 +1710,7 @@ List<SettingsModel> get extraSettings => [
                 divisions: 8,
                 precise: 2,
                 value: GStorage.refreshDragPercentage,
+                suffix: 'x',
               );
             },
           );