feat: 排行榜改用侧边栏显示分区

lib/pages/rank/controller.dart

@@ -9,20 +9,20 @@ import 'package:PiliPalaX/utils/storage.dart';
 class RankController extends GetxController with GetTickerProviderStateMixin {
   bool flag = false;
   late RxList tabs = [].obs;
-  RxInt initialIndex = 1.obs;
+  RxInt initialIndex = 0.obs;
   late TabController tabController;
   late List tabsCtrList;
   late List<Widget> tabsPageList;
   Box setting = GStrorage.setting;
-  late final StreamController<bool> searchBarStream =
-      StreamController<bool>.broadcast();
+  // late final StreamController<bool> searchBarStream =
+  //     StreamController<bool>.broadcast();
   late bool enableGradientBg;
 
   @override
   void onInit() {
     super.onInit();
-    enableGradientBg =
-        setting.get(SettingBoxKey.enableGradientBg, defaultValue: true);
+    // enableGradientBg =
+    //     setting.get(SettingBoxKey.enableGradientBg, defaultValue: true);
     // 进行tabs配置
     setTabConfig();
   }
@@ -51,20 +51,20 @@ class RankController extends GetxController with GetTickerProviderStateMixin {
       vsync: this,
     );
     // 监听 tabController 切换
-    if (enableGradientBg) {
-      tabController.animation!.addListener(() {
-        if (tabController.indexIsChanging) {
-          if (initialIndex.value != tabController.index) {
-            initialIndex.value = tabController.index;
-          }
-        } else {
-          final int temp = tabController.animation!.value.round();
-          if (initialIndex.value != temp) {
-            initialIndex.value = temp;
-            tabController.index = initialIndex.value;
-          }
-        }
-      });
-    }
+    // if (enableGradientBg) {
+    //   tabController.animation!.addListener(() {
+    //     if (tabController.indexIsChanging) {
+    //       if (initialIndex.value != tabController.index) {
+    //         initialIndex.value = tabController.index;
+    //       }
+    //     } else {
+    //       final int temp = tabController.animation!.value.round();
+    //       if (initialIndex.value != temp) {
+    //         initialIndex.value = temp;
+    //         tabController.index = initialIndex.value;
+    //       }
+    //     }
+    //   });
+    // }
   }
 }

lib/pages/rank/view.dart

@@ -1,9 +1,9 @@
 import 'dart:async';
-
+import 'package:PiliPalaX/common/constants.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:get/get.dart';
-import 'package:PiliPalaX/utils/feed_back.dart';
+import '../../utils/feed_back.dart';
 import './controller.dart';
 
 class RankPage extends StatefulWidget {
@@ -16,8 +16,7 @@ class RankPage extends StatefulWidget {
 class _RankPageState extends State<RankPage>
     with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
   final RankController _rankController = Get.put(RankController());
-  List videoList = [];
-  late Stream<bool> stream;
+  late int _selectedTabIndex = 0;
 
   @override
   bool get wantKeepAlive => true;
@@ -25,127 +24,86 @@ class _RankPageState extends State<RankPage>
   @override
   void initState() {
     super.initState();
-    stream = _rankController.searchBarStream.stream;
+    _rankController.tabController =
+        TabController(vsync: this, length: _rankController.tabs.length);
+    _selectedTabIndex = _rankController.initialIndex.value;
+    _rankController.tabController.addListener(() {
+      print("_rankController.tabController.index");
+      print(_rankController.tabController.index);
+      if (!_rankController.tabController.indexIsChanging) {
+        // _rankController.onRefresh();
+        setState(() {
+          _selectedTabIndex = _rankController.tabController.index;
+        });
+      }
+    });
+  }
+  @override
+  void dispose() {
+    _rankController.tabController.removeListener(() {});
+    _rankController.tabController.dispose();
+    super.dispose();
   }
-
   @override
   Widget build(BuildContext context) {
     super.build(context);
-    Brightness currentBrightness = MediaQuery.of(context).platformBrightness;
-    // 设置状态栏图标的亮度
-    if (_rankController.enableGradientBg) {
-      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
-        statusBarIconBrightness: currentBrightness == Brightness.light
-            ? Brightness.dark
-            : Brightness.light,
-      ));
-    }
+
     return Scaffold(
-      extendBody: true,
-      extendBodyBehindAppBar: false,
-      appBar: _rankController.enableGradientBg
-          ? null
-          : AppBar(toolbarHeight: 0, elevation: 0),
-      body: Stack(
+      appBar: AppBar(
+        toolbarHeight: 0,
+        elevation: 0,
+        systemOverlayStyle: SystemUiOverlayStyle(
+          // Customize the status bar here
+          statusBarIconBrightness:
+              MediaQuery.of(context).platformBrightness == Brightness.dark
+                  ? Brightness.light
+                  : Brightness.dark,
+        ),
+      ),
+      body: Row(
         children: [
-          // gradient background
-          if (_rankController.enableGradientBg) ...[
-            Align(
-              alignment: Alignment.topLeft,
-              child: Opacity(
-                opacity: 0.6,
-                child: Container(
-                  width: MediaQuery.of(context).size.width,
-                  height: MediaQuery.of(context).size.height,
-                  decoration: BoxDecoration(
-                    gradient: LinearGradient(
-                        colors: [
-                          Theme.of(context)
-                              .colorScheme
-                              .primary
-                              .withOpacity(0.9),
-                          Theme.of(context)
-                              .colorScheme
-                              .primary
-                              .withOpacity(0.5),
-                          Theme.of(context).colorScheme.surface
-                        ],
-                        begin: Alignment.topLeft,
-                        end: Alignment.bottomRight,
-                        stops: const [0, 0.0034, 0.34]),
-                  ),
-                ),
-              ),
-            ),
-          ],
-          Column(
-            children: [
-              const CustomAppBar(),
-              if (_rankController.tabs.length > 1) ...[
-                const SizedBox(height: 4),
-                SizedBox(
-                  width: double.infinity,
-                  height: 50,
-                  child: Align(
-                    alignment: Alignment.center,
-                    child: TabBar(
-                      padding: const EdgeInsets.symmetric(horizontal: 10),
-                      controller: _rankController.tabController,
-                      tabs: [
-                        for (var i in _rankController.tabs)
-                          Tab(text: i['label'])
-                      ],
-                      labelPadding: const EdgeInsets.symmetric(horizontal: 4),
-                      isScrollable: true,
-                      dividerColor: Colors.transparent,
-                      enableFeedback: true,
-                      splashBorderRadius: BorderRadius.circular(10),
-                      tabAlignment: TabAlignment.center,
-                      onTap: (value) {
+          const SizedBox(
+            width: StyleString.cardSpace,
+          ),
+          LayoutBuilder(builder: (context, constraint) {
+            return SingleChildScrollView(
+                child: ConstrainedBox(
+                    constraints:
+                        BoxConstraints(minHeight: constraint.maxHeight + 100),
+                    child: IntrinsicHeight(
+                        child: NavigationRail(
+                      minWidth: 55.0,
+                      selectedIndex: _selectedTabIndex,
+                      onDestinationSelected: (int index) {
                         feedBack();
-                        if (_rankController.initialIndex.value == value) {
-                          _rankController.tabsCtrList[value]().animateToTop();
+                        if (_selectedTabIndex == index) {
+                          _rankController.tabsCtrList[index]().animateToTop();
+                        } else {
+                          setState(() {
+                            _rankController.tabController.index = index;
+                            _selectedTabIndex = index;
+                          });
                         }
-                        _rankController.initialIndex.value = value;
                       },
-                    ),
-                  ),
-                ),
-              ] else ...[
-                const SizedBox(height: 6),
-              ],
-              Expanded(
-                child: TabBarView(
-                  controller: _rankController.tabController,
-                  children: _rankController.tabsPageList,
-                ),
-              ),
-            ],
+                      labelType: NavigationRailLabelType.none,
+                      destinations: [
+                        for (var tab in _rankController.tabs)
+                          NavigationRailDestination(
+                            icon: Text(tab['label']),
+                            // selectedIcon: Text(tab['label']),
+                            label: const SizedBox.shrink(),
+                          ),
+                      ],
+                    ))));
+          }),
+          Expanded(
+            child: TabBarView(
+              controller: _rankController.tabController,
+              children: _rankController.tabsPageList,
+            ),
           ),
         ],
       ),
     );
   }
 }
-
-class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
-  final double height;
-
-  const CustomAppBar({
-    super.key,
-    this.height = kToolbarHeight,
-  });
-
-  @override
-  Size get preferredSize => Size.fromHeight(height);
-
-  @override
-  Widget build(BuildContext context) {
-    final double top = MediaQuery.of(context).padding.top;
-    return Container(
-      width: MediaQuery.of(context).size.width,
-      height: top,
-      color: Colors.transparent,
-    );
-  }
-}

lib/pages/rank/zone/view.dart

@@ -96,10 +96,10 @@ class _ZonePageState extends State<ZonePage> {
                             crossAxisSpacing: StyleString.cardSpace,
                             // 最大宽度
                             maxCrossAxisExtent: Grid.maxRowWidth * 2,
-                            mainAxisExtent: Grid.calculateActualWidth(
-                                    context,
-                                    Grid.maxRowWidth * 2,
-                                    StyleString.safeSpace) /
+                            mainAxisExtent: Grid.calculateActualWidth(context,
+                                    Grid.maxRowWidth * 2, StyleString.cardSpace,
+                                    screenWidthOffset:
+                                        StyleString.cardSpace + 55) /
                                 2.1 /
                                 StyleString.aspectRatio),
                         delegate: SliverChildBuilderDelegate((context, index) {