Thinking in Qt —— 项目开发最佳实践(一)

过去主流的界面都是“顶部菜单栏 + 顶部工具栏”，例如 Navicat

然而从 2015 ~ 2020 开始，全球软件 UI 设计发生了大变革，大量软件把导航放到左侧，例如微信

原因如下

• 屏幕比例从 4:3 → 16:9 → 21:9，顶部空间变得“宝贵”

• 左侧导航比顶部导航更适合“多模块”的大型软件

• 左侧导航栏符合人眼扫描习惯

• 移动端 UI 风格反向影响了 PC

• 顶部导航复杂、难自定义、难扩展，维护成本高

• 顶部导航视觉上“压得很重”，左侧更轻、更现代

总结一句话

顶部导航是“工具条思维”，左侧导航是“模块思维”。

现代软件越来越大、越来越模块化，所以左侧导航成为主流，替代了笨重的顶部 Ribbon。

看过很多同学写的带左侧导航的界面代码，差强人意

今天我带大家一起用 Qt/C++ 来开发标准的带左侧导航的 UI

先看完成后的 demo

代码下载 https://thinkinginqt.com/20251120_thinkinginqt/testLeftSideBar.zip

用 QtCreator 打开项目，双击 mainwindow.ui，可以看到右侧对象查看器里内容如下

MainWindow 分左右两部分，左边是 QToolBar，右边是 QStackedWidget

QToolBar 插入 6 个 QAction，QStackedWidget 插入 6 个 QLabel

QToolBar 需要设置 contextMenuPolicy 属性为 PreventContextMenu

QMainWindow 和 QToolBar 需要设置 toolButtonStyle 属性为 ToolButtonTextUnderIcon

QAction 需要设置 checkable 属性为 true

左侧按钮点击，右侧页面变化功能，通过以下代码实现，非常简单，用到了 C++11 的 lambda 匿名函数

xxxxxxxxxx
auto *group = new QActionGroup(this);
group->setExclusive(true);
for (QAction *action : ui->toolBar->actions()) {
    action->setActionGroup(group);
}

connect(ui->toolBar, &QToolBar::actionTriggered, this, [this](QAction *action){
    ui->stackedWidget->setCurrentIndex(ui->toolBar->actions().indexOf(action));
});

鼠标悬浮、点击时按钮变化功能，通过以下代码实现，用到了 C++11 的原始字符串字面量

xxxxxxxxxx
setStyleSheet(R"(
    QToolBar{
    background-color:#FFFFFF;
    }
    QToolButton{
    border:none;
    margin:4px;
    border-radius:8px;
    }
    QToolButton:hover{
    background-color:#FFF9E8;
    color:#4E5969;
    }
    QToolButton:unchecked{
    background-color:transparent;
    color:#4E5969;
    }
    QToolButton:checked{
    background-color:#FFF9E8;
    color:#D0A161;
    }
)");

因为之前看到很多同学用 QPushButton + QWidget 自己模拟左侧导航栏，代码很繁琐

所以专门写篇文章，让我们一起 Thinking in Qt！