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,118 +30,142 @@ class _FavPanelState extends State<FavPanel> {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return NotificationListener<DraggableScrollableNotification>(
-      height: Utils.getSheetHeight(context),
+      onNotification: (notification) {
-      color: Theme.of(context).colorScheme.surface,
+        if (notification.extent <= 1e-5) {
-      child: Column(
+          Get.back();
-        children: [
+        }
-          AppBar(
+        return false;
-            centerTitle: false,
+      },
-            elevation: 0,
+      child: Container(
-            leading: IconButton(
+        decoration: BoxDecoration(
-                tooltip: '关闭',
+          borderRadius: BorderRadius.circular(18),
-                onPressed: () => Get.back(),
+          color: Theme.of(context).colorScheme.surface,
-                icon: const Icon(Icons.close_outlined)),
+        ),
-            title:
+        child: Column(
-                Text('添加到收藏夹', style: Theme.of(context).textTheme.titleMedium),
+          children: [
-          ),
+            AppBar(
-          Expanded(
+              shape: const RoundedRectangleBorder(
-            child: Material(
+                borderRadius: BorderRadius.vertical(
-              child: FutureBuilder(
+                  top: Radius.circular(18),
-                future: _futureBuilderFuture,
+                ),
-                builder: (BuildContext context, AsyncSnapshot snapshot) {
+              ),
-                  if (snapshot.connectionState == ConnectionState.done) {
+              centerTitle: false,
-                    Map data = snapshot.data as Map;
+              elevation: 0,
-                    if (data['status']) {
+              leading: IconButton(
-                      return Obx(
+                  tooltip: '关闭',
-                        () => ListView.builder(
+                  onPressed: () => Get.back(),
-                          itemCount:
+                  icon: const Icon(Icons.close_outlined)),
-                              widget.ctr!.favFolderData.value.list!.length,
+              title: Text('添加到收藏夹',
-                          itemBuilder: (context, index) {
+                  style: Theme.of(context).textTheme.titleMedium),
-                            return ListTile(
+            ),
-                              onTap: () => widget.ctr!.onChoose(
+            Expanded(
-                                  widget.ctr!.favFolderData.value.list![index]
+              child: Material(
-                                          .favState !=
+                child: FutureBuilder(
-                                      1,
+                  future: _futureBuilderFuture,
-                                  index),
+                  builder: (BuildContext context, AsyncSnapshot snapshot) {
-                              dense: true,
+                    if (snapshot.connectionState == ConnectionState.done) {
-                              leading: const Icon(Icons.folder_outlined),
+                      Map data = snapshot.data as Map;
-                              minLeadingWidth: 0,
+                      if (data['status']) {
-                              title: Text(widget.ctr!.favFolderData.value
+                        return Obx(
-                                  .list![index].title!),
+                          () => ListView.builder(
-                              subtitle: Text(
+                            controller: widget.scrollController,
-                                '${widget.ctr!.favFolderData.value.list![index].mediaCount}个内容',
+                            itemCount:
-                              ),
+                                widget.ctr!.favFolderData.value.list!.length,
-                              trailing: Transform.scale(
+                            itemBuilder: (context, index) {
-                                scale: 0.9,
+                              return ListTile(
-                                child: Checkbox(
+                                onTap: () => widget.ctr!.onChoose(
-                                  value: widget.ctr!.favFolderData.value
+                                    widget.ctr!.favFolderData.value.list![index]
-                                          .list![index].favState ==
+                                            .favState !=
-                                      1,
+                                        1,
-                                  onChanged: (bool? checkValue) =>
+                                    index),
-                                      widget.ctr!.onChoose(checkValue!, index),
+                                dense: true,
+                                leading: const Icon(Icons.folder_outlined),
+                                minLeadingWidth: 0,
+                                title: Text(widget.ctr!.favFolderData.value
+                                    .list![index].title!),
+                                subtitle: Text(
+                                  '${widget.ctr!.favFolderData.value.list![index].mediaCount}个内容',
                                 ),
-                              ),
+                                trailing: Transform.scale(
-                            );
+                                  scale: 0.9,
-                          },
+                                  child: Checkbox(
-                        ),
+                                    value: widget.ctr!.favFolderData.value
-                      );
+                                            .list![index].favState ==
+                                        1,
+                                    onChanged: (bool? checkValue) => widget.ctr!
+                                        .onChoose(checkValue!, index),
+                                  ),
+                                ),
+                              );
+                            },
+                          ),
+                        );
+                      } else {
+                        return HttpError(
+                          errMsg: data['msg'],
+                          fn: () => setState(() {}),
+                        );
+                      }
                     } else {
-                      return HttpError(
+                      // 骨架屏
-                        errMsg: data['msg'],
+                      return const Text('请求中');
-                        fn: () => setState(() {}),
-                      );
                     }
-                  } else {
+                  },
-                    // 骨架屏
+                ),
-                    return const Text('请求中');
-                  }
-                },
               ),
             ),
-          ),
+            Divider(
-          Divider(
+              height: 1,
-            height: 1,
+              color: Theme.of(context).disabledColor.withOpacity(0.08),
-            color: Theme.of(context).disabledColor.withOpacity(0.08),
-          ),
-          Padding(
-            padding: EdgeInsets.only(
-              left: 20,
-              right: 20,
-              top: 12,
-              bottom: MediaQuery.of(context).padding.bottom + 12,
             ),
-            child: Row(
+            Padding(
-              mainAxisAlignment: MainAxisAlignment.end,
+              padding: EdgeInsets.only(
-              children: <Widget>[
+                left: 20,
-                TextButton(
+                right: 20,
-                  onPressed: () => Get.back(),
+                top: 12,
-                  style: TextButton.styleFrom(
+                bottom: MediaQuery.of(context).padding.bottom + 12,
-                    padding: const EdgeInsets.only(left: 30, right: 30),
+              ),
-                    backgroundColor: Theme.of(context)
+              child: Row(
-                        .colorScheme
+                mainAxisAlignment: MainAxisAlignment.end,
-                        .onInverseSurface, // 设置按钮背景色
+                children: <Widget>[
+                  TextButton(
+                    onPressed: () => Get.back(),
+                    style: TextButton.styleFrom(
+                      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('取消'),
                   ),
-                  child: const Text('取消'),
+                  const SizedBox(width: 25),
-                ),
+                  FilledButton.tonal(
-                const SizedBox(width: 10),
+                    onPressed: () async {
-                TextButton(
+                      feedBack();
-                  onPressed: () async {
+                      await widget.ctr!.actionFavVideo();
-                    feedBack();
+                    },
-                    await widget.ctr!.actionFavVideo();
+                    style: FilledButton.styleFrom(
-                  },
+                      padding: const EdgeInsets.symmetric(
-                  style: TextButton.styleFrom(
+                          horizontal: 20, vertical: 10),
-                    padding: const EdgeInsets.only(left: 30, right: 30),
+                      visualDensity: const VisualDensity(
-                    foregroundColor: Theme.of(context).colorScheme.onPrimary,
+                        horizontal: -1,
-                    backgroundColor:
+                        vertical: -2,
-                        Theme.of(context).colorScheme.primary, // 设置按钮背景色
+                      ),
+                    ),
+                    child: const Text('完成'),
                   ),
-                  child: const Text('完成'),
+                ],
-                ),
+              ),
-              ],
             ),
-          ),
+          ],
-        ],
+        ),
       ),
     );
   }