颤振 - 为拖动 showModalBottomSheet 设置捕捉

Posted 2023-03-17

【中文标题】颤振 - 为拖动 showModalBottomSheet 设置捕捉

【英文标题】：flutter - set snappings for drag showModalBottomSheet

【发布时间】：2021-12-10 08:29:58

【问题描述】：

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

 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]）为其设置捕捉。

像这样：

【参考方案1】：

您可以使用DraggableScrollableSheet。 使用snap 和snapSizes 进行捕捉。

不过，我认为捕捉是在 Flutter 的 master 频道中的 added，所以如果你找不到它，你可能需要 switch to 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'),
              ),
            ),
          );
        ,
      );
    ,
  );

【讨论】：

不能用 showModalBottomsheet 做吗？因为我需要height: snapshot.hasData ? snapshot.data as double : pageWidth * .9 这部分动态高度。

@stysh 这是一个小部件，showModalBottomsheet() 需要一个小部件，所以是的，你可以。只需在其构建器中返回GestureDetector。

其实我用过。你能帮帮我吗？我不明白你的想法。

它不起作用 :( 并且snap: true // snapSizes: TODO 有错误