目录最终效果先选方案拆开讲讲面板高度跟着内容走面板纵坐标怎么算遮罩和收起四个图标依次淡入几个可以调的参数什么时候用小结完整代码工程下载本文介绍 QML 自定义的底部面板组件。分享、保存、删除这类操作，往往要等用户先选中东西才出现。平时藏起来，用时从屏幕底部滑出一块面板，背后压一层半透明遮罩，把视线聚到面板上。思路是用一个开或关的状态控制遮罩浓淡、面板位置和图标显隐。面板多高由里面内容自动撑开，而且只占底部一小条，这样才像浮上来一层，而不是把整屏换掉。最终效果点「分享」按钮，一块白色面板从屏幕底部滑上来，背后压一层半透明黑遮罩，四个操作图标依次淡入；点遮罩或操作项就收回去。先选方案切入正题前，先回答一个绕不开的问题：「先选中、再弹操作」这组按钮，到底该放哪、怎么出来？顶部工具栏：成本最低，操作一排常显在顶；观感整齐，但一直占位、和「选中才出现」的场景不符，开销几乎为零。侧边栏：成本中等，操作从侧边滑入；列表列得开，但占半屏、适合横向，竖屏手机上偏挤，性能低。模态遮罩：成本中等，整屏弹一层居中对话框；聚焦最强，但把整屏换掉、打断当前上下文，适合要强制决策的场景，性能低。底部滑出面板：成本中等，面板高度跟着内容走、只占底部一小条、四个图标依次淡入；手势直觉、不整屏替换，适合「先选中对象再弹操作」的手机 ActionSheet，性能低。底部滑出面板拿一次「面板上滑 + 遮罩淡入」的成本，