首页 > 解决方案 > 颤振 - 为拖动 showModalBottomSheet 设置捕捉

问题描述

我想在颤振中使用模态底页。但我不能拖动它。

 showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    isDismissible: true,
    enableDrag: true,
    shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.vertical(top: 
    Radius.circular(20),), ),
    clipBehavior: Clip.antiAliasWithSaveLayer,
     builder: (context) {
        return StreamBuilder(
        stream: controller.stream,
        builder: (context, snapshot) =>
GestureDetector( behavior: HitTestBehavior.translucent,
 child: Container(
  height: snapshot.hasData
     ? snapshot.data as double
     : pageWidth * .9,
     child: PlayerCardDialog(
 epdId: episodes[index['Ep_ID'])), ),); });

谁能帮帮我?如何拖动底部工作表以及如何在四个位置([0.3、0.6、0.9、1.0])为其设置捕捉。

像这样 :

在此处输入图像描述

标签: flutterdartdraggablebottom-sheetflutter-showmodalbottomsheet

解决方案


您可以使用DraggableScrollableSheet。使用snapandsnapSizes进行捕捉。

但是,我认为捕捉是在 Flutter 的通道中添加master的,所以如果你找不到它,你可能需要切换到master.

或者您可以查看snapping_sheet包。

编辑:示例showModalBottomsheet()

void showBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (context) {
      return DraggableScrollableSheet(
        snap: true
        // snapSizes: TODO
        expand: false,
        builder: (context, scrollController) {
          return StreamBuilder(
            stream: Stream.empty(),
            builder: (context, snapshot) => GestureDetector(
              behavior: HitTestBehavior.translucent,
              child: Container(
                height: snapshot.hasData ? snapshot.data as double : 500 * .9,
                child: Text('Test'),
              ),
            ),
          );
        },
      );
    },
  );
}

推荐阅读