flutter如何实现模态框

在Flutter中如何实现一个模态框？我想在用户点击按钮时弹出一个半透明的模态框，里面包含一些表单输入和操作按钮。需要支持自定义样式和动画效果，并且能够通过外部控制关闭弹窗。请问有哪些实现方式？最好能提供简单的代码示例和注意事项。

2 回复

Flutter中实现模态框使用showModalBottomSheet或showDialog方法。前者用于底部弹窗，后者用于居中弹窗。通过builder参数返回自定义Widget即可。

更多关于flutter如何实现模态框的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中，可以通过以下方式实现模态框：

1. 使用 showDialog 函数（最常用）

// 显示模态框
showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('提示'),
      content: Text('这是一个模态对话框'),
      actions: <Widget>[
        TextButton(
          child: Text('取消'),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        TextButton(
          child: Text('确定'),
          onPressed: () {
            // 处理确定操作
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);

2. 自定义模态框

showDialog(
  context: context,
  builder: (BuildContext context) {
    return Dialog(
      child: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('自定义模态框'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('关闭'),
            ),
          ],
        ),
      ),
    );
  },
);

3. 底部模态框

showModalBottomSheet(
  context: context,
  builder: (BuildContext context) {
    return Container(
      height: 200,
      child: Column(
        children: [
          ListTile(
            leading: Icon(Icons.share),
            title: Text('分享'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(Icons.copy),
            title: Text('复制'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    );
  },
);

4. 全屏模态框

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => FullScreenModal(),
    fullscreenDialog: true,
  ),
);

主要特点：

  • showDialog：显示在屏幕中央
  • showModalBottomSheet：从底部滑出
  • barrierDismissible：点击背景是否关闭（默认true）
  • 使用 Navigator.of(context).pop() 关闭模态框

选择哪种方式取决于你的具体需求，AlertDialog适合简单的确认对话框，Dialog适合自定义内容，BottomSheet适合底部菜单。

回到顶部