Flutter中的showBottomSheet和showModalBottomSheet

在Flutter中，showBottomSheet和showModalBottomSheet都用于显示屏幕底部的菜单，然而它们之间还是有几个重要的区别的。下面我们一起来看一下它们之间的不同之处。

showBottomSheet

showBottomSheet方法通常用于显示非模态的屏幕底部菜单。它允许用户在底部选择操作，并允许在底部添加自定义内容。

showBottomSheet有两个参数，BuildContext和builder。BuildContext参数是当前上下文，builder参数是用于构建底部菜单的Widget或Widget树。

下面是一个showBottomSheet的示例：

void _showBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        child: Center(
          child: Text('This is a bottom sheet'),
        ),
      );
    },
  );
}

showModalBottomSheet

showModalBottomSheet方法通常用于显示模态的屏幕底部菜单。它允许用户在底部选择操作，并允许在底部添加自定义内容，同时允许在菜单上显示遮罩层，以防止用户与屏幕上其他元素进行交互。

showModalBottomSheet有三个参数，BuildContext、builder和isScrollControlled。BuildContext参数是当前上下文，builder参数是用于构建底部菜单的Widget或Widget树，isScrollControlled参数是一个布尔值，用于控制底部菜单的高度是否应该占满整个高度。

下面是一个showModalBottomSheet的示例：

void _showModalBottomSheet(context) {
  showModalBottomSheet(
    context: context,
    isScrollControlled: true,
    builder: (builder) {
      return Container(
        height: MediaQuery.of(context).size.height * 0.75,
        child: Center(
          child: Text('This is a modal bottom sheet'),
        ),
      );
    },
  );
}

总结

showBottomSheet和showModalBottomSheet都用于显示屏幕底部的菜单，但showModalBottomSheet适用于模态情况下，显示屏幕底部的菜单。两者的主要区别在于，showModalBottomSheet允许在底部菜单上显示遮罩层，以防止用户与屏幕上其他元素进行交互。在开发中，我们应根据实际需要选择使用哪个方法。

参考链接

• showBottomSheet类
• showModalBottomSheet类