opt: fav panel: use DraggableScrollableSheet

lib/pages/bangumi/introduction/view.dart

@@ -117,7 +117,8 @@ class BangumiInfo extends StatefulWidget {
   State<BangumiInfo> createState() => _BangumiInfoState();
 }
 
-class _BangumiInfoState extends State<BangumiInfo> {
+class _BangumiInfoState extends State<BangumiInfo>
+    with SingleTickerProviderStateMixin {
   String heroTag = Get.arguments['heroTag'];
   late final BangumiIntroController bangumiIntroController;
   late final VideoDetailController videoDetailCtr;
@@ -157,10 +158,28 @@ class _BangumiInfoState extends State<BangumiInfo> {
     }
     showModalBottomSheet(
       context: context,
-      useRootNavigator: true,
+      useSafeArea: true,
       isScrollControlled: true,
+      transitionAnimationController: AnimationController(
+        duration: const Duration(milliseconds: 200),
+        vsync: this,
+      ),
+      sheetAnimationStyle: AnimationStyle(curve: Curves.ease),
       builder: (BuildContext context) {
-        return FavPanel(ctr: bangumiIntroController);
+        return DraggableScrollableSheet(
+          minChildSize: 0,
+          maxChildSize: 1,
+          initialChildSize: 0.6,
+          snap: true,
+          expand: false,
+          snapSizes: const [0.6],
+          builder: (BuildContext context, ScrollController scrollController) {
+            return FavPanel(
+              ctr: bangumiIntroController,
+              scrollController: scrollController,
+            );
+          },
+        );
       },
     );
   }

lib/pages/dynamics/widgets/action_panel.dart

@@ -216,7 +216,7 @@ class _RepostPanelState extends State<RepostPanel> {
             ?.url;
     return AnimatedSize(
       alignment: Alignment.topCenter,
-      curve: Curves.linearToEaseOut,
+      curve: Curves.ease,
       duration: const Duration(milliseconds: 300),
       child: Column(
         mainAxisSize: _isMax ? MainAxisSize.max : MainAxisSize.min,
@@ -345,7 +345,10 @@ class _RepostPanelState extends State<RepostPanel> {
             padding: const EdgeInsets.all(10),
             margin: const EdgeInsets.symmetric(horizontal: 16),
             decoration: BoxDecoration(
-              color: Theme.of(context).colorScheme.onInverseSurface,
+              color: Theme.of(context).colorScheme.surfaceContainerHigh ==
+                      Theme.of(context).colorScheme.surface
+                  ? Theme.of(context).colorScheme.onInverseSurface
+                  : Theme.of(context).colorScheme.surfaceContainerHighest,
               borderRadius: BorderRadius.circular(12),
             ),
             child: Row(

lib/pages/video/detail/introduction/view.dart

@@ -42,7 +42,7 @@ class VideoIntroPanel extends StatefulWidget {
 }
 
 class _VideoIntroPanelState extends State<VideoIntroPanel>
-    with AutomaticKeepAliveClientMixin {
+    with AutomaticKeepAliveClientMixin, SingleTickerProviderStateMixin {
   late String heroTag;
   late VideoIntroController videoIntroController;
   VideoDetailData? videoDetail;
@@ -164,6 +164,33 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
     enableAi = setting.get(SettingBoxKey.enableAi, defaultValue: true);
   }
 
+  void _showFavBottomSheet() => showModalBottomSheet(
+        context: context,
+        useSafeArea: true,
+        isScrollControlled: true,
+        transitionAnimationController: AnimationController(
+          duration: const Duration(milliseconds: 200),
+          vsync: this,
+        ),
+        sheetAnimationStyle: AnimationStyle(curve: Curves.ease),
+        builder: (BuildContext context) {
+          return DraggableScrollableSheet(
+            minChildSize: 0,
+            maxChildSize: 1,
+            initialChildSize: 0.6,
+            snap: true,
+            expand: false,
+            snapSizes: const [0.6],
+            builder: (BuildContext context, ScrollController scrollController) {
+              return FavPanel(
+                ctr: videoIntroController,
+                scrollController: scrollController,
+              );
+            },
+          );
+        },
+      );
+
   // 收藏
   showFavBottomSheet({type = 'tap'}) {
     if (videoIntroController.userInfo == null) {
@@ -179,24 +206,10 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
       if (type == 'tap') {
         videoIntroController.actionFavVideo(type: 'default');
       } else {
-        showModalBottomSheet(
+        _showFavBottomSheet();
-          context: context,
-          useRootNavigator: true,
-          isScrollControlled: true,
-          builder: (BuildContext context) {
-            return FavPanel(ctr: videoIntroController);
-          },
-        );
       }
     } else if (type != 'longPress') {
-      showModalBottomSheet(
+      _showFavBottomSheet();
-        context: context,
-        useRootNavigator: true,
-        isScrollControlled: true,
-        builder: (BuildContext context) {
-          return FavPanel(ctr: videoIntroController);
-        },
-      );
     }
   }
 

lib/pages/video/detail/introduction/widgets/fav_panel.dart

@@ -6,8 +6,14 @@ import 'package:PiliPalaX/utils/feed_back.dart';
 import '../../../../../utils/utils.dart';
 
 class FavPanel extends StatefulWidget {
-  const FavPanel({super.key, this.ctr});
+  const FavPanel({
+    super.key,
+    this.ctr,
+    this.scrollController,
+  });
+
   final dynamic ctr;
+  final ScrollController? scrollController;
 
   @override
   State<FavPanel> createState() => _FavPanelState();
@@ -24,20 +30,34 @@ class _FavPanelState extends State<FavPanel> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return NotificationListener<DraggableScrollableNotification>(
-      height: Utils.getSheetHeight(context),
+      onNotification: (notification) {
+        if (notification.extent <= 1e-5) {
+          Get.back();
+        }
+        return false;
+      },
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(18),
           color: Theme.of(context).colorScheme.surface,
+        ),
         child: Column(
           children: [
             AppBar(
+              shape: const RoundedRectangleBorder(
+                borderRadius: BorderRadius.vertical(
+                  top: Radius.circular(18),
+                ),
+              ),
               centerTitle: false,
               elevation: 0,
               leading: IconButton(
                   tooltip: '关闭',
                   onPressed: () => Get.back(),
                   icon: const Icon(Icons.close_outlined)),
-            title:
+              title: Text('添加到收藏夹',
-                Text('添加到收藏夹', style: Theme.of(context).textTheme.titleMedium),
+                  style: Theme.of(context).textTheme.titleMedium),
             ),
             Expanded(
               child: Material(
@@ -49,6 +69,7 @@ class _FavPanelState extends State<FavPanel> {
                       if (data['status']) {
                         return Obx(
                           () => ListView.builder(
+                            controller: widget.scrollController,
                             itemCount:
                                 widget.ctr!.favFolderData.value.list!.length,
                             itemBuilder: (context, index) {
@@ -72,8 +93,8 @@ class _FavPanelState extends State<FavPanel> {
                                     value: widget.ctr!.favFolderData.value
                                             .list![index].favState ==
                                         1,
-                                  onChanged: (bool? checkValue) =>
+                                    onChanged: (bool? checkValue) => widget.ctr!
-                                      widget.ctr!.onChoose(checkValue!, index),
+                                        .onChoose(checkValue!, index),
                                   ),
                                 ),
                               );
@@ -111,24 +132,32 @@ class _FavPanelState extends State<FavPanel> {
                   TextButton(
                     onPressed: () => Get.back(),
                     style: TextButton.styleFrom(
-                    padding: const EdgeInsets.only(left: 30, right: 30),
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 20, vertical: 10),
+                      visualDensity: const VisualDensity(
+                        horizontal: -1,
+                        vertical: -2,
+                      ),
+                      foregroundColor: Theme.of(context).colorScheme.outline,
                       backgroundColor: Theme.of(context)
                           .colorScheme
                           .onInverseSurface, // 设置按钮背景色
                     ),
                     child: const Text('取消'),
                   ),
-                const SizedBox(width: 10),
+                  const SizedBox(width: 25),
-                TextButton(
+                  FilledButton.tonal(
                     onPressed: () async {
                       feedBack();
                       await widget.ctr!.actionFavVideo();
                     },
-                  style: TextButton.styleFrom(
+                    style: FilledButton.styleFrom(
-                    padding: const EdgeInsets.only(left: 30, right: 30),
+                      padding: const EdgeInsets.symmetric(
-                    foregroundColor: Theme.of(context).colorScheme.onPrimary,
+                          horizontal: 20, vertical: 10),
-                    backgroundColor:
+                      visualDensity: const VisualDensity(
-                        Theme.of(context).colorScheme.primary, // 设置按钮背景色
+                        horizontal: -1,
+                        vertical: -2,
+                      ),
                     ),
                     child: const Text('完成'),
                   ),
@@ -137,6 +166,7 @@ class _FavPanelState extends State<FavPanel> {
             ),
           ],
         ),
+      ),
     );
   }
 }