【Qt学习笔记03】UI设计

一、QMainWindow

1.1 QMainWindow结构概览

QMainWindow由一个菜单栏、多个工具栏、多个铆接部件、一个状态栏、一个中心部件组成。各部件的具体布局区域如图所示。

上面图片所用到的代码及注释附在本文的最后

1.2 菜单栏QMenuBar

菜单栏是窗口最上方的区域，基本每个软件的标题栏下面都会有这么一行，这就是菜单栏。

注意：菜单栏只能创建一个

代码示例

引入菜单栏QMenuBar

#include <QMenuBar>

菜单栏创建

QMenuBar * bar = menuBar();

将菜单栏放入到窗口中

setMenuBar(bar);

创建菜单栏的菜单（比如文件、编辑、工具、帮助等）

QMenu * fileMenu = bar->addMenu("文件");
QMenu * editMenu = bar->addMenu("编辑");

创建菜单项（比如文件菜单下的新建、打开项）

QAction * newAction = fileMenu->addAction("新建");
//添加分割线
fileMenu->addSeparator();
QAction * openAction = fileMenu->addAction("打开");

1.3 工具栏QToolBar

工具栏一般位于菜单栏下方，或者左右两侧、或底部。

注意：工具栏可以创建多个。

代码示例

引入工具栏头文件

#include <QToolBar>

创建工具栏（工具栏创建后可以随意拖动）

QToolBar * toolBar = new QToolBar(this);

将工具栏放入窗口，Qt::TopToolBarArea是默认放上侧，以此类推。

addToolBar(Qt::LeftToolBarArea,toolBar);

设置只允许左右停靠

toolBar->setAllowedAreas( Qt::LeftToolBarArea | Qt::RightToolBarArea );

设置浮动（可以拖拽，但移动不了）

toolBar->setFloatable(false);

设置移动（总开关，设为False后无法拖拽）

toolBar->setMovable(false);

在工具栏中添加内容

//将刚才创建的菜单项Action添加到工具栏中
toolBar->addAction(newAction);
//添加分割线
toolBar->addSeparator();
//添加另一个菜单项
toolBar->addAction(openAction);
//工具栏中添加控件
QPushButton * btn = new QPushButton("aa" , this);
toolBar->addWidget(btn);

1.4 状态栏QStatusBar

状态栏是窗口最低不，显示软件状态的栏。（例如ppt、word最下面显示字数、幻灯片数量的那一行）

注意：状态栏最多有一个。

代码示例

引入状态栏头文件

#include <QStatusBar>

创建状态栏

QStatusBar * stBar = statusBar();

将状态栏设置到窗口

setStatusBar(stBar);

在菜单栏中放入标签控件

//引入头文件
#include <QLabel>

QLabel * label = new QLabel("提示信息",this);
stBar->addWidget(label);

QLabel * label2 = new QLabel("右侧提示信息",this);
stBar->addPermanentWidget(label2);

1.5 铆接部件QDockWidget

铆接部件又称为浮动窗口，是窗口中，在中心窗口周围的部件，通常是可以修改位置，可以拖出来成为单独的窗口，也可以双击使其回到父窗口中。

常见的铆接部件包括（IDE左侧或右侧的项目栏、底部的编译输出栏等）

铆接部件可以有多个

代码示例

引入头文件

#include <QDockWidget>

创建铆接部件

QDockWidget * dockWidget = new QDockWidget("浮动",this);

将铆接部件添加到窗口中

addDockWidget(Qt::BottomDockWidgetArea,dockWidget);

设置铆接部件的停靠区域，例如只允许上下（与工具栏设置参数一致）

dockWidget->setAllowedAreas( Qt::TopDockWidgetArea | Qt::BottomDockWidgetArea );

1.6 中心部件QTextEdit

中心部件就是一个程序中心的部分，例如IDE的程序编写区域，WPS的文字编辑区域等。

中心部件只能设置一个。

代码示例

引入头文件

#include <QTextEdit>

创建中心部件

QTextEdit * edit = new QTextEdit(this);

设置中心部件到父窗口

setCentralWidget(edit);

中间白色的区域就是中心部件。

1.7 UI工具设计图形界面

在Qt中也提供了图形化的UI设计界面。

通过双击项目文件中的xxx.ui文件，就可以打开设计页面。

在这里，上文提到的所有项目（菜单栏、工具栏等），以及各自的属性，都可以直接拖拽放置，并在右下角修改其属性。

创建的控件，在代码中通过ui->abcd可以找到所有控件。

但是这种布局方式所产生的代码结构较差。

通常是在代码中编写大概，然后在设计中进行微调。

二、资源文件

很多时候，在窗口中我们不仅需要文字，还需要添加一些图标，图片等，让应用显得更人性化。这就需要我们在项目中导入资源文件。

2.1 资源文件的导入

1. 首先将图片复制到项目文件夹中（注意图片必须是png格式，直接更改用户名无效，必须通过图片编辑软件转换）

2. 右键项目名 -> 添加新文件 -> Qt -> QtResourceFile

3. 得到一个.qrc文件，右键，open in edit

4. 添加 -> 前缀，自己设置一个前缀

5. 添加 -> 文件 -> 找到图片文件夹 -> 选中所有图片 -> 打开

6. 可以看到.qrc文件下方多了一个“前缀”文件夹

2.2 代码中使用

代码中使用示例如下：

`ui->actionNew->setIcon(QIcon(``":/前缀/图片文件夹名/图片文件名.png"``));`

附

//mainwindow.cpp

#include "mainwindow.h"
#include <QMenuBar>
#include <QToolBar>
#include <QDebug>
#include <QPushButton>
#include <QStatusBar>
#include <QLabel>
#include <QDockWidget>
#include <QTextEdit>

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    //重置窗口大小
    resize(600,400);

    //菜单栏  只能最多有一个
    //菜单栏创建
    QMenuBar * bar = menuBar();
    //将菜单栏放入到窗口中
    setMenuBar(bar);

    //创建菜单
    QMenu * fileMenu = bar->addMenu("文件");
    QMenu * editMenu = bar->addMenu("编辑");

    //创建菜单项
    QAction * newAction = fileMenu->addAction("新建");
    //添加分割线
    fileMenu->addSeparator();
    QAction * openAction = fileMenu->addAction("打开");




    //工具栏  可以有多个
    QToolBar * toolBar = new QToolBar(this);
    addToolBar(Qt::LeftToolBarArea,toolBar);

    //后期设置 只允许 左右停靠
    toolBar->setAllowedAreas( Qt::LeftToolBarArea | Qt::RightToolBarArea );

    //设置浮动
    toolBar->setFloatable(false);

    //设置移动 (总开关)
    toolBar->setMovable(false);

    //工具栏中可以设置内容
    toolBar->addAction(newAction);
    //添加分割线
    toolBar->addSeparator();
    toolBar->addAction(openAction);
    //工具栏中添加控件
    QPushButton * btn = new QPushButton("aa" , this);
    toolBar->addWidget(btn);


    //状态栏 最多有一个
    QStatusBar * stBar = statusBar();
    //设置到窗口中
    setStatusBar(stBar);
    //放标签控件
    QLabel * label = new QLabel("提示信息",this);
    stBar->addWidget(label);

    QLabel * label2 = new QLabel("右侧提示信息",this);
    stBar->addPermanentWidget(label2);

    //铆接部件 （浮动窗口） 可以有多个
    QDockWidget * dockWidget = new QDockWidget("浮动",this);
    addDockWidget(Qt::BottomDockWidgetArea,dockWidget);
    //设置后期停靠区域，只允许上下
    dockWidget->setAllowedAreas( Qt::TopDockWidgetArea | Qt::BottomDockWidgetArea );


    //设置中心部件 只能一个
    QTextEdit * edit = new QTextEdit(this);
    setCentralWidget(edit);
}

MainWindow::~MainWindow()
{

}