feat: 更多横屏适配

lib/common/widgets/video_card_h.dart

@@ -173,6 +173,7 @@ class VideoContent extends StatelessWidget {
               ),
             ] else ...[
               RichText(
+                overflow: TextOverflow.ellipsis,
                 maxLines: 2,
                 text: TextSpan(
                   children: [

lib/pages/dynamics/view.dart

@@ -252,7 +252,7 @@ class _DynamicsPageState extends State<DynamicsPage>
                               maxCrossAxisExtent: Grid.maxRowWidth * 2,
                               //cacheExtent: 0.0,
                               crossAxisSpacing: StyleString.safeSpace,
-                              mainAxisSpacing: StyleString.safeSpace,
+                              mainAxisSpacing: StyleString.cardSpace,
 
                               /// follow max child trailing layout offset and layout with full cross axis extend
                               /// last child as loadmore item/no more item in [GridView] and [WaterfallFlow]

lib/pages/dynamics/widgets/article_panel.dart

@@ -1,15 +1,14 @@
 import 'package:flutter/material.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../../common/constants.dart';
 import 'pic_panel.dart';
 
 Widget articlePanel(item, context, {floor = 1}) {
   TextStyle authorStyle =
       TextStyle(color: Theme.of(context).colorScheme.primary);
   return Padding(
-    padding: floor == 2
+    padding: const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
-        ? EdgeInsets.zero
-        : const EdgeInsets.only(left: 12, right: 12),
     child: Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [

lib/pages/dynamics/widgets/forward_panel.dart

@@ -89,7 +89,11 @@ Widget forWard(item, context, ctr, source, {floor = 1}) {
       return videoSeasonWidget(item, context, 'archive', floor: floor);
     // 文章
     case 'DYNAMIC_TYPE_ARTICLE':
-      return articlePanel(item, context, floor: floor);
+      return Container(
+          padding:
+              const EdgeInsets.only(left: 10, top: 12, right: 10, bottom: 10),
+          color: Theme.of(context).dividerColor.withOpacity(0.08),
+          child: articlePanel(item, context, floor: floor));
     // 转发
     case 'DYNAMIC_TYPE_FORWARD':
       return InkWell(

lib/pages/dynamics/widgets/live_rcmd_panel.dart

@@ -44,9 +44,8 @@ Widget liveRcmdPanel(item, context, {floor = 1}) {
       const SizedBox(height: 4),
       if (item.modules.moduleDynamic.topic != null) ...[
         Padding(
-          padding: floor == 2
+          padding:
-              ? EdgeInsets.zero
+              const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
-              : const EdgeInsets.only(left: 12, right: 12),
           child: GestureDetector(
             child: Text(
               '#${item.modules.moduleDynamic.topic.name}',
@@ -60,7 +59,10 @@ Widget liveRcmdPanel(item, context, {floor = 1}) {
         Text.rich(richNode(item, context)),
         const SizedBox(height: 6),
       ],
-      GestureDetector(
+      Padding(
+          padding:
+              const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
+          child: GestureDetector(
             onTap: () {
               _dynamicsController.pushDetail(item, floor);
             },
@@ -138,12 +140,10 @@ Widget liveRcmdPanel(item, context, {floor = 1}) {
                 ],
               );
             }),
-      ),
+          )),
       const SizedBox(height: 6),
       Padding(
-        padding: floor == 1
+        padding: const EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
-            ? const EdgeInsets.only(left: 12, right: 12)
-            : EdgeInsets.zero,
         child: Text(
           item.modules.moduleDynamic.major.liveRcmd.title,
           maxLines: 1,

lib/pages/dynamics/widgets/video_panel.dart

@@ -76,7 +76,9 @@ Widget videoSeasonWidget(item, context, type, {floor = 1}) {
         Text.rich(richNode(item, context)),
         const SizedBox(height: 6),
       ],
-      LayoutBuilder(builder: (context, box) {
+      Padding(
+          padding: EdgeInsets.symmetric(horizontal: StyleString.safeSpace),
+          child: LayoutBuilder(builder: (context, box) {
             double width = box.maxWidth;
             return Stack(
               children: [
@@ -124,8 +126,10 @@ Widget videoSeasonWidget(item, context, type, {floor = 1}) {
                       children: [
                         DefaultTextStyle.merge(
                           style: TextStyle(
-                          fontSize:
+                              fontSize: Theme.of(context)
-                              Theme.of(context).textTheme.labelMedium!.fontSize,
+                                  .textTheme
+                                  .labelMedium!
+                                  .fontSize,
                               color: Colors.white),
                           child: Row(
                             children: [
@@ -149,7 +153,7 @@ Widget videoSeasonWidget(item, context, type, {floor = 1}) {
                 ),
               ],
             );
-      }),
+          })),
       const SizedBox(height: 6),
       Padding(
         padding: floor == 1

lib/pages/fav/view.dart

@@ -5,6 +5,9 @@ import 'package:PiliPalaX/common/widgets/http_error.dart';
 import 'package:PiliPalaX/pages/fav/index.dart';
 import 'package:PiliPalaX/pages/fav/widgets/item.dart';
 
+import '../../common/constants.dart';
+import '../../utils/grid.dart';
+
 class FavPage extends StatefulWidget {
   const FavPage({super.key});
 
@@ -60,17 +63,28 @@ class _FavPageState extends State<FavPage> {
           if (snapshot.connectionState == ConnectionState.done) {
             Map data = snapshot.data as Map;
             if (data['status']) {
-              return Obx(
+              return Obx(() =>
-                () => ListView.builder(
+                  CustomScrollView(controller: scrollController, slivers: [
-                  controller: scrollController,
+                    SliverGrid(
-                  itemCount: _favController.favFolderData.value.list!.length,
+                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-                  itemBuilder: (context, index) {
+                          mainAxisSpacing: StyleString.cardSpace,
+                          crossAxisSpacing: StyleString.safeSpace,
+                          maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                          mainAxisExtent: Grid.calculateActualWidth(context,
+                                  Grid.maxRowWidth * 2, StyleString.safeSpace) /
+                              1.9 /
+                              StyleString.aspectRatio),
+                      delegate: SliverChildBuilderDelegate(
+                        childCount:
+                        _favController.favFolderData.value.list!.length,
+                        (BuildContext context, int index) {
                           return FavItem(
-                        favFolderItem:
+                              favFolderItem: _favController
-                            _favController.favFolderData.value.list![index]);
+                                  .favFolderData.value.list![index]);
                         },
                       ),
-              );
+                    )
+                  ]));
             } else {
               return CustomScrollView(
                 physics: const NeverScrollableScrollPhysics(),

lib/pages/history/view.dart

@@ -6,6 +6,8 @@ import 'package:PiliPalaX/common/widgets/http_error.dart';
 import 'package:PiliPalaX/common/widgets/no_data.dart';
 import 'package:PiliPalaX/pages/history/index.dart';
 
+import '../../common/constants.dart';
+import '../../utils/grid.dart';
 import 'widgets/item.dart';
 
 class HistoryPage extends StatefulWidget {
@@ -189,7 +191,18 @@ class _HistoryPageState extends State<HistoryPage> {
                   if (data['status']) {
                     return Obx(
                       () => _historyController.historyList.isNotEmpty
-                          ? SliverList(
+                          ? SliverGrid(
+                              gridDelegate:
+                                  SliverGridDelegateWithMaxCrossAxisExtent(
+                                      mainAxisSpacing: StyleString.cardSpace,
+                                      crossAxisSpacing: StyleString.safeSpace,
+                                      maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                                      mainAxisExtent: Grid.calculateActualWidth(
+                                              context,
+                                              Grid.maxRowWidth * 2,
+                                              StyleString.safeSpace) /
+                                          2.1 /
+                                          StyleString.aspectRatio),
                               delegate: SliverChildBuilderDelegate(
                                   (context, index) {
                                 return HistoryItem(

lib/pages/history/widgets/item.dart

@@ -146,7 +146,7 @@ class HistoryItem extends StatelessWidget {
         children: [
           Padding(
             padding: const EdgeInsets.fromLTRB(
-                StyleString.safeSpace, 5, StyleString.safeSpace, 5),
+                StyleString.safeSpace, 0, StyleString.safeSpace, 0),
             child: LayoutBuilder(
               builder: (context, boxConstraints) {
                 double width =

lib/pages/hot/view.dart

@@ -93,7 +93,7 @@ class _HotPageState extends State<HotPage> with AutomaticKeepAliveClientMixin {
                       () => SliverGrid(
                         gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
                           // 行间距
-                          mainAxisSpacing: StyleString.safeSpace,
+                          mainAxisSpacing: StyleString.cardSpace,
                           // 列间距
                           crossAxisSpacing: StyleString.safeSpace,
                           // 最大宽度

lib/pages/later/view.dart

@@ -6,6 +6,9 @@ import 'package:PiliPalaX/common/widgets/no_data.dart';
 import 'package:PiliPalaX/common/widgets/video_card_h.dart';
 import 'package:PiliPalaX/pages/later/index.dart';
 
+import '../../common/constants.dart';
+import '../../utils/grid.dart';
+
 class LaterPage extends StatefulWidget {
   const LaterPage({super.key});
 
@@ -77,7 +80,18 @@ class _LaterPageState extends State<LaterPage> {
                   return Obx(
                     () => _laterController.laterList.isNotEmpty &&
                             !_laterController.isLoading.value
-                        ? SliverList(
+                        ? SliverGrid(
+                            gridDelegate:
+                                SliverGridDelegateWithMaxCrossAxisExtent(
+                                    mainAxisSpacing: StyleString.cardSpace,
+                                    crossAxisSpacing: StyleString.safeSpace,
+                                    maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                                    mainAxisExtent: Grid.calculateActualWidth(
+                                            context,
+                                            Grid.maxRowWidth * 2,
+                                            StyleString.safeSpace) /
+                                        1.9 /
+                                        StyleString.aspectRatio),
                             delegate:
                                 SliverChildBuilderDelegate((context, index) {
                               var videoItem = _laterController.laterList[index];

lib/pages/member_archive/view.dart

@@ -3,7 +3,9 @@ import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:PiliPalaX/common/widgets/video_card_h.dart';
 import 'package:PiliPalaX/utils/utils.dart';
+import '../../common/constants.dart';
 import '../../common/widgets/http_error.dart';
+import '../../utils/grid.dart';
 import 'controller.dart';
 
 class MemberArchivePage extends StatefulWidget {
@@ -72,7 +74,18 @@ class _MemberArchivePageState extends State<MemberArchivePage> {
                   if (data['status']) {
                     return Obx(
                       () => list.isNotEmpty
-                          ? SliverList(
+                          ? SliverGrid(
+                              gridDelegate:
+                                  SliverGridDelegateWithMaxCrossAxisExtent(
+                                      mainAxisSpacing: StyleString.cardSpace,
+                                      crossAxisSpacing: StyleString.safeSpace,
+                                      maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                                      mainAxisExtent: Grid.calculateActualWidth(
+                                              context,
+                                              Grid.maxRowWidth * 2,
+                                              StyleString.safeSpace) /
+                                          1.9 /
+                                          StyleString.aspectRatio),
                               delegate: SliverChildBuilderDelegate(
                                 (BuildContext context, index) {
                                   return VideoCardH(

lib/pages/member_dynamics/view.dart

@@ -4,8 +4,11 @@ import 'package:get/get.dart';
 import 'package:PiliPalaX/pages/member_dynamics/index.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../common/constants.dart';
 import '../../common/widgets/http_error.dart';
+import '../../utils/grid.dart';
 import '../dynamics/widgets/dynamic_panel.dart';
+import 'package:waterfall_flow/waterfall_flow.dart';
 
 class MemberDynamicsPage extends StatefulWidget {
   const MemberDynamicsPage({super.key});
@@ -70,14 +73,28 @@ class _MemberDynamicsPageState extends State<MemberDynamicsPage> {
                   if (data['status']) {
                     return Obx(
                       () => list.isNotEmpty
-                          ? SliverList(
+                          ? SliverWaterfallFlow.extent(
-                              delegate: SliverChildBuilderDelegate(
+                              maxCrossAxisExtent: Grid.maxRowWidth * 2,
-                                (context, index) {
+                              //cacheExtent: 0.0,
-                                  return DynamicPanel(item: list[index]);
+                              crossAxisSpacing: StyleString.safeSpace,
-                                },
+                              mainAxisSpacing: StyleString.safeSpace,
-                                childCount: list.length,
+
-                              ),
+                              /// follow max child trailing layout offset and layout with full cross axis extend
-                            )
+                              /// last child as loadmore item/no more item in [GridView] and [WaterfallFlow]
+                              /// with full cross axis extend
+                              //  LastChildLayoutType.fullCrossAxisExtend,
+
+                              /// as foot at trailing and layout with full cross axis extend
+                              /// show no more item at trailing when children are not full of viewport
+                              /// if children is full of viewport, it's the same as fullCrossAxisExtend
+                              //  LastChildLayoutType.foot,
+                              lastChildLayoutTypeBuilder: (index) =>
+                                  index == list.length
+                                      ? LastChildLayoutType.foot
+                                      : LastChildLayoutType.none,
+                              children: [
+                                  for (var i in list) DynamicPanel(item: i),
+                                ])
                           : const SliverToBoxAdapter(),
                     );
                   } else {

lib/pages/search_panel/widgets/article_panel.dart

@@ -4,14 +4,24 @@ import 'package:PiliPalaX/common/constants.dart';
 import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../../utils/grid.dart';
+
 Widget searchArticlePanel(BuildContext context, ctr, list) {
   TextStyle textStyle = TextStyle(
       fontSize: Theme.of(context).textTheme.labelSmall!.fontSize,
       color: Theme.of(context).colorScheme.outline);
-  return ListView.builder(
+  return CustomScrollView(controller: ctr.scrollController, slivers: [
-    controller: ctr!.scrollController,
+    SliverGrid(
-    itemCount: list.length,
+        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-    itemBuilder: (context, index) {
+            mainAxisSpacing: StyleString.cardSpace,
+            crossAxisSpacing: StyleString.safeSpace,
+            maxCrossAxisExtent: Grid.maxRowWidth * 2,
+            mainAxisExtent: Grid.calculateActualWidth(
+                    context, Grid.maxRowWidth * 2, StyleString.safeSpace) /
+                1.9 /
+                StyleString.aspectRatio),
+        delegate: SliverChildBuilderDelegate(
+          (BuildContext context, int index) {
             return InkWell(
               onTap: () {
                 Get.toNamed('/htmlRender', parameters: {
@@ -40,7 +50,8 @@ Widget searchArticlePanel(BuildContext context, ctr, list) {
                             list[index].imageUrls.isNotEmpty)
                           AspectRatio(
                             aspectRatio: StyleString.aspectRatio,
-                      child: LayoutBuilder(builder: (context, boxConstraints) {
+                            child: LayoutBuilder(
+                                builder: (context, boxConstraints) {
                               double maxWidth = boxConstraints.maxWidth;
                               double maxHeight = boxConstraints.maxHeight;
                               return NetworkImgLayer(
@@ -87,9 +98,11 @@ Widget searchArticlePanel(BuildContext context, ctr, list) {
                                     style: textStyle),
                                 Row(
                                   children: [
-                              Text('${list[index].view}浏览', style: textStyle),
+                                    Text('${list[index].view}浏览',
+                                        style: textStyle),
                                     Text(' • ', style: textStyle),
-                              Text('${list[index].reply}评论', style: textStyle),
+                                    Text('${list[index].reply}评论',
+                                        style: textStyle),
                                   ],
                                 ),
                               ],
@@ -103,5 +116,6 @@ Widget searchArticlePanel(BuildContext context, ctr, list) {
               ),
             );
           },
-  );
+        ))
+  ]);
 }

lib/pages/search_panel/widgets/live_panel.dart

@@ -4,6 +4,8 @@ import 'package:PiliPalaX/common/constants.dart';
 import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../../utils/grid.dart';
+
 Widget searchLivePanel(BuildContext context, ctr, list) {
   return Padding(
     padding: const EdgeInsets.only(
@@ -11,13 +13,15 @@ Widget searchLivePanel(BuildContext context, ctr, list) {
     child: GridView.builder(
       primary: false,
       controller: ctr!.scrollController,
-      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-          crossAxisCount: 2,
+        maxCrossAxisExtent: Grid.maxRowWidth,
-          crossAxisSpacing: StyleString.cardSpace + 2,
+        crossAxisSpacing: StyleString.safeSpace,
-          mainAxisSpacing: StyleString.cardSpace + 3,
+        mainAxisSpacing: StyleString.safeSpace,
-          mainAxisExtent:
+        mainAxisExtent: Grid.calculateActualWidth(
-              MediaQuery.sizeOf(context).width / 2 / StyleString.aspectRatio +
+                    context, Grid.maxRowWidth, StyleString.safeSpace) /
-                  MediaQuery.textScalerOf(context).scale(66.0)),
+                StyleString.aspectRatio +
+            MediaQuery.textScalerOf(context).scale(80),
+      ),
       itemCount: list.length,
       itemBuilder: (context, index) {
         return LiveItem(liveItem: list![index]);

lib/pages/search_panel/widgets/media_bangumi_panel.dart

@@ -9,15 +9,23 @@ import 'package:PiliPalaX/models/bangumi/info.dart';
 import 'package:PiliPalaX/models/common/search_type.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../../utils/grid.dart';
+
 Widget searchMbangumiPanel(BuildContext context, ctr, list) {
   TextStyle style =
   TextStyle(fontSize: Theme.of(context).textTheme.labelMedium!.fontSize);
-  return ListView.builder(
+  return Expanded(
-    controller: ctr!.scrollController,
+    child: CustomScrollView(
-    addAutomaticKeepAlives: false,
+      controller: ctr.scrollController,
-    addRepaintBoundaries: false,
+      slivers: [
-    itemCount: list!.length,
+        SliverGrid(
-    itemBuilder: (context, index) {
+          gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+            mainAxisSpacing: StyleString.cardSpace,
+            crossAxisSpacing: StyleString.safeSpace,
+            maxCrossAxisExtent: Grid.maxRowWidth * 2,
+            mainAxisExtent: 157,),
+          delegate:
+          SliverChildBuilderDelegate((BuildContext context, int index) {
             var i = list![index];
             return InkWell(
               onTap: () {
@@ -30,7 +38,7 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) {
               },
               child: Padding(
                 padding: const EdgeInsets.fromLTRB(
-              StyleString.safeSpace, 7, StyleString.safeSpace, 7),
+                    StyleString.safeSpace, 7, StyleString.safeSpace, 2),
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   children: [
@@ -61,7 +69,8 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) {
                             overflow: TextOverflow.ellipsis,
                             text: TextSpan(
                               style: TextStyle(
-                            color: Theme.of(context).colorScheme.onSurface),
+                                  color:
+                                  Theme.of(context).colorScheme.onSurface),
                               children: [
                                 for (var i in i.title) ...[
                                   TextSpan(
@@ -74,8 +83,12 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) {
                                           .fontSize!),
                                       fontWeight: FontWeight.bold,
                                       color: i['type'] == 'em'
-                                    ? Theme.of(context).colorScheme.primary
+                                          ? Theme.of(context)
-                                    : Theme.of(context).colorScheme.onSurface,
+                                          .colorScheme
+                                          .primary
+                                          : Theme.of(context)
+                                          .colorScheme
+                                          .onSurface,
                                     ),
                                   ),
                                 ],
@@ -114,7 +127,8 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) {
                                     seasonId: i.seasonId);
                                 SmartDialog.dismiss().then((value) {
                                   if (res['status']) {
-                              EpisodeItem episode = res['data'].episodes.first;
+                                    EpisodeItem episode =
+                                        res['data'].episodes.first;
                                     String bvid = episode.bvid!;
                                     int cid = episode.cid!;
                                     String pic = episode.cover!;
@@ -141,6 +155,9 @@ Widget searchMbangumiPanel(BuildContext context, ctr, list) {
                 ),
               ),
             );
-    },
+          }, childCount: list.length),
+        ),
+      ],
+    ),
   );
 }

lib/pages/search_panel/widgets/user_panel.dart

@@ -3,26 +3,31 @@ import 'package:get/get.dart';
 import 'package:PiliPalaX/common/widgets/network_img_layer.dart';
 import 'package:PiliPalaX/utils/utils.dart';
 
+import '../../../common/constants.dart';
+import '../../../utils/grid.dart';
+
 Widget searchUserPanel(BuildContext context, ctr, list) {
   TextStyle style = TextStyle(
       fontSize: Theme.of(context).textTheme.labelSmall!.fontSize,
       color: Theme.of(context).colorScheme.outline);
 
-  return ListView.builder(
+  return CustomScrollView(controller: ctr.scrollController, slivers: [
-    controller: ctr!.scrollController,
+    SliverGrid(
-    addAutomaticKeepAlives: false,
+        gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-    addRepaintBoundaries: false,
+            mainAxisSpacing: StyleString.cardSpace,
-    itemCount: list!.length,
+            crossAxisSpacing: StyleString.safeSpace,
-    itemBuilder: (context, index) {
+            maxCrossAxisExtent: Grid.maxRowWidth * 2,
+            mainAxisExtent: 52),
+        delegate: SliverChildBuilderDelegate(
+          (BuildContext context, int index) {
             var i = list![index];
             String heroTag = Utils.makeHeroTag(i!.mid);
             return InkWell(
               onTap: () => Get.toNamed('/member?mid=${i.mid}',
                   arguments: {'heroTag': heroTag, 'face': i.upic}),
-        child: Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
               child: Row(
                 children: [
+                  const SizedBox(width: 15),
                   Hero(
                     tag: heroTag,
                     child: NetworkImgLayer(
@@ -69,8 +74,8 @@ Widget searchUserPanel(BuildContext context, ctr, list) {
                   )
                 ],
               ),
-        ),
             );
           },
-  );
+        ))
+  ]);
 }

lib/pages/search_panel/widgets/video_panel.dart

@@ -5,53 +5,30 @@ import 'package:PiliPalaX/common/widgets/video_card_h.dart';
 import 'package:PiliPalaX/models/common/search_type.dart';
 import 'package:PiliPalaX/pages/search_panel/index.dart';
 
+import '../../../common/constants.dart';
+import '../../../utils/grid.dart';
+
 class SearchVideoPanel extends StatelessWidget {
   SearchVideoPanel({
-    this.ctr,
+    required this.ctr,
-    this.list,
+    required this.list,
     Key? key,
   }) : super(key: key);
 
-  final SearchPanelController? ctr;
+  final SearchPanelController ctr;
-  final List? list;
+  final List list;
 
   final VideoPanelController controller = Get.put(VideoPanelController());
 
   @override
   Widget build(BuildContext context) {
-    return Stack(
+    return Column(
-      alignment: Alignment.topCenter,
       children: [
-        Padding(
-          padding: const EdgeInsets.only(top: 36),
-          child: ListView.builder(
-            controller: ctr!.scrollController,
-            addAutomaticKeepAlives: false,
-            addRepaintBoundaries: false,
-            itemCount: list!.length,
-            itemBuilder: (context, index) {
-              var i = list![index];
-              return Padding(
-                padding: index == 0
-                    ? const EdgeInsets.only(top: 2)
-                    : EdgeInsets.zero,
-                child: VideoCardH(videoItem: i, showPubdate: true),
-              );
-            },
-          ),
-        ),
         // 分类筛选
         Container(
-          width: double.infinity,
+          width: context.width,
-          height: 36,
+          height: 34,
           padding: const EdgeInsets.only(left: 8, top: 0, right: 12),
-          // decoration: BoxDecoration(
-          //   border: Border(
-          //     bottom: BorderSide(
-          //       color: Theme.of(context).colorScheme.primary.withOpacity(0.1),
-          //     ),
-          //   ),
-          // ),
           child: Row(
             children: [
               Expanded(
@@ -67,11 +44,12 @@ class SearchVideoPanel extends StatelessWidget {
                             type: i['type'],
                             selectedType: controller.selectedType.value,
                             callFn: (bool selected) async {
+                              print('selected: $selected');
                               controller.selectedType.value = i['type'];
-                              ctr!.order.value =
+                              ctr.order.value =
                                   i['type'].toString().split('.').last;
                               SmartDialog.showLoading(msg: 'loading');
-                              await ctr!.onRefresh();
+                              await ctr.onRefresh();
                               SmartDialog.dismiss();
                             },
                           ),
@@ -101,7 +79,29 @@ class SearchVideoPanel extends StatelessWidget {
               ),
             ],
           ),
-        ), // 放置在ListView.builder()上方的组件
+        ),
+        Expanded(
+            child: CustomScrollView(
+          controller: ctr.scrollController,
+          slivers: [
+            SliverGrid(
+              gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
+                  mainAxisSpacing: StyleString.cardSpace,
+                  crossAxisSpacing: StyleString.safeSpace,
+                  maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                  mainAxisExtent: Grid.calculateActualWidth(context,
+                          Grid.maxRowWidth * 2, StyleString.safeSpace) /
+                      1.9 /
+                      StyleString.aspectRatio),
+              delegate: SliverChildBuilderDelegate(
+                (BuildContext context, int index) {
+                  return VideoCardH(videoItem: list[index], showPubdate: true);
+                },
+                childCount: list.length,
+              ),
+            ),
+          ],
+        )),
       ],
     );
   }
@@ -126,7 +126,7 @@ class CustomFilterChip extends StatelessWidget {
     return SizedBox(
       height: 34,
       child: FilterChip(
-        padding: const EdgeInsets.only(left: 11, right: 11),
+        padding: const EdgeInsets.only(left: 8, right: 8),
         labelPadding: EdgeInsets.zero,
         label: Text(
           label!,

lib/pages/subscription/view.dart

@@ -2,6 +2,8 @@ import 'package:easy_debounce/easy_throttle.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:PiliPalaX/common/widgets/http_error.dart';
+import '../../common/constants.dart';
+import '../../utils/grid.dart';
 import 'controller.dart';
 import 'widgets/item.dart';
 
@@ -51,17 +53,28 @@ class _SubPageState extends State<SubPage> {
           if (snapshot.connectionState == ConnectionState.done) {
             Map? data = snapshot.data;
             if (data != null && data['status']) {
-              return Obx(
+              return Obx(() =>
-                () => ListView.builder(
+                  CustomScrollView(controller: scrollController, slivers: [
-                  controller: scrollController,
+                    SliverGrid(
-                  itemCount: _subController.subFolderData.value.list!.length,
+                      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
-                  itemBuilder: (context, index) {
+                          mainAxisSpacing: StyleString.cardSpace,
+                          crossAxisSpacing: StyleString.safeSpace,
+                          maxCrossAxisExtent: Grid.maxRowWidth * 2,
+                          mainAxisExtent: Grid.calculateActualWidth(context,
+                                  Grid.maxRowWidth * 2, StyleString.safeSpace) /
+                              1.9 /
+                              StyleString.aspectRatio),
+                      delegate: SliverChildBuilderDelegate(
+                        childCount:
+                            _subController.subFolderData.value.list!.length,
+                        (BuildContext context, int index) {
                           return SubItem(
-                        subFolderItem:
+                              subFolderItem: _subController
-                            _subController.subFolderData.value.list![index]);
+                                  .subFolderData.value.list![index]);
                         },
                       ),
-              );
+                    )
+                  ]));
             } else {
               return CustomScrollView(
                 physics: const NeverScrollableScrollPhysics(),