feat: 首页单列模式

lib/common/skeleton/video_card_v.dart

@@ -45,11 +45,6 @@ class VideoCardVSkeleton extends StatelessWidget {
                   margin: const EdgeInsets.only(bottom: 12),
                   color: Theme.of(context).colorScheme.onInverseSurface,
                 ),
-                Container(
-                  width: 80,
-                  height: 12,
-                  color: Theme.of(context).colorScheme.onInverseSurface,
-                ),
               ],
             ),
           ),

lib/common/widgets/video_card_v.dart

@@ -15,12 +15,14 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
 // 视频卡片 - 垂直布局
 class VideoCardV extends StatelessWidget {
   final dynamic videoItem;
+  final int crossAxisCount;
   final Function()? longPress;
   final Function()? longPressEnd;
 
   const VideoCardV({
     Key? key,
     required this.videoItem,
+    required this.crossAxisCount,
     this.longPress,
     this.longPressEnd,
   }) : super(key: key);
@@ -77,7 +79,7 @@ class VideoCardV extends StatelessWidget {
   Widget build(BuildContext context) {
     String heroTag = Utils.makeHeroTag(videoItem.id);
     return Card(
-      elevation: 1,
+      elevation: crossAxisCount == 1 ? 0 : 1,
       clipBehavior: Clip.hardEdge,
       margin: EdgeInsets.zero,
       child: GestureDetector(
@@ -100,17 +102,27 @@ class VideoCardV extends StatelessWidget {
                 child: LayoutBuilder(builder: (context, boxConstraints) {
                   double maxWidth = boxConstraints.maxWidth;
                   double maxHeight = boxConstraints.maxHeight;
-                  return Hero(
+                  return Stack(
+                    children: [
+                      Hero(
                         tag: heroTag,
                         child: NetworkImgLayer(
                           src: videoItem.pic,
                           width: maxWidth,
                           height: maxHeight,
                         ),
+                      ),
+                      if (crossAxisCount == 1)
+                        PBadge(
+                          bottom: 10,
+                          right: 10,
+                          text: videoItem.duration,
+                        )
+                    ],
                   );
                 }),
               ),
-              VideoContent(videoItem: videoItem)
+              VideoContent(videoItem: videoItem, crossAxisCount: crossAxisCount)
             ],
           ),
         ),
@@ -121,22 +133,47 @@ class VideoCardV extends StatelessWidget {
 
 class VideoContent extends StatelessWidget {
   final dynamic videoItem;
-  const VideoContent({Key? key, required this.videoItem}) : super(key: key);
+  final int crossAxisCount;
+  const VideoContent(
+      {Key? key, required this.videoItem, required this.crossAxisCount})
+      : super(key: key);
   @override
   Widget build(BuildContext context) {
     return Expanded(
+      flex: crossAxisCount == 1 ? 0 : 1,
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(9, 8, 9, 4),
+        padding: crossAxisCount == 1
+            ? const EdgeInsets.fromLTRB(9, 9, 9, 4)
+            : const EdgeInsets.fromLTRB(9, 8, 9, 4),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            Text(
+            Row(
+              children: [
+                Expanded(
+                  child: Text(
                     videoItem.title,
                     maxLines: 2,
                     overflow: TextOverflow.ellipsis,
                   ),
-
+                ),
+                if (videoItem.goto == 'av' && crossAxisCount == 1) ...[
+                  const SizedBox(width: 10),
+                  WatchLater(
+                    size: 32,
+                    iconSize: 18,
+                    callFn: () async {
+                      int aid = videoItem.param;
+                      var res =
+                          await UserHttp.toViewLater(bvid: IdUtils.av2bv(aid));
+                      SmartDialog.showToast(res['msg']);
+                    },
+                  ),
+                ],
+              ],
+            ),
+            if (crossAxisCount == 1) const SizedBox(height: 6),
             Row(
               children: [
                 if (videoItem.goto == 'bangumi') ...[
@@ -167,6 +204,7 @@ class VideoContent extends StatelessWidget {
                   )
                 ],
                 Expanded(
+                  flex: crossAxisCount == 1 ? 0 : 1,
                   child: Text(
                     videoItem.owner.name,
                     maxLines: 1,
@@ -177,30 +215,102 @@ class VideoContent extends StatelessWidget {
                     ),
                   ),
                 ),
-                if (videoItem.goto == 'av')
+                if (crossAxisCount == 1) ...[
-                  SizedBox(
+                  Text(
-                    width: 24,
+                    ' • ',
-                    height: 24,
+                    style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.labelMedium!.fontSize,
+                      color: Theme.of(context).colorScheme.outline,
+                    ),
+                  ),
+                  VideoStat(
+                    videoItem: videoItem,
+                  )
+                ],
+                const Spacer(),
+                if (videoItem.goto == 'av' && crossAxisCount != 1)
+                  WatchLater(
+                    size: 24,
+                    iconSize: 14,
+                    callFn: () async {
+                      int aid = videoItem.param;
+                      var res =
+                          await UserHttp.toViewLater(bvid: IdUtils.av2bv(aid));
+                      SmartDialog.showToast(res['msg']);
+                    },
+                  ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+class VideoStat extends StatelessWidget {
+  final dynamic videoItem;
+
+  const VideoStat({
+    Key? key,
+    required this.videoItem,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Text(
+          '${videoItem.stat.view}次观看',
+          style: TextStyle(
+            fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
+            color: Theme.of(context).colorScheme.outline,
+          ),
+        ),
+        Text(
+          ' • ${videoItem.stat.danmu}条弹幕',
+          style: TextStyle(
+            fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
+            color: Theme.of(context).colorScheme.outline,
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class WatchLater extends StatelessWidget {
+  final double? size;
+  final double? iconSize;
+  final Function? callFn;
+
+  const WatchLater({
+    Key? key,
+    required this.size,
+    required this.iconSize,
+    this.callFn,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: size,
+      height: size,
       child: PopupMenuButton<String>(
         padding: EdgeInsets.zero,
         tooltip: '稍后再看',
         icon: Icon(
           Icons.more_vert_outlined,
           color: Theme.of(context).colorScheme.outline,
-                        size: 14,
+          size: iconSize,
         ),
         position: PopupMenuPosition.under,
         // constraints: const BoxConstraints(maxHeight: 35),
         onSelected: (String type) {},
-                      itemBuilder: (BuildContext context) =>
+        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
-                          <PopupMenuEntry<String>>[
           PopupMenuItem<String>(
-                          onTap: () async {
+            onTap: () => callFn!(),
-                            int aid = videoItem.param;
-                            var res = await UserHttp.toViewLater(
-                                bvid: IdUtils.av2bv(aid));
-                            SmartDialog.showToast(res['msg']);
-                          },
             value: 'pause',
             height: 35,
             child: const Row(
@@ -213,116 +323,6 @@ class VideoContent extends StatelessWidget {
           ),
         ],
       ),
-                  ),
-              ],
-            ),
-            // Row(
-            //   children: [
-            //     const SizedBox(width: 1),
-            //     StatView(
-            //       theme: 'gray',
-            //       view: videoItem.stat.view,
-            //     ),
-            //     const SizedBox(width: 10),
-            //     StatDanMu(
-            //       theme: 'gray',
-            //       danmu: videoItem.stat.danmaku,
-            //     ),
-            //     const Spacer(),
-            //     SizedBox(
-            //       width: 24,
-            //       height: 24,
-            //       child: PopupMenuButton<String>(
-            //         padding: EdgeInsets.zero,
-            //         tooltip: '稍后再看',
-            //         icon: Icon(
-            //           Icons.more_vert_outlined,
-            //           color: Theme.of(context).colorScheme.outline,
-            //           size: 14,
-            //         ),
-            //         position: PopupMenuPosition.under,
-            //         // constraints: const BoxConstraints(maxHeight: 35),
-            //         onSelected: (String type) {},
-            //         itemBuilder: (BuildContext context) =>
-            //             <PopupMenuEntry<String>>[
-            //           PopupMenuItem<String>(
-            //             onTap: () async {
-            //               var res =
-            //                   await UserHttp.toViewLater(bvid: videoItem.bvid);
-            //               SmartDialog.showToast(res['msg']);
-            //             },
-            //             value: 'pause',
-            //             height: 35,
-            //             child: const Row(
-            //               children: [
-            //                 Icon(Icons.watch_later_outlined, size: 16),
-            //                 SizedBox(width: 6),
-            //                 Text('稍后再看', style: TextStyle(fontSize: 13))
-            //               ],
-            //             ),
-            //           ),
-            //         ],
-            //       ),
-            //     ),
-            //   ],
-            // ),
-          ],
-        ),
-      ),
-    );
-  }
-}
-
-class VideoStat extends StatelessWidget {
-  final int? view;
-  final int? danmaku;
-  final int? duration;
-
-  const VideoStat(
-      {Key? key,
-      required this.view,
-      required this.danmaku,
-      required this.duration})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return Container(
-      height: 48,
-      padding: const EdgeInsets.only(top: 22, left: 6, right: 6),
-      decoration: const BoxDecoration(
-        gradient: LinearGradient(
-          begin: Alignment.topCenter,
-          end: Alignment.bottomCenter,
-          colors: <Color>[
-            Colors.transparent,
-            Colors.black54,
-          ],
-          tileMode: TileMode.mirror,
-        ),
-      ),
-      child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceBetween,
-        children: [
-          Row(
-            children: [
-              StatView(
-                theme: 'white',
-                view: view,
-              ),
-              const SizedBox(width: 6),
-              StatDanMu(
-                theme: 'white',
-                danmu: danmaku,
-              ),
-            ],
-          ),
-          Text(
-            Utils.timeFormat(duration!),
-            style: const TextStyle(fontSize: 11, color: Colors.white),
-          )
-        ],
-      ),
     );
   }
 }

lib/pages/live/controller.dart

@@ -1,17 +1,27 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
+import 'package:hive/hive.dart';
 import 'package:pilipala/http/live.dart';
 import 'package:pilipala/models/live/item.dart';
+import 'package:pilipala/utils/storage.dart';
 
 class LiveController extends GetxController {
   final ScrollController scrollController = ScrollController();
   int count = 12;
   int _currentPage = 1;
-  int crossAxisCount = 2;
+  RxInt crossAxisCount = 2.obs;
   RxList<LiveItemModel> liveList = [LiveItemModel()].obs;
   bool isLoadingMore = false;
   bool flag = false;
   OverlayEntry? popupDialog;
+  Box setting = GStrorage.setting;
+
+  @override
+  void onInit() {
+    super.onInit();
+    crossAxisCount.value =
+        setting.get(SettingBoxKey.enableSingleRow, defaultValue: false) ? 1 : 2;
+  }
 
   // 获取推荐
   Future queryLiveList(type) async {

lib/pages/live/view.dart

@@ -129,14 +129,15 @@ class _LivePageState extends State<LivePage> {
   }
 
   Widget contentGrid(ctr, liveList) {
-    double maxWidth = Get.size.width;
+    // double maxWidth = Get.size.width;
-    int baseWidth = 500;
+    // int baseWidth = 500;
-    int step = 300;
+    // int step = 300;
-    int crossAxisCount =
+    // int crossAxisCount =
-        maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
+    //     maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
-    if (maxWidth < 300) {
+    // if (maxWidth < 300) {
-      crossAxisCount = 1;
+    //   crossAxisCount = 1;
-    }
+    // }
+    int crossAxisCount = ctr.crossAxisCount.value;
     return SliverGrid(
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         // 行间距
@@ -147,13 +148,15 @@ class _LivePageState extends State<LivePage> {
         crossAxisCount: crossAxisCount,
         mainAxisExtent:
             Get.size.width / crossAxisCount / StyleString.aspectRatio +
-                68 * MediaQuery.of(context).textScaleFactor,
+                (crossAxisCount == 1 ? 48 : 68) *
+                    MediaQuery.of(context).textScaleFactor,
       ),
       delegate: SliverChildBuilderDelegate(
         (BuildContext context, int index) {
           return liveList!.isNotEmpty
               ? LiveCardV(
                   liveItem: liveList[index],
+                  crossAxisCount: crossAxisCount,
                   longPress: () {
                     _liveController.popupDialog =
                         _createPopupDialog(liveList[index]);

lib/pages/live/widgets/live_item.dart

@@ -1,7 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/common/constants.dart';
-import 'package:pilipala/common/widgets/badge.dart';
 import 'package:pilipala/models/live/item.dart';
 import 'package:pilipala/utils/utils.dart';
 import 'package:pilipala/common/widgets/network_img_layer.dart';
@@ -9,12 +8,14 @@ import 'package:pilipala/common/widgets/network_img_layer.dart';
 // 视频卡片 - 垂直布局
 class LiveCardV extends StatelessWidget {
   final LiveItemModel liveItem;
+  final int crossAxisCount;
   final Function()? longPress;
   final Function()? longPressEnd;
 
   const LiveCardV({
     Key? key,
     required this.liveItem,
+    required this.crossAxisCount,
     this.longPress,
     this.longPressEnd,
   }) : super(key: key);
@@ -23,7 +24,7 @@ class LiveCardV extends StatelessWidget {
   Widget build(BuildContext context) {
     String heroTag = Utils.makeHeroTag(liveItem.roomId);
     return Card(
-      elevation: 1,
+      elevation: crossAxisCount == 1 ? 0 : 1,
       clipBehavior: Clip.hardEdge,
       margin: EdgeInsets.zero,
       child: GestureDetector(
@@ -45,12 +46,7 @@ class LiveCardV extends StatelessWidget {
           child: Column(
             children: [
               ClipRRect(
-                borderRadius: const BorderRadius.only(
+                borderRadius: const BorderRadius.all(StyleString.imgRadius),
-                  topLeft: StyleString.imgRadius,
-                  topRight: StyleString.imgRadius,
-                  bottomLeft: StyleString.imgRadius,
-                  bottomRight: StyleString.imgRadius,
-                ),
                 child: AspectRatio(
                   aspectRatio: StyleString.aspectRatio,
                   child: LayoutBuilder(builder: (context, boxConstraints) {
@@ -66,6 +62,7 @@ class LiveCardV extends StatelessWidget {
                             height: maxHeight,
                           ),
                         ),
+                        if (crossAxisCount != 1)
                           Positioned(
                             left: 0,
                             right: 0,
@@ -83,7 +80,7 @@ class LiveCardV extends StatelessWidget {
                   }),
                 ),
               ),
-              LiveContent(liveItem: liveItem)
+              LiveContent(liveItem: liveItem, crossAxisCount: crossAxisCount)
             ],
           ),
         ),
@@ -94,13 +91,18 @@ class LiveCardV extends StatelessWidget {
 
 class LiveContent extends StatelessWidget {
   final dynamic liveItem;
-  const LiveContent({Key? key, required this.liveItem}) : super(key: key);
+  final int crossAxisCount;
+  const LiveContent(
+      {Key? key, required this.liveItem, required this.crossAxisCount})
+      : super(key: key);
   @override
   Widget build(BuildContext context) {
     return Expanded(
+      flex: crossAxisCount == 1 ? 0 : 1,
       child: Padding(
-        // 多列
+        padding: crossAxisCount == 1
-        padding: const EdgeInsets.fromLTRB(9, 9, 9, 8),
+            ? const EdgeInsets.fromLTRB(9, 9, 9, 4)
+            : const EdgeInsets.fromLTRB(9, 8, 9, 8),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
@@ -112,29 +114,40 @@ class LiveContent extends StatelessWidget {
                 fontWeight: FontWeight.w500,
                 letterSpacing: 0.3,
               ),
-              maxLines: 2,
+              maxLines: crossAxisCount == 1 ? 1 : 2,
               overflow: TextOverflow.ellipsis,
             ),
+            if (crossAxisCount == 1) const SizedBox(height: 4),
             Row(
               children: [
-                const PBadge(
+                Text(
-                  text: 'UP',
-                  size: 'small',
-                  stack: 'normal',
-                  fs: 9,
-                ),
-                Expanded(
-                  child: Text(
                   liveItem.uname,
                   textAlign: TextAlign.start,
                   style: TextStyle(
-                      fontSize:
+                    fontSize: Theme.of(context).textTheme.labelMedium!.fontSize,
-                          Theme.of(context).textTheme.labelMedium!.fontSize,
+                    color: Theme.of(context).colorScheme.outline,
                   ),
                   maxLines: 1,
                   overflow: TextOverflow.ellipsis,
                 ),
-                )
+                if (crossAxisCount == 1) ...[
+                  Text(
+                    ' • ${liveItem!.areaName!}',
+                    style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.labelMedium!.fontSize,
+                      color: Theme.of(context).colorScheme.outline,
+                    ),
+                  ),
+                  Text(
+                    ' • ${liveItem!.watchedShow!['text_small']}人观看',
+                    style: TextStyle(
+                      fontSize:
+                          Theme.of(context).textTheme.labelMedium!.fontSize,
+                      color: Theme.of(context).colorScheme.outline,
+                    ),
+                  ),
+                ]
               ],
             ),
           ],

lib/pages/rcmd/controller.dart

@@ -12,10 +12,14 @@ class RcmdController extends GetxController {
   bool isLoadingMore = true;
   OverlayEntry? popupDialog;
   Box recVideo = GStrorage.recVideo;
+  Box setting = GStrorage.setting;
+  RxInt crossAxisCount = 2.obs;
 
   @override
   void onInit() {
     super.onInit();
+    crossAxisCount.value =
+        setting.get(SettingBoxKey.enableSingleRow, defaultValue: false) ? 1 : 2;
     if (recVideo.get('cacheList') != null &&
         recVideo.get('cacheList').isNotEmpty) {
       List<RecVideoItemAppModel> list = [];

lib/pages/rcmd/view.dart

@@ -142,31 +142,34 @@ class _RcmdPageState extends State<RcmdPage>
   }
 
   Widget contentGrid(ctr, videoList) {
-    double maxWidth = Get.size.width;
+    // double maxWidth = Get.size.width;
-    int baseWidth = 500;
+    // int baseWidth = 500;
-    int step = 300;
+    // int step = 300;
-    int crossAxisCount =
+    // int crossAxisCount =
-        maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
+    //     maxWidth > baseWidth ? 2 + ((maxWidth - baseWidth) / step).ceil() : 2;
-    if (maxWidth < 300) {
+    // if (maxWidth < 300) {
-      crossAxisCount = 1;
+    //   crossAxisCount = 1;
-    }
+    // }
+    int crossAxisCount = ctr.crossAxisCount.value;
+    double mainAxisExtent =
+        (Get.size.width / crossAxisCount / StyleString.aspectRatio) +
+            68 * MediaQuery.of(context).textScaleFactor;
     return SliverGrid(
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         // 行间距
-        mainAxisSpacing: StyleString.cardSpace + 4,
+        mainAxisSpacing: StyleString.safeSpace,
         // 列间距
-        crossAxisSpacing: StyleString.cardSpace + 4,
+        crossAxisSpacing: StyleString.safeSpace,
         // 列数
         crossAxisCount: crossAxisCount,
-        mainAxisExtent:
+        mainAxisExtent: mainAxisExtent,
-            (Get.size.width / crossAxisCount / StyleString.aspectRatio) +
-                68 * MediaQuery.of(context).textScaleFactor,
       ),
       delegate: SliverChildBuilderDelegate(
         (BuildContext context, int index) {
           return videoList!.isNotEmpty
               ? VideoCardV(
                   videoItem: videoList[index],
+                  crossAxisCount: crossAxisCount,
                   longPress: () {
                     _rcmdController.popupDialog =
                         _createPopupDialog(videoList[index]);

lib/pages/setting/style_setting.dart

@@ -1,6 +1,7 @@
 import 'dart:io';
 
 import 'package:flutter/material.dart';
+import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/models/common/theme_type.dart';
@@ -75,6 +76,13 @@ class _StyleSettingState extends State<StyleSetting> {
             setKey: SettingBoxKey.iosTransition,
             defaultVal: false,
           ),
+          SetSwitchItem(
+            title: '首页单列',
+            subTitle: '每行展示一个内容卡片',
+            setKey: SettingBoxKey.enableSingleRow,
+            defaultVal: false,
+            callFn: (val) => {SmartDialog.showToast('下次启动时生效')},
+          ),
           ListTile(
             dense: false,
             onTap: () {

lib/pages/setting/widgets/switch_item.dart

@@ -8,12 +8,14 @@ class SetSwitchItem extends StatefulWidget {
   final String? subTitle;
   final String? setKey;
   final bool? defaultVal;
+  final Function? callFn;
 
   const SetSwitchItem({
     this.title,
     this.subTitle,
     this.setKey,
     this.defaultVal,
+    this.callFn,
     Key? key,
   }) : super(key: key);
 
@@ -32,12 +34,15 @@ class _SetSwitchItemState extends State<SetSwitchItem> {
     val = Setting.get(widget.setKey, defaultValue: widget.defaultVal ?? false);
   }
 
-  void switchChange(value) {
+  void switchChange(value) async {
     val = value ?? !val;
-    Setting.put(widget.setKey, val);
+    await Setting.put(widget.setKey, val);
     if (widget.setKey == SettingBoxKey.autoUpdate && value == true) {
       Utils.checkUpdata();
     }
+    if (widget.callFn != null) {
+      widget.callFn!.call(val);
+    }
     setState(() {});
   }
 

lib/utils/storage.dart

@@ -112,6 +112,7 @@ class SettingBoxKey {
   static const String dynamicColor = 'dynamicColor'; // bool
   static const String customColor = 'customColor'; // 自定义主题色
   static const String iosTransition = 'iosTransition'; // ios路由
+  static const String enableSingleRow = 'enableSingleRow'; // 首页单列
 }
 
 class LocalCacheKey {