feat:支持排行榜功能

lib/pages/main/controller.dart

@@ -9,6 +9,7 @@ import 'package:pilipala/http/common.dart';
 import 'package:pilipala/pages/dynamics/index.dart';
 import 'package:pilipala/pages/home/view.dart';
 import 'package:pilipala/pages/media/index.dart';
+import 'package:pilipala/pages/rank/index.dart';
 import 'package:pilipala/utils/storage.dart';
 import 'package:pilipala/utils/utils.dart';
 import '../../models/common/dynamic_badge_mode.dart';
@@ -17,6 +18,7 @@ import '../../models/common/nav_bar_config.dart';
 class MainController extends GetxController {
   List<Widget> pages = <Widget>[
     const HomePage(),
+    const RankPage(),
     const DynamicsPage(),
     const MediaPage(),
   ];

lib/pages/main/view.dart

@@ -7,6 +7,7 @@ import 'package:pilipala/models/common/dynamic_badge_mode.dart';
 import 'package:pilipala/pages/dynamics/index.dart';
 import 'package:pilipala/pages/home/index.dart';
 import 'package:pilipala/pages/media/index.dart';
+import 'package:pilipala/pages/rank/index.dart';
 import 'package:pilipala/utils/event_bus.dart';
 import 'package:pilipala/utils/feed_back.dart';
 import 'package:pilipala/utils/storage.dart';
@@ -22,6 +23,7 @@ class MainApp extends StatefulWidget {
 class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
   final MainController _mainController = Get.put(MainController());
   final HomeController _homeController = Get.put(HomeController());
+  final RankController _rankController = Get.put(RankController());
   final DynamicsController _dynamicController = Get.put(DynamicsController());
   final MediaController _mediaController = Get.put(MediaController());
 
@@ -57,6 +59,21 @@ class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
       _homeController.flag = false;
     }
 
+    if (currentPage is RankPage) {
+      if (_rankController.flag) {
+        // 单击返回顶部 双击并刷新
+        if (DateTime.now().millisecondsSinceEpoch - _lastSelectTime! < 500) {
+          _rankController.onRefresh();
+        } else {
+          _rankController.animateToTop();
+        }
+        _lastSelectTime = DateTime.now().millisecondsSinceEpoch;
+      }
+      _rankController.flag = true;
+    } else {
+      _rankController.flag = false;
+    }
+
     if (currentPage is DynamicsPage) {
       if (_dynamicController.flag) {
         // 单击返回顶部 双击并刷新

lib/pages/rank/controller.dart

@@ -0,0 +1,70 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:get/get.dart';
+import 'package:hive/hive.dart';
+import 'package:pilipala/models/common/rank_type.dart';
+import 'package:pilipala/utils/storage.dart';
+
+class RankController extends GetxController with GetTickerProviderStateMixin {
+  bool flag = false;
+  late RxList tabs = [].obs;
+  RxInt initialIndex = 1.obs;
+  late TabController tabController;
+  late List tabsCtrList;
+  late List<Widget> tabsPageList;
+  Box setting = GStrorage.setting;
+  late final StreamController<bool> searchBarStream =
+      StreamController<bool>.broadcast();
+  late bool enableGradientBg;
+
+  @override
+  void onInit() {
+    super.onInit();
+    enableGradientBg =
+        setting.get(SettingBoxKey.enableGradientBg, defaultValue: true);
+    // 进行tabs配置
+    setTabConfig();
+  }
+
+  void onRefresh() {
+    int index = tabController.index;
+    var ctr = tabsCtrList[index];
+    ctr().onRefresh();
+  }
+
+  void animateToTop() {
+    int index = tabController.index;
+    var ctr = tabsCtrList[index];
+    ctr().animateToTop();
+  }
+
+  void setTabConfig() async {
+    tabs.value = tabsConfig;
+    initialIndex.value = 0;
+    tabsCtrList = tabs.map((e) => e['ctr']).toList();
+    tabsPageList = tabs.map<Widget>((e) => e['page']).toList();
+
+    tabController = TabController(
+      initialIndex: initialIndex.value,
+      length: tabs.length,
+      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;
+          }
+        }
+      });
+    }
+  }
+}

lib/pages/rank/index.dart

@@ -0,0 +1,4 @@
+library rank;
+
+export './controller.dart';
+export './view.dart';

lib/pages/rank/view.dart

@@ -0,0 +1,149 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/utils/feed_back.dart';
+import './controller.dart';
+
+class RankPage extends StatefulWidget {
+  const RankPage({Key? key}) : super(key: key);
+
+  @override
+  State<RankPage> createState() => _RankPageState();
+}
+
+class _RankPageState extends State<RankPage>
+    with AutomaticKeepAliveClientMixin, TickerProviderStateMixin {
+  final RankController _rankController = Get.put(RankController());
+  List videoList = [];
+  late Stream<bool> stream;
+
+  @override
+  bool get wantKeepAlive => true;
+
+  @override
+  void initState() {
+    super.initState();
+    stream = _rankController.searchBarStream.stream;
+  }
+
+  @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(
+        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: 42,
+                  child: Align(
+                    alignment: Alignment.center,
+                    child: TabBar(
+                      controller: _rankController.tabController,
+                      tabs: [
+                        for (var i in _rankController.tabs)
+                          Tab(text: i['label'])
+                      ],
+                      isScrollable: true,
+                      dividerColor: Colors.transparent,
+                      enableFeedback: true,
+                      splashBorderRadius: BorderRadius.circular(10),
+                      tabAlignment: TabAlignment.center,
+                      onTap: (value) {
+                        feedBack();
+                        if (_rankController.initialIndex.value == value) {
+                          _rankController.tabsCtrList[value]().animateToTop();
+                        }
+                        _rankController.initialIndex.value = value;
+                      },
+                    ),
+                  ),
+                ),
+              ] else ...[
+                const SizedBox(height: 6),
+              ],
+              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/controller.dart

@@ -0,0 +1,53 @@
+import 'package:get/get.dart';
+import 'package:flutter/material.dart';
+import 'package:pilipala/http/video.dart';
+import 'package:pilipala/models/model_hot_video_item.dart';
+
+class ZoneController extends GetxController {
+  final ScrollController scrollController = ScrollController();
+  RxList<HotVideoItemModel> videoList = <HotVideoItemModel>[].obs;
+  bool isLoadingMore = false;
+  bool flag = false;
+  OverlayEntry? popupDialog;
+  int zoneID = 0;
+
+  // 获取推荐
+  Future queryRankFeed(type, rid) async {
+    zoneID = rid;
+    var res = await VideoHttp.getRankVideoList(zoneID);
+    if (res['status']) {
+      if (type == 'init') {
+        videoList.value = res['data'];
+      } else if (type == 'onRefresh') {
+        videoList.clear();
+        videoList.addAll(res['data']);
+      } else if (type == 'onLoad') {
+        videoList.clear();
+        videoList.addAll(res['data']);
+      }
+    }
+    isLoadingMore = false;
+    return res;
+  }
+
+  // 下拉刷新
+  Future onRefresh() async {
+    queryRankFeed('onRefresh', zoneID);
+  }
+
+  // 上拉加载
+  Future onLoad() async {
+    queryRankFeed('onLoad', zoneID);
+  }
+
+  // 返回顶部并刷新
+  void animateToTop() async {
+    if (scrollController.offset >=
+        MediaQuery.of(Get.context!).size.height * 5) {
+      scrollController.jumpTo(0);
+    } else {
+      await scrollController.animateTo(0,
+          duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
+    }
+  }
+}

lib/pages/rank/zone/index.dart

@@ -0,0 +1,4 @@
+library rank.zone;
+
+export './controller.dart';
+export './view.dart';

lib/pages/rank/zone/view.dart

@@ -0,0 +1,148 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/rendering.dart';
+import 'package:get/get.dart';
+import 'package:pilipala/common/constants.dart';
+import 'package:pilipala/common/widgets/animated_dialog.dart';
+import 'package:pilipala/common/widgets/overlay_pop.dart';
+import 'package:pilipala/common/skeleton/video_card_h.dart';
+import 'package:pilipala/common/widgets/http_error.dart';
+import 'package:pilipala/common/widgets/video_card_h.dart';
+import 'package:pilipala/pages/home/index.dart';
+import 'package:pilipala/pages/main/index.dart';
+import 'package:pilipala/pages/rank/zone/index.dart';
+
+class ZonePage extends StatefulWidget {
+  const ZonePage({Key? key, required this.rid}) : super(key: key);
+
+  final int rid;
+
+  @override
+  State<ZonePage> createState() => _ZonePageState();
+}
+
+class _ZonePageState extends State<ZonePage> {
+  final ZoneController _zoneController = Get.put(ZoneController());
+  List videoList = [];
+  Future? _futureBuilderFuture;
+  late ScrollController scrollController;
+
+  @override
+  void initState() {
+    super.initState();
+    _futureBuilderFuture = _zoneController.queryRankFeed('init', widget.rid);
+    scrollController = _zoneController.scrollController;
+    StreamController<bool> mainStream =
+        Get.find<MainController>().bottomBarStream;
+    StreamController<bool> searchBarStream =
+        Get.find<HomeController>().searchBarStream;
+    scrollController.addListener(
+      () {
+        if (scrollController.position.pixels >=
+            scrollController.position.maxScrollExtent - 200) {
+          if (!_zoneController.isLoadingMore) {
+            _zoneController.isLoadingMore = true;
+            _zoneController.onLoad();
+          }
+        }
+
+        final ScrollDirection direction =
+            scrollController.position.userScrollDirection;
+        if (direction == ScrollDirection.forward) {
+          mainStream.add(true);
+          searchBarStream.add(true);
+        } else if (direction == ScrollDirection.reverse) {
+          mainStream.add(false);
+          searchBarStream.add(false);
+        }
+      },
+    );
+  }
+
+  @override
+  void dispose() {
+    scrollController.removeListener(() {});
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RefreshIndicator(
+      onRefresh: () async {
+        return await _zoneController.onRefresh();
+      },
+      child: CustomScrollView(
+        controller: _zoneController.scrollController,
+        slivers: [
+          SliverPadding(
+            // 单列布局 EdgeInsets.zero
+            padding:
+                const EdgeInsets.fromLTRB(0, StyleString.safeSpace - 5, 0, 0),
+            sliver: FutureBuilder(
+              future: _futureBuilderFuture,
+              builder: (context, snapshot) {
+                if (snapshot.connectionState == ConnectionState.done) {
+                  Map data = snapshot.data as Map;
+                  if (data['status']) {
+                    return Obx(
+                      () => SliverList(
+                        delegate: SliverChildBuilderDelegate((context, index) {
+                          return VideoCardH(
+                            videoItem: _zoneController.videoList[index],
+                            showPubdate: true,
+                            longPress: () {
+                              _zoneController.popupDialog = _createPopupDialog(
+                                  _zoneController.videoList[index]);
+                              Overlay.of(context)
+                                  .insert(_zoneController.popupDialog!);
+                            },
+                            longPressEnd: () {
+                              _zoneController.popupDialog?.remove();
+                            },
+                          );
+                        }, childCount: _zoneController.videoList.length),
+                      ),
+                    );
+                  } else {
+                    return HttpError(
+                      errMsg: data['msg'],
+                      fn: () {
+                        setState(() {
+                          _futureBuilderFuture =
+                              _zoneController.queryRankFeed('init', widget.rid);
+                        });
+                      },
+                    );
+                  }
+                } else {
+                  // 骨架屏
+                  return SliverList(
+                    delegate: SliverChildBuilderDelegate((context, index) {
+                      return const VideoCardHSkeleton();
+                    }, childCount: 10),
+                  );
+                }
+              },
+            ),
+          ),
+          SliverToBoxAdapter(
+            child: SizedBox(
+              height: MediaQuery.of(context).padding.bottom + 10,
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  OverlayEntry _createPopupDialog(videoItem) {
+    return OverlayEntry(
+      builder: (context) => AnimatedDialog(
+        closeFn: _zoneController.popupDialog?.remove,
+        child: OverlayPop(
+            videoItem: videoItem, closeFn: _zoneController.popupDialog?.remove),
+      ),
+    );
+  }
+}