Qt导航栏组件A03：VS Code 风格的图标侧栏
目录
- 一、引言
- 二、最终效果预览
- 三、核心实现原理
- 3.1 布局结构设计
- 3.2 核心技术点
- 四、代码实现详解
- 4.1 项目结构
- 4.2 导航组件的核心代码
- 4.3 样式表设计
- 五、总结
- 5.1 核心要点回顾
- 5.2 学习建议
- 源码下载
系列编号：A-03
导航风格：只有图标的侧栏
适用场景：IDE、编辑器类工具、需要节省水平空间的桌面应用
一、引言
工具类软件的界面寸土寸金，传统「图标+文字」侧边栏会占用 180～200px 宽度。VS Code 的解法是把导航栏做到 48px——只放图标，文字信息通过 Tooltip 按需展示，当前活动项用左侧白色竖线指示。这个方案看似简单，实现时却有三个细节需要处理：QToolButton的 checked 样式如何加左侧边框指示条？图标如何做到悬停不变色、只改背景？顶部功能按钮和底部设置按钮如何上下分区布局？本文逐一解答。
二、最终效果预览
- 左侧 48px 宽活动栏（深色
#333333背景），图标居中，间距均匀 - 悬停：图标按钮背景变为
#2a2d2e - 选中：背景变为
#37373d，左侧出现 2px 白色指示条 - 活动栏分上下两区：上方为主功能（资源管理器/搜索/Git/调试/扩展），下方为设置
- 点击切换右侧侧边面板标题，整体深色主题与 VS Code 高度一致