From b683ce2791b04da42a8112fbfe0ec069335f9fec Mon Sep 17 00:00:00 2001 From: guozhigq Date: Sun, 20 Oct 2024 12:38:32 +0800 Subject: [PATCH] mod: use DraggableScrollableSheet --- lib/pages/follow/widgets/follow_item.dart | 36 ++++++++------- .../video/detail/introduction/controller.dart | 40 ++++++++++------- lib/pages/video/detail/introduction/view.dart | 44 ++++++++++++------- .../introduction/widgets/fav_panel.dart | 13 ++++-- .../introduction/widgets/group_panel.dart | 13 +++++- pubspec.lock | 16 ------- pubspec.yaml | 1 - 7 files changed, 89 insertions(+), 74 deletions(-) diff --git a/lib/pages/follow/widgets/follow_item.dart b/lib/pages/follow/widgets/follow_item.dart index 6ee93a98..f26cec06 100644 --- 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( diff --git a/lib/pages/video/detail/introduction/controller.dart b/lib/pages/video/detail/introduction/controller.dart index bc9af109..0285225a 100644 --- 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, ); } diff --git a/lib/pages/video/detail/introduction/view.dart b/lib/pages/video/detail/introduction/view.dart index cddaf579..81d0c3f0 100644 --- 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 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, ); } diff --git a/lib/pages/video/detail/introduction/widgets/fav_panel.dart b/lib/pages/video/detail/introduction/widgets/fav_panel.dart index 2cf7d236..ae72bef9 100644 --- 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 { 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 { } } else { // 骨架屏 - return const Text('请求中'); + return const Center(child: Text('请求中')); } }, ), diff --git a/lib/pages/video/detail/introduction/widgets/group_panel.dart b/lib/pages/video/detail/introduction/widgets/group_panel.dart index c007d52d..bafebf50 100644 --- 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 { 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 { } } else { // 骨架屏 - return const Text('请求中'); + return const Center(child: Text('请求中')); } }, ), diff --git a/pubspec.lock b/pubspec.lock index b9d48c78..d9c6a1dd 100644 --- 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: diff --git a/pubspec.yaml b/pubspec.yaml index ac04a1b0..c87c75fc 100644 --- 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 # 文本语法高亮