加载时的 showModalBottomSheet

在Flutter中，showModalBottomSheet是一种将底部弹出的模态底部操作面板显示在当前屏幕上的方法。

如何使用

要使用showModalBottomSheet，您需要获取上下文并使用它调用该函数。以下是一些示例代码：

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      child: Text('这是一个模态底部操作面板'),
    );
  },
);

参数- context

context参数是您要显示模态底部操作面板的上下文。此参数告诉Flutter在哪里显示模态底部操作面板。

参数- builder

builder参数是一个函数，Flutter根据它的返回结果来构建模态底部操作面板。要构建操作面板，您可以使用几乎所有的Flutter widget，例如Container，Column，ListView等等。

代码示例

以下是一个基本的使用showModalBottomSheet的示例代码：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Bottom Sheet Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Sheet Demo'),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
              showModalBottomSheet(
                context: context,
                builder: (BuildContext context) {
                  return Container(
                    height: 200,
                    child: Center(
                      child: Text('这是一个模态底部操作面板'),
                    ),
                  );
                },
              );
            },
            child: Text('显示模态底部操作面板'),
          ),
        ),
      ),
    );
  }
}

结论

在Flutter中，showModalBottomSheet是一种很强大的方法，可用于构建一个动态且卓越的用户界面。使用此方法可以显示一个模态底部操作面板，让用户轻松执行任务。