flutter如何实现半屏弹窗

在Flutter中如何实现半屏弹窗效果？我需要弹窗从底部向上滑动，只占屏幕的一半高度，并且背景内容要保持可见。尝试过showModalBottomSheet，但它默认是全屏或接近全屏的。有没有办法自定义弹窗高度，同时确保弹窗外的区域可以点击或滑动关闭？求具体的代码示例或推荐插件。

2 回复

在Flutter中，使用showModalBottomSheet实现半屏弹窗。设置isScrollControlled: true并自定义高度，例如用Container包裹内容并指定height: MediaQuery.of(context).size.height * 0.5即可实现半屏效果。

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


在Flutter中实现半屏弹窗，推荐使用showModalBottomSheet，它可以创建从底部弹出的模态弹窗，并支持自定义高度。

基本实现代码

// 触发弹窗的按钮
ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 重要：允许控制高度
      builder: (context) => Container(
        height: MediaQuery.of(context).size.height * 0.6, // 屏幕高度的60%
        child: Column(
          children: [
            // 弹窗内容
            ListTile(
              title: Text('选项1'),
              onTap: () {
                Navigator.pop(context); // 关闭弹窗
              },
            ),
            ListTile(
              title: Text('选项2'),
              onTap: () {
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
    );
  },
  child: Text('打开半屏弹窗'),
)

关键参数说明

  • isScrollControlled: true - 允许弹窗使用指定高度
  • height - 通过MediaQuery获取屏幕高度并乘以比例（如0.5、0.7等）
  • builder - 返回自定义的弹窗内容组件

进阶用法

如果需要更复杂的样式，可以自定义弹窗组件：

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  backgroundColor: Colors.transparent,
  builder: (context) => Container(
    height: MediaQuery.of(context).size.height * 0.5,
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(16),
        topRight: Radius.circular(16),
      ),
    ),
    child: YourCustomWidget(), // 你的自定义组件
  ),
);

这种方法简单高效，适用于大多数半屏弹窗场景。

回到顶部