Question

如何禁用/逃脱底部模态中的向下手势，以便用户可以在模态中进行交互而不会意外关闭模态？

下面以实际的模态底部工作表进行了更新。

return showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
        ...
    }
}

Answer 1

您可以尝试使用带有onVerticalDragStart =（_）{}的GestureDetector包装生成器的结果

showModalBottomSheet(
  context: context,
  builder: (context) => GestureDetector(
    child: **any_widget_here**,
    onVerticalDragStart: (_) {},
  ),
  isDismissible: false,
  isScrollControlled: true,
);

Answer 2

将enableDrag设置为false

bool enableDrag

如果为true，则可以上下拖动底页并通过向下滑动来消除它。

https://docs.flutter.io/flutter/material/BottomSheet/enableDrag.html

Answer 3

如果您仍然希望在没有用户拖动和关闭它的情况下在模态内滚动，您可以使用：

                  showModalBottomSheet(
                    context: context,
                    enableDrag: false,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.vertical(
                        top: Radius.circular(20),
                      ),
                    ),
                    clipBehavior: Clip.antiAliasWithSaveLayer,
                    builder: (context) => DraggableScrollableSheet(
                      expand: false,
                      initialChildSize: 0.9,
                      minChildSize: 0.5,
                      maxChildSize: 0.9,
                      builder: (context, scrollController) {
                        return SingleChildScrollView(
                          child: new Container(
                            color: Colors.white,
                            child: buildTitleWidget(),
                          ),
                        );
                      },
                    ),
                    isDismissible: false,
                    isScrollControlled: true,
                  );

诀窍是不要将 scrollController 添加到 SingleChildScrollView

                      builder: (context, scrollController) {
                        return SingleChildScrollView(
                          controller: scrollController            <-- HERE
                          child: new Container(
                            color: Colors.white,
                            child: buildTitleWidget(),
                          ),
                        );
                      },

禁用向下拖动以关闭showModalBottomSheet

3 个答案: