mod: use DraggableScrollableSheet

2024-10-20 12:38:32 +08:00
parent 8292f0e15a
commit b683ce2791
7 changed files with 89 additions and 74 deletions
--- a/lib/pages/follow/widgets/follow_item.dart
+++ b/lib/pages/follow/widgets/follow_item.dart
@ -1,4 +1,3 @@
-import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter/material.dart';
 import 'package:get/get.dart';
 import 'package:pilipala/common/widgets/network_img_layer.dart';
@ -48,24 +47,27 @@ class FollowItem extends StatelessWidget {
              height: 34,
              child: TextButton(
                onPressed: () async {
-                  await showFlexibleBottomSheet(
-                    bottomSheetBorderRadius: const BorderRadius.only(
-                      topLeft: Radius.circular(16),
-                      topRight: Radius.circular(16),
-                    ),
-                    minHeight: 1,
-                    initHeight: 1,
-                    maxHeight: 1,
-                    context: Get.context!,
-                    builder: (BuildContext context,
-                        ScrollController scrollController, double offset) {
-                      return GroupPanel(
-                        mid: item.mid!,
-                        scrollController: scrollController,
+                  await showModalBottomSheet(
+                    context: context,
+                    useSafeArea: true,
+                    isScrollControlled: true,
+                    builder: (BuildContext context) {
+                      return DraggableScrollableSheet(
+                        initialChildSize: 0.6,
+                        minChildSize: 0,
+                        maxChildSize: 1,
+                        snap: true,
+                        expand: false,
+                        snapSizes: const [0.6],
+                        builder: (BuildContext context,
+                            ScrollController scrollController) {
+                          return GroupPanel(
+                            mid: item.mid!,
+                            scrollController: scrollController,
+                          );
+                        },
                      );
                    },
-                    anchors: [1],
-                    isSafeArea: true,
                  );
                },
                style: TextButton.styleFrom(
--- a/lib/pages/video/detail/introduction/controller.dart
+++ b/lib/pages/video/detail/introduction/controller.dart
@ -1,6 +1,6 @@
 import 'dart:async';

-import 'package:bottom_sheet/bottom_sheet.dart';
+// import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
 import 'package:get/get.dart';
@ -531,25 +531,31 @@ class VideoIntroController extends GetxController {
  }

  // 设置关注分组
-  void setFollowGroup() {
-    showFlexibleBottomSheet(
-      bottomSheetBorderRadius: const BorderRadius.only(
-        topLeft: Radius.circular(16),
-        topRight: Radius.circular(16),
-      ),
-      minHeight: 0.6,
-      initHeight: 0.6,
-      maxHeight: 1,
+  void setFollowGroup() async {
+    final mediaQueryData = MediaQuery.of(Get.context!);
+    final contentHeight = mediaQueryData.size.height - kToolbarHeight;
+    final double initialChildSize =
+        (contentHeight - Get.width * 9 / 16) / contentHeight;
+    await showModalBottomSheet(
      context: Get.context!,
-      builder: (BuildContext context, ScrollController scrollController,
-          double offset) {
-        return GroupPanel(
-          mid: videoDetail.value.owner!.mid!,
-          scrollController: scrollController,
+      useSafeArea: true,
+      isScrollControlled: true,
+      builder: (BuildContext context) {
+        return DraggableScrollableSheet(
+          initialChildSize: initialChildSize,
+          minChildSize: 0,
+          maxChildSize: 1,
+          snap: true,
+          expand: false,
+          snapSizes: [initialChildSize],
+          builder: (BuildContext context, ScrollController scrollController) {
+            return GroupPanel(
+              mid: videoDetail.value.owner!.mid!,
+              scrollController: scrollController,
+            );
+          },
        );
      },
-      anchors: [0.6, 1],
-      isSafeArea: true,
    );
  }

--- a/lib/pages/video/detail/introduction/view.dart
+++ b/lib/pages/video/detail/introduction/view.dart
@ -1,4 +1,4 @@
-import 'package:bottom_sheet/bottom_sheet.dart';
+// import 'package:bottom_sheet/bottom_sheet.dart';
 import 'package:expandable/expandable.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
@ -199,25 +199,35 @@ class _VideoInfoState extends State<VideoInfo> with TickerProviderStateMixin {
    }
  }

-  void _showFavPanel() {
-    showFlexibleBottomSheet(
-      bottomSheetBorderRadius: const BorderRadius.only(
-        topLeft: Radius.circular(16),
-        topRight: Radius.circular(16),
+  void _showFavPanel() async {
+    final mediaQueryData = MediaQuery.of(context);
+    final contentHeight = mediaQueryData.size.height - kToolbarHeight;
+    final double initialChildSize =
+        (contentHeight - Get.width * 9 / 16) / contentHeight;
+    await showModalBottomSheet(
+      context: Get.context!,
+      useSafeArea: true,
+      isScrollControlled: true,
+      transitionAnimationController: AnimationController(
+        duration: const Duration(milliseconds: 200),
+        vsync: this,
      ),
-      minHeight: 0.6,
-      initHeight: 0.6,
-      maxHeight: 1,
-      context: context,
-      builder: (BuildContext context, ScrollController scrollController,
-          double offset) {
-        return FavPanel(
-          ctr: videoIntroController,
-          scrollController: scrollController,
+      builder: (BuildContext context) {
+        return DraggableScrollableSheet(
+          initialChildSize: initialChildSize,
+          minChildSize: 0,
+          maxChildSize: 1,
+          snap: true,
+          expand: false,
+          snapSizes: [initialChildSize],
+          builder: (BuildContext context, ScrollController scrollController) {
+            return FavPanel(
+              ctr: videoIntroController,
+              scrollController: scrollController,
+            );
+          },
        );
      },
-      anchors: [0.6, 1],
-      isSafeArea: true,
    );
  }

--- a/lib/pages/video/detail/introduction/widgets/fav_panel.dart
+++ b/lib/pages/video/detail/introduction/widgets/fav_panel.dart
@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:get/get.dart';
 import 'package:hive/hive.dart';
 import 'package:pilipala/common/widgets/http_error.dart';
@ -32,8 +31,14 @@ class _FavPanelState extends State<FavPanel> {
        AppBar(
          centerTitle: false,
          elevation: 0,
-          automaticallyImplyLeading: false,
-          leadingWidth: 0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.vertical(
+              top: Radius.circular(20),
+            ),
+          ),
+          leading: IconButton(
+              onPressed: () => Get.back(),
+              icon: const Icon(Icons.close_outlined)),
          title: Text(
            '选择收藏夹',
            style: Theme.of(context)
@ -92,7 +97,7 @@ class _FavPanelState extends State<FavPanel> {
                  }
                } else {
                  // 骨架屏
-                  return const Text('请求中');
+                  return const Center(child: Text('请求中'));
                }
              },
            ),
--- a/lib/pages/video/detail/introduction/widgets/group_panel.dart
+++ b/lib/pages/video/detail/introduction/widgets/group_panel.dart
@ -59,10 +59,19 @@ class _GroupPanelState extends State<GroupPanel> {
        AppBar(
          centerTitle: false,
          elevation: 0,
+          shape: const RoundedRectangleBorder(
+            borderRadius: BorderRadius.vertical(
+              top: Radius.circular(20),
+            ),
+          ),
          leading: IconButton(
              onPressed: () => Get.back(),
              icon: const Icon(Icons.close_outlined)),
-          title: Text('设置关注分组', style: Theme.of(context).textTheme.titleMedium),
+          title: Text('设置关注分组',
+              style: Theme.of(context)
+                  .textTheme
+                  .titleMedium!
+                  .copyWith(fontWeight: FontWeight.bold)),
        ),
        Expanded(
          child: Material(
@ -115,7 +124,7 @@ class _GroupPanelState extends State<GroupPanel> {
                  }
                } else {
                  // 骨架屏
-                  return const Text('请求中');
+                  return const Center(child: Text('请求中'));
                }
              },
            ),
--- a/pubspec.lock
+++ b/pubspec.lock
@ -113,22 +113,6 @@ packages:
      url: "https://pub.flutter-io.cn"
    source: hosted
    version: "2.1.1"
-  bottom_inset_observer:
-    dependency: transitive
-    description:
-      name: bottom_inset_observer
-      sha256: cbfb01e0e07cc4922052701786d5e607765a6f54e1844f41061abf8744519a7d
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "3.1.0"
-  bottom_sheet:
-    dependency: "direct main"
-    description:
-      name: bottom_sheet
-      sha256: efd28f52357d23e1c01eaeb45466b407f1e29318305bd6d10baf814fda18bd7e
-      url: "https://pub.flutter-io.cn"
-    source: hosted
-    version: "4.0.4"
  brotli:
    dependency: "direct main"
    description:
--- a/pubspec.yaml
+++ b/pubspec.yaml
@ -146,7 +146,6 @@ dependencies:
  lottie: ^3.1.2
  # 二维码
  qr_flutter: ^4.1.0
-  bottom_sheet: ^4.0.4
  web_socket_channel: ^2.4.5
  brotli: ^0.6.0
  # 文本语法高亮