摘要:
Qt5主窗口是大部分Qt应用使用的基本界面,常见应用都会通过对主窗口进行界面布局来实现。
一、QT5主窗口构成
1、基本元素
QMainWindow是一个为用户提供主窗口程序的类。
包含一个菜单栏(menubar)、多个工具栏(tool bars)、多个锚接部件(dock widgets)、一 个状态栏(status bar)及一个中心部件(central widget),是许多应用程序的基础。如文本编辑器、图片编辑器等。其界面布局如下图。
(1)、 菜单栏
菜单是一系列命令的列表。为了实现菜单、工具栏按钮、键盘快捷键等命令的一致性,Qt使用动作(Action)来表示这
些命令。Qt的菜单就是由一系列的QAction动作对象构成的列表,而菜单栏则是包容菜单的面板,它位于主窗口顶部、
主窗口标题栏的下面。一个主窗口最多只有一个菜单栏。
(2)、状态栏
状态栏通常显示GUI应用程序的一些状态信息,它位于主窗口的最底部。用户可以在状态栏上添加、使用Qt窗口部件,
一个主窗口最多只有一个状态栏。
(3)、工具栏
工具栏是由一系列的类似于按钮的动作排列而成的面板,它通常由一些经常使用的命令(动作)组成。工具栏位于菜单
栏的下面、状态栏的上面,可以停靠在主窗口的上、下、左、右四个方向上。一个主窗口可以包含多个锚接部件。
(4)、中心部件
中心部件处在锚接部件区的内部、主窗口的中心,一个主窗口的中心只有一个中心部件。
2、典型案例:文本编辑器
(1)、首先,介绍文件操作功能,包括新建一个文件,利用标准文件对话框QFileDialog类打开一个已存在的文件,利用
QFile和QTextStream读取文件内容,
(2)、打印文件(分文本打印和图像打印)。接着,介绍图像处理软件中的常用功能,包括图片的缩放、旋转及镜像等坐
标变换,使用QMatrix实现图像的各种坐标变换。
(3)、然后,开发文本编辑功能,通过在工具栏上设置文字字体、字号大小、加粗、斜体、下画线及字体颜色等快捷按
钮的实现,介绍了在工具栏中嵌入控件的方法。
(4)、最后是排版功能,通过选择某种排序方式实现对文本排序,以及实现文本对齐(包括左对齐、右对齐、居中对齐和
两端对齐)和撤销、重做的方法。
3、菜单与工具栏的实现
(1)、动作(Action) 的实现
以下是实现基本文件操作的动作(Action) 的代码。
void ImgProcessor::createActions()
{
//"打开"动作
openFileAction =new QAction(QIcon("open.png"),tr("打开"),this);
openFileAction->setShortcut(tr("Ctrl+O"));
openFileAction->setStatusTip(tr("打开一个文件"));
connect(openFileAction,SIGNAL(triggered()),this,SLOT(ShowOpenFile()));
//"新建"动作
NewFileAction =new QAction(QIcon("new.png"),tr("新建"),this);
NewFileAction->setShortcut(tr("Ctrl+N"));
NewFileAction->setStatusTip(tr("新建一个文件"));
connect(NewFileAction,SIGNAL(triggered()),this,SLOT(ShowNewFile()));
//"退出"动作
exitAction =new QAction(tr("退出"),this);
exitAction->setShortcut(tr("Ctrl+Q"));
exitAction->setStatusTip(tr("退出程序"));
connect(exitAction,SIGNAL(triggered()),this,SLOT(close()));
//"复制"动作
copyAction =new QAction(QIcon("copy.png"),tr("复制"),this);
copyAction->setShortcut(tr("Ctrl+C"));
copyAction->setStatusTip(tr("复制文件"));
connect(copyAction,SIGNAL(triggered()),showWidget->text,SLOT(copy()));
//"剪切"动作
cutAction =new QAction(QIcon("cut.png"),tr("剪切"),this);
cutAction->setShortcut(tr("Ctrl+X"));
cutAction->setStatusTip(tr("剪切文件"));
connect(cutAction,SIGNAL(triggered()),showWidget->text,SLOT(cut()));
//"粘贴"动作
pasteAction =new QAction(QIcon("paste.png"),tr("粘贴"),this);
pasteAction->setShortcut(tr("Ctrl+V"));
pasteAction->setStatusTip(tr("粘贴文件"));
connect(pasteAction,SIGNAL(triggered()),showWidget->text,SLOT(paste()));
//"关于"动作
aboutAction =new QAction(tr("关于"),this);
connect(aboutAction,SIGNAL(triggered()),this,SLOT(QApplication::aboutQt()));
}
以下是实现打印文本和图像、图像缩放、旋转和镜像的动作(Action) 的代码。
//"打印文本"动作
PrintTextAction =new QAction(QIcon("printText.png"),tr("打印文本"), this);
PrintTextAction->setStatusTip(tr("打印一个文本"));
connect(PrintTextAction,SIGNAL(triggered()),this,SLOT(ShowPrintText()));
//"打印图像"动作
PrintImageAction =new QAction(QIcon("printImage.png"),tr("打印图像"), this);
PrintImageAction->setStatusTip(tr("打印一幅图像"));
connect(PrintImageAction,SIGNAL(triggered()),this,SLOT(ShowPrintImage()));
//"放大"动作
zoomInAction =new QAction(QIcon("zoomin.png"),tr("放大"),this);
zoomInAction->setStatusTip(tr("放大一张图片"));
connect(zoomInAction,SIGNAL(triggered()),this,SLOT(ShowZoomIn()));
//"缩小"动作
zoomOutAction =new QAction(QIcon("zoomout.png"),tr("缩小"),this);
zoomOutAction->setStatusTip(tr("缩小一张图片"));
connect(zoomOutAction,SIGNAL(triggered()),this,SLOT(ShowZoomOut()));
//实现图像旋转的动作(Action)
//旋转90°
rotate90Action =new QAction(QIcon("rotate90.png"),tr("旋转90°"),this);
rotate90Action->setStatusTip(tr("将一幅图旋转90°"));
connect(rotate90Action,SIGNAL(triggered()),this,SLOT(ShowRotate90()));
//旋转180°
rotate180Action =new QAction(QIcon("rotate180.png"),tr("旋转180°"), this);
rotate180Action->setStatusTip(tr("将一幅图旋转180°"));
connect(rotate180Action,SIGNAL(triggered()),this,SLOT(ShowRotate180()));
//旋转270°
rotate270Action =new QAction(QIcon("rotate270.png"),tr("旋转270°"), this);
rotate270Action->setStatusTip(tr("将一幅图旋转270°"));
connect(rotate270Action,SIGNAL(triggered()),this,SLOT(ShowRotate270()));
//实现图像镜像的动作(Action)
//纵向镜像
mirrorVerticalAction =new QAction(tr ("纵向镜像"),this);
mirrorVerticalAction->setStatusTip(tr("对一张图作纵向镜像"));
connect(mirrorVerticalAction,SIGNAL(triggered()),this,SLOT(ShowMirrorVertical()));
//横向镜像
mirrorHorizontalAction =new QAction(tr("横向镜像"),this);
mirrorHorizontalAction->setStatusTip(tr("对一张图作横向镜像"));
connect(mirrorHorizontalAction,SIGNAL(triggered()),this,SLOT(ShowMirrorHorizontal()));
//排序:左对齐、右对齐、居中和两端对齐
actGrp =new QActionGroup(this);
leftAction =new QAction(QIcon("left.png"),"左对齐",actGrp);
leftAction->setCheckable(true);
rightAction =new QAction(QIcon("right.png"),"右对齐",actGrp);
rightAction->setCheckable(true);
centerAction =new QAction(QIcon("center.png"),"居中",actGrp);
centerAction->setCheckable(true);
justifyAction =new QAction(QIcon("justify.png"),"两端对齐",actGrp);
justifyAction->setCheckable(true);
connect(actGrp,SIGNAL(triggered(QAction*)),this,SLOT(ShowAlignment(QAction*)));
//实现撤销和重做的动作(Action)
//撤销和重做
undoAction =new QAction(QIcon("undo.png"),"撤销",this);
connect(undoAction,SIGNAL(triggered()),showWidget->text,SLOT(undo()));
redoAction =new QAction(QIcon("redo.png"),"重做",this);
connect(redoAction,SIGNAL(triggered()),showWidget->text,SLOT(redo()));
(2)、菜单(Menus)的实现
在实现了各个动作之后,需要将它们通过菜单、工具栏或快捷键的方式体现出来,以下是菜单的实现函createMenus()代码。
void ImgProcessor::createMenus()
{
//文件菜单
fileMenu =menuBar()->addMenu(tr("文件"));
fileMenu->addAction(openFileAction);
fileMenu->addAction(NewFileAction);
fileMenu->addAction(PrintTextAction);
fileMenu->addAction(PrintImageAction);
fileMenu->addSeparator();
fileMenu->addAction(exitAction);
//缩放菜单
zoomMenu =menuBar()->addMenu(tr("编辑"));
zoomMenu->addAction(copyAction);
zoomMenu->addAction(cutAction);
zoomMenu->addAction(pasteAction);
zoomMenu->addAction(aboutAction);
zoomMenu->addSeparator();
zoomMenu->addAction(zoomInAction);
zoomMenu->addAction(zoomOutAction);
//旋转菜单
rotateMenu =menuBar()->addMenu(tr("旋转"));
rotateMenu->addAction(rotate90Action);
rotateMenu->addAction(rotate180Action);
rotateMenu->addAction(rotate270Action);
//镜像菜单
mirrorMenu =menuBar()->addMenu(tr("镜像"));
mirrorMenu->addAction(mirrorVerticalAction);
mirrorMenu->addAction(mirrorHorizontalAction);
}
(3)、工具栏(ToolBars) 的实现
接下来实现相对应的工具栏create ToolBars(),主窗口的工具栏上可以有多个工具条,通常采用一个菜单对应一个工具
条的方式,也可根据需要进行工具条的划分。代码如下:
void ImgProcessor::createToolBars()
{
//文件工具条
fileTool =addToolBar("File");
fileTool->addAction(openFileAction);
fileTool->addAction(NewFileAction);
fileTool->addAction(PrintTextAction);
fileTool->addAction(PrintImageAction);
//编辑工具条
zoomTool =addToolBar("Edit");
zoomTool->addAction(copyAction);
zoomTool->addAction(cutAction);
zoomTool->addAction(pasteAction);
zoomTool->addSeparator();
zoomTool->addAction(zoomInAction);
zoomTool->addAction(zoomOutAction);
//旋转工具条
rotateTool =addToolBar("rotate");
rotateTool->addAction(rotate90Action);
rotateTool->addAction(rotate180Action);
rotateTool->addAction(rotate270Action);
//撤销和重做工具条
doToolBar =addToolBar("doEdit");
doToolBar->addAction(undoAction);
doToolBar->addAction(redoAction);
//字体工具条
fontToolBar =addToolBar("Font");
fontToolBar->addWidget(fontLabel1);
fontToolBar->addWidget(fontComboBox);
fontToolBar->addWidget(fontLabel2);
fontToolBar->addWidget(sizeComboBox);
fontToolBar->addSeparator();
fontToolBar->addWidget(boldBtn);
fontToolBar->addWidget(italicBtn);
fontToolBar->addWidget(underlineBtn);
fontToolBar->addSeparator();
fontToolBar->addWidget(colorBtn);
//排序工具条
listToolBar =addToolBar("list");
listToolBar->addWidget(listLabel);
listToolBar->addWidget(listComboBox);
listToolBar->addSeparator();
listToolBar->addActions(actGrp->actions());
}
二、QT5文件操作功能
1、新建文件
(1) 打开“imgprocessor.h” 头文件,添加‘ protected slots:”
protected slots:
void ShowNewFile(); //新建文件
(2)在createActions()函 数的“"新建"动作”最后添加事件关联:
connect(NewFileAction,SIGNAL(triggered(),this,SLOT(ShowNewiFile()));
(3) 实现新建文件功能的函数ShowNewFile()如下:
void ImgProcessor::ShowNewFile()
{
ImgProcessor *newlmgProcessor =new ImgProcessor;
newlmgProcessor->show();
}
(4)、运行程序,单击"文件"->“新建”命令按钮,弹出新的文件编辑窗口:
2、打开文件
(1) 在“imgprocessor.h” 头文件中添加“protected slots:” 变量:
void ShowOpenFile);
(2)在createActions()函数的 “"打开”动作” 最后添加事件关联:
connect(openFileAction,SIGNAL (riggred),this,SLOT(ShowOpenile)));
(3)实现打开文件功能的函数ShowOpenFile()如下:
void Imgrocessor:ShowOpenFile()
{
fileName =QFileDialoggetOpenFileName(this);
if(fileName.isEmpty())
{
if(showWidget->text->document()->isEmpty0))
{
loadFile(ileName);
}
else
{
ImgProcessor *newlmgProcessor =new ImgProcessor;
newlmgProcessor->show();
newlmgProcessor->loadilfileName);
}
}
}
其中,loadFile()函数的实现如下,该函数利用QFile和QTextStream完成具体读取文件内容的工作:
void ImgProcessor:loadFile(QString filename)
{
print("file name:%s\n" ,ilename.data(); //显示文件的名字
QFile file(filename); //
if(file.open(QlODevice::ReadOnly|QlODevice:Text))
{
QTextStream textStream(&file);
while(!textStream.atEnd())
{
showWidget->text->append(textStream.readLinel();
printf("read line\n");
}
print("end\n");
}
}
在此详细说明标准文件对话框QFileDialog的getOpenFileName()静态函数各个参数的作用,其他文件对话框类中相关的静态函数的参数有与其类似之处。.
QString QFileDialog::getOpenFileName
(
QWidget* parent=0,
const QString & caption=QString(),
const QString & dir=QString(),
const QString & filter=QString),
QString * selectedFilter=0,
Options options=0
);
(4)、在该源文件的开始部分添加如下头文件:
#include <QFileDialog>
#include <QFile>
#include <QTextStream>
(5)、运行程序,单击“文件”→“打开”命令或单击工具栏.上的按钮,弹出“打开”对话框,选择某个文件,单击“打开”按
钮,文本编辑框中将显示出该文件的内容,如下图所示。
三、打印文件
1、文本打印
(1)、打印文本在文本编辑工作中经常使用,下面将介绍如何实现文本打印功能。实现后的效果如下图所示。
(2)、实现步骤
在头文件中添加“protectedslots:”变量:
void ShowPrintText();
在createActions()函数的 “打印文本"动作”最后添加事件关联:
connect(PrintTextAction,SIGNAL(triggered),this,SLOT(ShowPrintText());
实现打印文本功能的函数ShowPrintText()如下:
void ImgProcessr:ShowPrintText()
{
QPrinter printer;
QPrintDialog printDialog(&printer,this); //新建一个QPrintDialog 对话框
if(printDialog.exec()) //对话框执行动作
{
QTextDocument *doc =showWidget->text->document();
doc->print(&printer);
}
}
在该源文件的开始部分添加如下头文件:
#include <QPrintDialog>
#include <QPrinter>
(3)运行程序,单击“文件”→“打印文本”命令或工具栏上的按钮,弹出标准打印对话框,如上图所示。
2、图像打印
(1) 在头文件中添加“ protected slots:” 变量:
void ShowPrintlmage();
(2)在createActions()函 数的最后添加事件关联:
connect(PrintlmageAction,SIGNAL(triggered),this,SLOT(ShowPrintlmage()));
(3)实现打印图像功能的ShowPrintlmage()函数如下:
void ImgProcessor:ShowPrintlmage()
{
QPrinter printer; //定义一个QPrinter类成员
QPrintDialog printDialog(&printer,this); //新建QPrintDialog类的printDialog打印对话框
if(printDialog.exec() //执行对话框内的操作
{
QPainter painter(&printer);
QRect rect =painter.viewport();
QSize size = img.size();
size.scale(rect.size(),Qt:KeepAspectRatio);
painter.setViewport(rect.c),rect.y(),size.width),size.height();
painter.setWindow(img.rect();
painter.drawlmage(0,0,img);
}
}
(4)在该源文件的开始部分添加如下头文件:
#include <QPainter>
(5) 运行程序,单击“文件”→“打印图像”命令或单击工具栏上的|按钮,弹出标准打印对话框,显示效果下图所示。