Flutter 底部弹窗ModelBottomSheet详解

9 min read

ModelBottomSheet 是 Flutter 中的一个底部弹窗控件，可以用于显示一个从底部弹出的窗口。ModelBottomSheet 可以通过回调函数，在用户点击弹窗外部或者点击弹窗的取消按钮时，执行相应的操作。

ModelBottomSheet 的使用步骤如下：

  1. 导入 material 库：
import 'package:flutter/material.dart';
  1. 创建一个 StatefulWidget，用于保存底部弹窗的状态：
class MyBottomSheet extends StatefulWidget {
  @override
  _MyBottomSheetState createState() => _MyBottomSheetState();
}
  1. 在 State 的 build 方法中，返回一个 Scaffold，包含一个按钮，用于触发底部弹窗的显示：
class _MyBottomSheetState extends State<MyBottomSheet> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Bottom Sheet Demo'),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            showModalBottomSheet(
              context: context,
              builder: (BuildContext context) {
                return Container(
                  child: Text('This is a bottom sheet'),
                  padding: EdgeInsets.all(20.0),
                );
              },
            );
          },
          child: Text('Show Bottom Sheet'),
        ),
      ),
    );
  }
}

在这个例子中，通过调用 showModalBottomSheet 方法显示底部弹窗。builder 方法返回的是一个 Widget，这里使用一个简单的文本 Widget。

  1. 在主函数中，将 MyBottomSheet 作为首页进行显示：
void main() {
  runApp(MaterialApp(
    title: 'Bottom Sheet Demo',
    home: MyBottomSheet(),
  ));
}

这样就可以运行并显示底部弹窗了。

ModelBottomSheet 还可以设置其他的属性，例如设置底部弹窗的高度，设置弹窗外部的点击行为等。详细的使用方法可以参考 Flutter 官方文档：https://api.flutter.dev/flutter/material/showModalBottomSheet.html