flutter如何实现半屏模态框

在Flutter中如何实现半屏模态框？我想在点击按钮时从底部弹出一个占屏幕一半高度的模态框，类似iOS的ActionSheet效果。目前尝试使用showModalBottomSheet，但无法精确控制高度为屏幕的一半，且内容滚动时会出现问题。求实现方案和最佳实践，是否需要自定义路由或使用特定插件？

2 回复

在Flutter中，可使用showModalBottomSheet实现半屏模态框。设置isScrollControlled: true，并通过constraints控制高度，例如设为屏幕的50%。

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


在Flutter中实现半屏模态框，可以使用showModalBottomSheet并自定义高度。以下是实现方法：

1. 基础实现

// 触发按钮
ElevatedButton(
  onPressed: () {
    showModalBottomSheet(
      context: context,
      isScrollControlled: true, // 关键属性
      builder: (context) => Container(
        height: MediaQuery.of(context).size.height * 0.6, // 屏幕60%高度
        child: Column(
          children: [
            // 你的内容
            Text('半屏模态框内容'),
            ElevatedButton(
              onPressed: () => Navigator.pop(context),
              child: Text('关闭'),
            )
          ],
        ),
      ),
    );
  },
  child: Text('打开半屏模态框'),
)

2. 优化版本（带圆角和拖动关闭）

showModalBottomSheet(
  context: context,
  isScrollControlled: true,
  shape: RoundedRectangleBorder( // 顶部圆角
    borderRadius: BorderRadius.vertical(top: Radius.circular(20))
  ),
  builder: (context) => DraggableScrollableSheet( // 可拖动调整高度
    expand: false,
    initialChildSize: 0.6, // 初始高度60%
    minChildSize: 0.4,     // 最小高度40%
    maxChildSize: 0.9,     // 最大高度90%
    builder: (context, scrollController) => Container(
      child: ListView(
        controller: scrollController,
        children: [
          Center( // 顶部拖动指示器
            child: Container(
              margin: EdgeInsets.only(top: 8),
              width: 40,
              height: 4,
              decoration: BoxDecoration(
                color: Colors.grey[300],
                borderRadius: BorderRadius.circular(2)
              ),
            ),
          ),
          // 你的内容
          ListTile(title: Text('项目1')),
          ListTile(title: Text('项目2')),
        ],
      ),
    ),
  ),
);

关键点说明：

  • isScrollControlled: true - 允许模态框使用全屏高度
  • MediaQuery.of(context).size.height - 获取屏幕高度
  • DraggableScrollableSheet - 实现可拖动调整高度
  • shape参数 - 自定义顶部圆角

这种方法可以创建灵活的半屏模态框，支持手势交互和自定义样式。

回到顶部