【Qt】从QMainWindow到UI框架

最新推荐文章于 2025-04-05 02:01:57 发布

七夕先生

最新推荐文章于 2025-04-05 02:01:57 发布

阅读量1.7k

点赞数 22

分类专栏： Qt 文章标签： qt ui

本文链接：https://blog.youkuaiyun.com/csdnofhaner/article/details/136740286

版权

Qt 专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了Qt中的关键UI布局元素，包括CentralWidget（主要内容区域）、MenuBar（菜单栏）、Toolbars（工具栏）、StatusBar（状态栏）和DockWidgets（浮动面板），展示了如何在QtMainWindow中有效地组织和使用这些元素以构建常见的桌面应用布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

如下图所示，我们常见的一些desktop软件，比如VS Code、Smart VCI等，一般都会包含顶部的菜单栏，底部的状态栏，以及一些其他UI布局元素。
在这里插入图片描述

新建Qt项目是以MainWindow作为显示的载体，MainWindow是继承自QMainWindow的一个子类。

如下图所示，QMainWindow本身提供了常用的UI布局元素¹，包括：

Menu Bar 菜单栏
Toolbars 工具栏
Status Bar 状态栏
Dock Widgets Dock栏
Central Widget 页面内容区域

合理利用这几种元素，我们就可以构建出我们常见的desktop布局了：

接下来我们一次介绍这些元素及其基本使用方法

UI布局元素

Central Widget

Central Widget主要用来显示页面内容，通常是自定义Widget，也就是QWidget的子类，用来展示我们App的主要内容。可以调用QMainWindow的setCentralWidget()方法来设置Central Widget。

Menu Bar

Menu Bar也就是我们常见的菜单栏，在Qt中是用QMenuBar²类创建的。
在介绍QMenuBar之前，需要先介绍另外一个类QAction³。在desktop应用中，经常通过菜单栏中的菜单、工具栏按钮或者快捷键调用一些应用中常用的功能，比如打开文件操作。对于同一个功能，不管通过什么方式调用，执行的命令应该是同一个。这种情况下把功能抽象为Action是非常有用的，在Qt中，就是QAction。也就是说QAction是某个应用功能的抽象，可以同时被添加到菜单栏、工具栏和快捷键，Qt会自动完成在不同地方的状态同步。以下面代码为例：

    // ...
     QAction *submenu4 = new QAction("子菜单四");
     submenu4->setCheckable(true);
     submenu4->setShortcuts(QKeySequence::Copy);
     // ...
     menubar->addAction(submenu4);
     toolbar->addAction(submenu4);

如果在应用中执行“Ctrl + C”，子菜单四就会被选中，菜单栏、工具栏中的子菜单四状态都会同时发生改变：
在这里插入图片描述

接下来可以开始介绍QMenuBar了，它的功能就是创建菜单栏，容纳QMenu⁴。通过QMainWinow的void setMenuBar(QMenuBar *menuBar)⁵功能添加菜单栏，通过QMenuBar的addMenu⁶方法为菜单栏添加菜单元素，通过addAction方法添加具体命令。
通过下面例子介绍具体使用：

QMenuBar *menubar = new QMenuBar();
// 创建多级菜单
QMenu *menu1 = new QMenu("菜单一");

QMenu *submenu1 = new QMenu("子菜单一");
QAction *submenu11 = new QAction("二级子菜单一");
QAction *submenu12 = new QAction("二级子菜单二");
submenu1->addAction(submenu11);
submenu1->addAction(submenu12);

QAction *submenu2 = new QAction("子菜单二");
menu1->addMenu(submenu1);
menu1->addAction(submenu2);


// 没有子菜单的一级菜单
QAction *menu2 = new QAction("菜单二");
 menubar->addMenu(menu1);
 menubar->addAction(menu2);

效果如下图
在这里插入图片描述

Toolbars

与菜单栏类似，Qt通过QToolBar⁷创建工具栏，通过QMainWindow的void addToolBar(QToolBar *toolbar)⁸可以为窗口添加工具栏，一个窗口中可以添加多个工具栏。
工具栏元素可以添加QAction也可以添加QWidget，对应添加方法是addAction()、addWidget()。QMainWindow添加工具栏时可以指定工具栏的默认位置，通过下面的例子介绍具体使用

    QAction *submenu2 = new QAction("子菜单二");
    QAction *submenu3 = new QAction("子菜单三");
    QAction *submenu4 = new QAction("子菜单四");
    QPushButton *btn = new QPushButton("按钮");
    
    QToolBar *toolbar = new QToolBar();
    
    toolbar->addAction(submenu2);
    toolbar->addAction(submenu3);
    toolbar->addSeparator(); // 菜单元素之间增加分割线
    toolbar->addWidget(btn);

    QToolBar *toolbar2 = new QToolBar();
    toolbar2->addAction(submenu4);

    addToolBar(toolbar);
    addToolBar(toolbar2);

效果如图：在这里插入图片描述
菜单栏默认会被添加在窗口上方，菜单栏默认也是可以拖动到窗口的四个边，也可以处于悬浮状态请添加图片描述
对于上述的默认值，可以手动做一些限制和调整：

指定初始位置，在调用addToolBar()时指定位置，比如addToolBar(toolbar, Qt::TopToolBarArea)。位置包括LeftToolBarArea、RightToolBarArea、TopToolBarArea、BottomToolBarArea。
是否允许多动，通过QToolBar的void setMovable(bool movable)
指定可以拖动到的窗口位置，通过QToolBar的void setAllowedAreas(Qt::ToolBarAreas areas)，比如只允许窗口上方或者窗口下方toolbar->setAllowedAreas(Qt::TopToolBarArea | Qt::BottomToolBarArea);
菜单栏是否可以处于悬浮状态，通过QToolBar的void setFloatable(bool floatable)

Status Bar

通过QStatusBar⁹为窗口添加状态栏，位于窗口底部，一般用于显示一些通知和提示。QMainWindow的setStatusBar()函数为窗口设置状态栏。
通过statusBar()->showMessage("Message", 2000);在状态栏显示信息，并支持指定信息存在的时长。

Dock Widgets

相比于QToolBar，Dock Widgets¹⁰的内容有更多自由度，一般用于显示一些工作区域，比如文档目录这些。通过QMainWindow的addDockWidget为窗口添加Dock Widget。

和工具栏类似，Dock Widget也可以指定初始位置、是否可以拖动、允许的位置以及是否可以处于悬浮状态等。

同一个窗口同样可以添加多个Dock Widget，多个Widget还可以组合在一起，通过tab切换

通过如下示例说明：

    QDockWidget *dockWidget = new QDockWidget("Dock Widget");
    QLabel *dockWidgetContent = new QLabel("dock Widget内容");
    dockWidgetContent->setStyleSheet("background-color:green;color: white;");
    dockWidget->setWidget(dockWidgetContent);
    addDockWidget(Qt::LeftDockWidgetArea, dockWidget);

    QDockWidget *dockWidget2 = new QDockWidget("Dock Widget 2");
    QLabel *dockWidgetContent2 = new QLabel("dock Widget 2 内容");
    dockWidgetContent2->setStyleSheet("background-color:green;color: white;");
    dockWidget2->setWidget(dockWidgetContent2);
    addDockWidget(Qt::LeftDockWidgetArea, dockWidget2);

    QDockWidget *dockWidget3 = new QDockWidget(tr("Dock Widget 3"));
    dockWidget3->setAllowedAreas(Qt::LeftDockWidgetArea |
                                Qt::RightDockWidgetArea);
    QLabel *dockWidgetContent3 = new QLabel("dock Widget 3 内容");
    dockWidgetContent3->setStyleSheet("background-color:green;color: white;");
    dockWidget3->setWidget(dockWidgetContent3);

    addDockWidget(Qt::LeftDockWidgetArea, dockWidget3);
    tabifyDockWidget(dockWidget, dockWidget2); // 将dockWidget和dockWidget2组合
    tabifyDockWidget(dockWidget, dockWidget3); // 将docketWidget、dockWidget2以及dockWidget3组合在一起

效果如下图：
在这里插入图片描述