flutter BottomSheet

Flutter提供了一个名为`BottomSheet`的小部件，用于在页面底部显示一个可滚动的内容面板。以下是一个简单的示例，演示如何使用`BottomSheet`小部件：

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        color: Colors.grey[200],
        child: Center(
          child: Text(
            'This is a bottom sheet',
            style: TextStyle(fontSize: 24),
          ),
        ),
      );
    },
  );
}

在上面的示例中，我们使用`showModalBottomSheet`方法显示一个带有文本的容器。您可以根据需要自定义容器的内容和样式。

您还可以使用`BottomSheet`小部件自定义底部面板并将其附加到页面的底部。以下是一个示例：

void _showBottomSheet(BuildContext context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return BottomSheet(
        onClosing: () {},
        builder: (BuildContext context) {
          return Container(
            height: 200,
            color: Colors.grey[200],
            child: Center(
              child: Text(
                'This is a custom bottom sheet',
                style: TextStyle(fontSize: 24),
              ),
            ),
          );
        },
      );
    },
  );
}

在上面的示例中，我们使用`BottomSheet`小部件创建一个带有文本的容器，并将其附加到页面的底部。`onClosing`回调可用于在用户关闭底部面板时执行操作。您可以根据需要自定义容器的内容和样式。

需要注意的是，`showModalBottomSheet`方法返回一个`Future`对象，该对象在底部面板被关闭时解析。可以使用`Navigator.pop`方法从底部面板中返回数据。例如：

void _showBottomSheet(BuildContext context) async {
  var result = await showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return Container(
        height: 200,
        color: Colors.grey[200],
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Select an option',
                style: TextStyle(fontSize: 24),
              ),
              SizedBox(height: 16),
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop('Option 1'),
                child: Text('Option 1'),
              ),
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop('Option 2'),
                child: Text('Option 2'),
              ),
            ],
          ),
        ),
      );
    },
  );

  print(result);
}

在上面的示例中，我们在底部面板中显示两个按钮，并使用`Navigator.pop`方法将选定的选项返回给调用方。返回的选项将解析为`result`变量。