flutter 禁用向下拖动以关闭showModalBottomSheet

0sgqnhkj  于 2023-01-14  发布在  Flutter
关注(0)|答案(4)|浏览(586)

如何禁用/退出底部表单模态中的向下拖动手势,以便用户可以在模态中交互,而不会意外关闭模态?
使用实际模态底表更新以下内容。

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

nle07wnf1#

enableDrag设置为false
布尔值启用拖动
如果为真,则可以上下拖动底部工作表,并通过向下滑动来解除。
https://docs.flutter.io/flutter/material/BottomSheet/enableDrag.html

ifmq2ha2

ifmq2ha22#

您可以尝试使用onVerticalDragStart =(_){}将生成器的结果与GestureDetector Package 在一起

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

c6ubokkw3#

如果您仍然希望在模态中滚动而不需要用户拖动和关闭它,您可以使用以下命令:

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(),
                          ),
                        );
                      },
dphi5xsq

dphi5xsq4#

我想要一个可以上下拖动的bottomSheet,但是在向下拖动时不会关闭。我的想法是,如果它一关闭,我就再次调用它会怎么样?在这里,递归来拯救它。所以,首先我为我的modalBottomSheet创建了一个函数。

Future modalBottomSheetShow(BuildContext context) {
    return showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) => buildSheet(),
      isDismissible: false,
      elevation: 0,
    );
  }

接下来,我使用showModalBottomSheet()的.whenComplete()方法递归调用modalBottomSheetShow()函数。

Future modalBottomSheetShow(BuildContext context) {
    return showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) => buildSheet(),
      isDismissible: false,
      elevation: 0,
    ).whenComplete(() => modalBottomSheetShow(context));
  }

接下来,只要我想要一个底部表单,我就调用modalBottomSheetShow()。它不能被关闭,直到递归结束。下面是完整的代码供参考:

import 'package:flutter/material.dart';
import 'package:google_maps_flutter/google_maps_flutter.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
  static const idScreen = "HomePage";
  @override
  State<HomePage> createState() => _HomePageState();
}


  @override
  void initState() {
    super.initState();

    WidgetsBinding.instance.addPostFrameCallback((_) async {
      modalBottomSheetShow(context);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        toolbarHeight: 0,
        elevation: 0,
        backgroundColor: Colors.black,
      ),
    );
  }

  Widget buildSheet() {
    return DraggableScrollableSheet(
      initialChildSize: 0.6,
      builder: (BuildContext context, ScrollController scrollController) {
        return Container(
          decoration: BoxDecoration(color: Colors.white, boxShadow: [
            BoxShadow(
              color: Color(0x6C000000),
              spreadRadius: 5,
              blurRadius: 20,
              offset: Offset(0, 0),
            )
          ]),
          padding: EdgeInsets.all(16),
        );
      },
    );
  }

  Future modalBottomSheetShow(BuildContext context) {
    return showModalBottomSheet(
      backgroundColor: Colors.transparent,
      context: context,
      builder: (context) => buildSheet(),
      isDismissible: false,
      elevation: 0,
    ).whenComplete(() => modalBottomSheetShow(context));
  }
}

相关问题