Roson的Qt之旅#55 用Qt实现漂亮的程序框架

谁践踏了优雅 2022-09-15 15:00 111阅读 0赞

# 1.最终效果展示 #

静态图片：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_19_color_FFFFFF_t_70_g_se_x_16][]

动态演示：

![dc6abab7c8b54f73bb3e8e92992f4768.gif][]

# 2.前言 #

本文承接我之前写的一篇文章

[Roson的Qt之旅\#54 Qt去掉程序默认按钮和边框(但依然可拖动和最大最小化)\_Allen Roson-CSDN博客d1.最终效果展示2.Qt默认的程序框架介绍3.去掉默认的按钮和边框4.实现可拖拽/可最大化/可最小化/可关闭功能![favicon32.ico][]https://blog.csdn.net/jolin678/article/details/120719562][Roson_Qt_54 Qt_Allen Roson-CSDN_d1._2.Qt_3._4._favicon32.ico_https_blog.csdn.net_jolin678_article_details_120719562]

今天将在前文的基础上，继续来讲解如何实现一个漂亮的程序UI框架。

上文中，我们已经实现的效果是这样的：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16][]

那么在本文中，会讲解如何用布局解决最大化后按钮位置错乱、如何美化界面。

# 3.使用布局解决最大化后控件位置错乱的问题 #

Qt布局分为：垂直布局，水平布局，栅格布局，布局也是一个有点复杂的知识点，需要大家多尝试才能融汇贯通，**下面我写的两篇和布局有关的博客**，大家可以去了解一下。

[QT 垂直布局与水平布局\_Allen Roson-CSDN博客1.垂直布局 QVBoxLayout \*layout = new QVBoxLayout(this); ui.centralWidget->setLayout(layout); QPushButton \*button1 = new QPushButton("One"); QPushButton \*button2 = new QPushButton("Two"); QPushButton \*button3 = new QPushButton("Three")![favicon32.ico][]https://blog.csdn.net/jolin678/article/details/118931993][QT _Allen Roson-CSDN_1._ QVBoxLayout _layout _ new QVBoxLayout_this_ ui.centralWidget-_setLayout_layout_ QPushButton _button1 _ new QPushButton_One_ QPushButton _button2 _ new QPushButton_Two_ QPushButton _button3 _ new QPushButton_Three_favicon32.ico_https_blog.csdn.net_jolin678_article_details_118931993][QGridLayout（表格布局）详细使用说明\_Allen Roson-CSDN博客\_qgridlayout1.概述QGridLayout类在网格中布局小部件。QGridLayout获取可用空间（通过其父布局或parentWidget()），将其划分为行和列，并将其管理的每个小部件放入正确的单元格中。每列都有一个最小宽度和一个拉伸系数。最小宽度是使用setColumnMinimumWidth()设置的。拉伸因子是使用setColumnStretch()设置的，它决定了该列将获得多少可用空间，以及超过其必要的最小值。通常，使用addWidget()将每个托管小部件或布局放入自己的单元格中。小部件..![favicon32.ico][]https://blog.csdn.net/jolin678/article/details/119784320][QGridLayout_Allen Roson-CSDN_qgridlayout1._QGridLayout_QGridLayout_parentWidget_setColumnMinimumWidth_setColumnStretch_addWidget_.._favicon32.ico_https_blog.csdn.net_jolin678_article_details_119784320]

这里我选用的是垂直布局(在centralWidget空白处**右键单击并选择垂直布局**菜单)：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16][]

然后设置布局的拉伸系数：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 1][]

使用“0,0,0,4,0”表示窗口变大时，从上到下数起，第4个控件的尺寸会拉伸，其它的不受影响，我这里第4个控件是mainWidget.

设置后，设计师界面看到的是这样子：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

可以看到菜单栏、工具栏等的高度非常小，这肯定不行，一般软件的菜单栏、工具栏、状态栏的高度都是固定的，所以接下来我们再设置一下控件的最大高度和最小高度，我们要把最小高度和最高高度设置成一样的值，这样就是固定高度了。

下面的例子是把标题栏的高度设置为固定的30.

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_16_color_FFFFFF_t_70_g_se_x_16][]

设置完后，标题栏显示出来了。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

按照上面的方法依次设置菜单栏、工具栏、状态栏的固定高度，最后变成下面这样了：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

但是这还没有结束，可以明显地看到标题栏等与窗口的边框之间还有缝隙，正常应该是和窗口边框贴在一起的，这个需要设置一下边框；另外菜单栏与标题栏之间也有空隙，这显然不美观，这个需要设置一下控件间的layoutSpacing，设置方法如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_16_color_FFFFFF_t_70_g_se_x_16 1][]

将上面圈出来的全部改成0，然后变成了这样：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

可以看到控件与控件之间，控件与边框之间都没有空隙了，很贴合。 但是我们现在发现右上角的按钮位置变了，这个还需要继续调整，不然程序最大化后，这3个按钮还是无法显示在窗口的右上角，而是显示在标题栏的中间。接下来做这么几步：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 5][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 6][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 7][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 8][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 9][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 10][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 3][]

** 接下来看效果**：

![58ab226750c54867aa6eb651020fd856.gif][]

#  #

# 4.优化最大化按钮的效果 #

经过上面的步骤，我们会发现程序最大化之后，窗口铺满了整个屏幕，再次点击最大化按钮时，程序窗口应该缩小，但是并没有，下面我们来处理一下。

在头文件中添加一个成员变量：

bool m_bMaximized;

修改cpp，初始化这个变量，修改最大化函数代码

MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        /*
        你的其它代码，这里省略...
        */
    
        m_bMaximized = false;
    }
    
    
    void MainWindow::OnClickMaximizeBtn()
    {
        if(m_bMaximized)
        {
            showNormal();
            m_bMaximized = false;
        }
        else
        {
            showMaximized();
            m_bMaximized = true;
        }
    }

下面来看一下修改后的效果：

![00b7024c77104f0d83964d9f2903aff3.gif][]

# 5. 在菜单栏添加菜单 #

MainWindow::MainWindow(QWidget *parent) :
        QMainWindow(parent),
        ui(new Ui::MainWindow)
    {
        /*
        ...
        */
    
        QMenuBar *pMenuBar = new QMenuBar(ui->menuBar);
        QMenu *fileMenu = new QMenu(tr("File"));
        QAction *actOpen = new QAction(tr("Open"),fileMenu);
        QAction *actClose = new QAction(tr("Close"),fileMenu);
        fileMenu->addAction(actOpen);
        fileMenu->addAction(actClose);
        pMenuBar->addMenu(fileMenu);
    
    
        QMenu *editMenu = new QMenu(tr("Edit"));
        QAction *actCopy = new QAction(tr("Copy"),editMenu);
        QAction *actCut = new QAction(tr("Cut"),editMenu);
        QAction *actPaste = new QAction(tr("Paste"),editMenu);
        editMenu->addAction(actCopy);
        editMenu->addAction(actCut);
        editMenu->addAction(actPaste);
        pMenuBar->addMenu(editMenu);
    
        QMenu *editBuild = new QMenu(tr("Build"));
        QMenu *editDebug = new QMenu(tr("Debug"));
        QMenu *editTool = new QMenu(tr("Tool"));
        QMenu *editHelp = new QMenu(tr("Help"));
        pMenuBar->addMenu(editBuild);
        pMenuBar->addMenu(editDebug);
        pMenuBar->addMenu(editTool);
        pMenuBar->addMenu(editHelp);
    
        /*
        ...
        */
    }

# 6.在工具栏添加按钮 #

用QtDesinger拖动按钮到工具栏，或者手写代码创建按钮。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 11][]

设置按钮背景图片，设置前需要先把图片添加到资源文件中。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 12][]

# 7.设置程序主体风格样式 #

这里我想以“**绿色和白色为主色**”，用样式表文件来控制样式。下面是我的样式表文件的内容：

QWidget#menuBar,QWidget#titleBar,QWidget#toolBar{
    	background: #22cb66;
    }
    
    QWidget#mainWidget,QWidget#stateBar{
    	background: #ffffff;
    }
    
    QWidget#centralWidget{
    	border-radius:6px;
    }
    
    QMenuBar{
    	background: #22cb66;
    }
    
    QMenuBar::item {
      spacing: 3px; /* spacing between menu bar items */
      padding: 1px 4px;
      background: transparent;
      border-radius: 4px;
    }
    
    QMenuBar::item:selected { /* when selected using mouse or keyboard */
      background: #1eba5d;
    }
    
    QMenuBar::item:pressed {
      background: #168743;
    }
    
    QMenu {
    	background:#22cb66;
    	margin: 2px;
    }
    
    QMenu::item:selected {
    	color: #FFFFFF;
    	background: #28f77b; 
    }
      
    QPushButton{
    	background: #22cb66;
    }
    
    QPushButton:hover{ 
    	background: #1eba5d;
    }
    
    QPushButton:pressed{
    	background: #168743;
    }

我的样式表文件名为：green.css，需要将其添加到qrc资源文件中：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 13][]

然后在main.cpp中添加如下代码：

QApplication a(argc, argv);
        QFile file(":/Resources/green.css");
        file.open(QFile::ReadOnly);
        if (file.isOpen())
        {
            QString styleSheet = QLatin1String(file.readAll());
            a.setStyleSheet(styleSheet);
            a.setPalette(QPalette(QColor("#F0F0F0")));
        }

上面这段代码用于加载样式表。运行结果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 14][]

#  #

# 8.给程序设置一个边框 #

从上面的图中能看出到，整个程序的主要框架都完成了，现在美中不足的是程序的边框是纯白的，当这个程序窗口放在其它程序的上层时，如果其它程序也是白色的，那么就不容易区分程序的边界在哪里，所以需要设置一个看的件的边框，这里说一个简单的方法，把布局的边距都设置为1即可。

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16][]

然后看效果，此时窗口四个边框都是1条很细的灰色线条:

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 15][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_19_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/2884b76a3bd44254be7bf247246f5596.png
[dc6abab7c8b54f73bb3e8e92992f4768.gif]: /images/20220828/286d52a678de45dfa1c914c5a8d095f5.png
[favicon32.ico]: /images/20220828/58adf9c2055545669103953f1f59e307.png
[Roson_Qt_54 Qt_Allen Roson-CSDN_d1._2.Qt_3._4._favicon32.ico_https_blog.csdn.net_jolin678_article_details_120719562]: https://blog.csdn.net/jolin678/article/details/120719562
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/9e7eefb1107b4419855ee6dfacbe368c.png
[QT _Allen Roson-CSDN_1._ QVBoxLayout _layout _ new QVBoxLayout_this_ ui.centralWidget-_setLayout_layout_ QPushButton _button1 _ new QPushButton_One_ QPushButton _button2 _ new QPushButton_Two_ QPushButton _button3 _ new QPushButton_Three_favicon32.ico_https_blog.csdn.net_jolin678_article_details_118931993]: https://blog.csdn.net/jolin678/article/details/118931993
[QGridLayout_Allen Roson-CSDN_qgridlayout1._QGridLayout_QGridLayout_parentWidget_setColumnMinimumWidth_setColumnStretch_addWidget_.._favicon32.ico_https_blog.csdn.net_jolin678_article_details_119784320]: https://blog.csdn.net/jolin678/article/details/119784320
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b33d865d196f460c9b3f18bfb17fc6ae.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/1ffb1bf82be94213adce1703e479dc49.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/f1dfa46a983844069ace41fc6072f5ac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/540150a11cbb420cab4afa86c8fdffbc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/f41ad86418e94c93878aa8e03cc9b88f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/02f809bc9e564bc1bad61a5576a679d8.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_16_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/fd5cfcf358234fa4abd91ac8790696fc.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/b92c5818d8b34f44a02c7fb340bf6b13.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 5]: /images/20220828/2cf4872f13604f45ba489afe39fc7eac.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 6]: /images/20220828/7f1f502ac9a54c8ca8a6d43f32fc5b5e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 7]: /images/20220828/26a6c375f6634af19117b55549f0c870.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 8]: /images/20220828/08de06b891ab4ae1ac530157c8c6d0da.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/417d6f80cece467d9b63e82df3f0c02f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 9]: /images/20220828/344a9cd6dc844217920142f59232fae2.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 10]: /images/20220828/46fce4473f3b4cb784e20c483480b72b.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_17_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/6dae002883554811b45f4291cf4f37e3.png
[58ab226750c54867aa6eb651020fd856.gif]: /images/20220828/9a555834a6ed49119afaaa1b598c13a5.png
[00b7024c77104f0d83964d9f2903aff3.gif]: /images/20220828/f9466b0137c44f9bbe9d2f509c50e156.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 11]: /images/20220828/e38de10d8cba41f0b66dc8fbf2fe674a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 12]: /images/20220828/a6edf057641a486c97468bd38b6f3b8d.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 13]: /images/20220828/3215d511654546f1a6e81a22b0cd5a0c.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 14]: /images/20220828/052473e546e846b39f6cc369173f1990.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_18_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/b6a5d0a88cc94bab946281b14025e068.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAQWxsZW4gUm9zb24_size_20_color_FFFFFF_t_70_g_se_x_16 15]: /images/20220828/3ad38473e77a441f98a5dfde7485aede.png