用Qt写软件系列五:一个安全防护软件的制作(1)
引言
又有许久没有更新了。Qt,我心爱的Qt,为了找工作不得不抛弃一段时间,业余时间来学一学了。本来计划要写一系列关于Qt组件美化的博文,但是写了几篇之后就没坚持下去了。技术上倒是问题不大,主要是时间不够充裕。这段时间写几篇关于界面整体设计的博文,从最基础的界面元素开始,到最后构建一个页面元素丰富的桌面应用程序。Trojan Assessment Platform是一个原型设计项目,只是实现了有限的一部分功能。远远还称不上是一个评估平台。这里仅仅侧重于用Qt做界面的实现。
界面预览
首先还是看看整个程序运行起来是怎么回事:
图一 基本信息页面
图二 实时监控图表
图三 进程快照
用过某些安全防护软件的用户,咋一看会有一种眼熟的感觉。没错,在界面的设计上本人参考了一些成熟软件产品的视觉设计。不过这显然不是关注的重点,用户体验设计上有种说法,遵循统一的界面设计原则,能降低用户的操作成本。这也算是一种业界标准了。
头部Banner
先看看“业界标准”是怎么做的!这里选择了两款具备代表性的软件:360安全卫士和金山卫士:
图 三 360安全卫士的工具箱
图四 金山卫士的工具箱
观察以上两个截图的布局不难发现,界面布局如下:
顶部一个水平布局管理器可以搞定,左端放程序名及Logo,最右端部署按钮。这在Qt里面通过QHBoxLayout很容易做到。下面也用一个水平布局管理器,左端一个工具箱,等距放置,右边放大号的文本及Logo。好吧,开干!!
(1)按钮及文本
关于按钮的自定义绘制在前面的博文中已经有过讲解。但是前面讲的并没有覆盖到如何修改按钮的外观和背景图片。我们的做法是,从QPushButton派生出一个子类,在这个子类中实现图片的切换和状态管理。但是前提是,我们需要准备好按钮不同状态的图片(状态分别为鼠标悬停、按下、正常)。
接下来要做的工作便是派生一个子类:
// CustomPushButton.h
class CustomPushButton : public QPushButton
{
Q_OBJECT public:
explicit CustomPushButton(QWidget *parent = NULL);
~CustomPushButton(){}
enum BtnStatus{NORMAL, PRESSED, HOVER};
void setBtnBackground(const QString& path); private:
CustomPushButton(const CustomPushButton& obj);
CustomPushButton& operator=(const CustomPushButton& obj); protected:
void paintEvent(QPaintEvent *event);
void mousePressEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
void enterEvent(QEvent* event);
void leaveEvent(QEvent* event); private:
BtnStatus m_status; // record the status to take different painting action
bool isPressed; // whether the button is pressed.
QString m_imagePath;
};
我们重写了Button类的一些事件处理函数。因为我们需要对鼠标悬停、进入区域、离开区域进行自行处理,所以我们这里重写了mousePressEvent(), mouseReleaseEvent(), enterEvent(), leaveEvent()这几个方法。在类中我们还定义了几个enum常亮,用来表示按钮的不同状态,在后面将被用到。注意setBtnBackground()函数,用于设置Button的背景图片。再来看看在CPP文件中是怎么实现的:
CustomPushButton::CustomPushButton(QWidget *parent) : QPushButton(parent){} void CustomPushButton::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
QString pixmapPath;
switch (m_status) // 根据不同状态绘制不同的背景图片
{
case NORMAL:
pixmapPath = m_imagePath;
break;
case HOVER:
pixmapPath = m_imagePath+"_hover";
break;
case PRESSED:
pixmapPath = m_imagePath+"_pressed";
break;
default:
pixmapPath = m_imagePath;
break;
}
// draw the button background
painter.drawPixmap(rect(), QPixmap(pixmapPath)); } void CustomPushButton::mousePressEvent(QMouseEvent *event)
{
// only when the left button is pressed we force the repaint
if (event->button() == Qt::LeftButton)
{
isPressed = true;
m_status = PRESSED;
update();
}
} void CustomPushButton::mouseReleaseEvent(QMouseEvent *event)
{
if (event->button() == Qt::LeftButton && isPressed)
{
isPressed = false;
m_status = NORMAL;
emit clicked();
}
} void CustomPushButton::enterEvent(QEvent* event)
{
isPressed = false;
m_status = HOVER;
} void CustomPushButton::leaveEvent(QEvent* event)
{
isPressed = false;
m_status = NORMAL;
} void CustomPushButton::setBtnBackground(const QString& path)
{
m_imagePath = path;
// resize the button to fit the background picture.
setFixedSize(QPixmap(m_imagePath).size());
}
在CPP文件中的主要工作是,根据不同的按钮状态来设置不同背景图,这样才能实现不同状态的切换。注意在setBtnBackground()中设置了按钮的尺寸。这里是根据按钮图片的大小来设置的。否则的话容易导致图片大小和按钮大小不一致的现象。这样,一个自定义的按钮类就实现了。在主窗口中的调用方式:
//////////////////////////////////////////////////////////////////////////
// initialize top banner
m_topLayout = new QHBoxLayout(this); // banner的水平布局管理器
m_windowTitle = new QLabel(QStringLiteral("Trojan Assessment Platform"), this); // banner左边的文本
QFont font = const_cast<QFont&>(m_windowTitle->font());
font.setBold(true);
font.setPointSize(10);
m_windowTitle->setFont(font);
m_windowTitle->setObjectName("WhiteLabel"); // 设置object name,便于在QSS文件中使用选择器 m_settings = new CustomPushButton(this); // 设置按钮
m_minBtn = new CustomPushButton(this); // 最小化按钮
m_closeBtn = new CustomPushButton(this); // 关闭按钮
m_settings->setBtnBackground(QStringLiteral(":/SysButtons/menu")); // 设置按钮的背景图片,下同
m_settings->setToolTip(QStringLiteral("Settings")); // 设置文本提示,下同
m_minBtn->setBtnBackground(QStringLiteral(":/SysButtons/min"));
m_minBtn->setToolTip(QStringLiteral("Minimize"));
m_closeBtn->setBtnBackground(QStringLiteral(":/SysButtons/close"));
m_closeBtn->setToolTip(QStringLiteral("Close")); m_topLayout->addWidget(m_windowTitle, 0, Qt::AlignVCenter); // 文本是垂直居中的
m_topLayout->addStretch();
m_topLayout->addWidget(m_settings, 0, Qt::AlignTop);
m_topLayout->addWidget(m_minBtn, 0, Qt::AlignTop);
m_topLayout->addWidget(m_closeBtn, 0, Qt::AlignTop);
m_topLayout->setSpacing(0); // 组件之间没有空隙,这样按钮与按钮之间看起来就没有间隔了
m_topLayout->setContentsMargins(10, 0, 10, 0); // 这里设置的是整个layout与其他layout之间的margin,而spacing是layout内部组件之间的间距
效果如下:
主窗口背景
从上面的截图我们可以发现,无论是360安全卫士还是金山卫士,头部banner都有一个背景图。这个背景图是如何添加的呢?一种实现是方式是,为整个主窗体添加一个背景图,在背景图的基础上再留出一块区域放置central widget。这种效果对比如下:
好了,这下就可以中间主体部分放置任何想放的控件了。关键的实现代码:
TrojanAssessment::TrojanAssessment(QWidget *parent)
: ShadowWindow(parent)
{
// layout for main widget
m_mainLayout = new QVBoxLayout(this); /* set the width and height of the window fixed. */
setFixedSize(900, 600); splitter = new QSplitter(Qt::Horizontal, this);
splitter->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
splitter->setHandleWidth(1); // create title widget and status bar
titleWidget = new TitleWidget(this);
// remember the time when the program start
login_dt = QDateTime::currentDateTime();
restoreSettings(); // settings for main layout
m_mainLayout->addWidget(titleWidget);
m_mainLayout->addWidget(splitter);
m_mainLayout->addLayout(m_bottomLayout);
m_mainLayout->setSpacing(0);
m_mainLayout->setContentsMargins(5, 5, 5, 5);
setLayout(m_mainLayout); } void TrojanAssessment::paintEvent(QPaintEvent* event)
{
// First, we pass the paint event to parent widget to draw window shadow.
// Then, we do our specific painting stuff.
ShadowWindow::paintEvent(event);
// draw the background using the specified image.
QPainter painter(this);
painter.setPen(Qt::NoPen);
painter.setBrush(Qt::white);
painter.drawPixmap(5, 5, width()-10, height()-10, QPixmap(":/background/title_background")); // 设置主窗体的背景图片
}
状态栏
QMainWindow自带一个状态栏,这个状态栏类(QStatusBar)的一些方法可用于设置状态栏上的组件、文本等,并可进行自由组合。我们这里的处理很简单,仅仅是添加了一个图标和一个文本,具体的代码很简单:
icon_label = new QLabel(this);
icon_label->setPixmap(QPixmap(":/menu/cloud"));
icon_label->setFixedSize(QPixmap(":/menu/cloud").size());
lastrun_label = new QLabel(this);
m_bottomLayout = new QHBoxLayout(this);
m_bottomLayout->addStretch();
m_bottomLayout->addWidget(icon_label, 0, Qt::AlignCenter);
m_bottomLayout->addWidget(lastrun_label, 0, Qt::AlignCenter);
m_bottomLayout->setSpacing(5);
m_bottomLayout->setContentsMargins(0, 3, 10, 3);
由于我们主窗体是一个自定义大小的窗体,所以我们并没有使用到和QStatusBar相关的方法。由上面的窗口的布局也可以看得出来,这里的状态栏是分割出来的主窗体的一部分。使用水平布局管理器也很容易构造出复杂的布局。
代码
请访问:https://github.com/csuft/QTrojanAssessment
小结
本文讲解了如何构建一个符合“业界标准”的软件界面,重点在主窗体的布局设计。后续的博文将讲解如何添加central widget及添加banner中的工具箱。
用Qt写软件系列五:一个安全防护软件的制作(1)的更多相关文章
- 用Qt写软件系列五:一个安全防护软件的制作(3)
引言 上一篇中讲述了工具箱的添加.通过一个水平布局管理器,我们将一系列的工具按钮组合到了一起,完成了工具箱的编写.本文在前面的基础上实现窗体分割效果.堆栈式窗口以及Tab选项卡. 窗体分割 窗体分割是 ...
- 用Qt写软件系列五:一个安全防护软件的制作(2)
引言 在上一篇中讲述了主窗体的创建和设计.主窗体的无边框效果.阴影效果.拖动事件处理.窗体美化等工作在前面的博客中早就涉及,因此上篇博文中并未花费过多笔墨.这一篇继续讲述工具箱(Tool Button ...
- 系列五AnkhSvn
原文:系列五AnkhSvn AnkhSvn介绍 AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新.添加文件,而不用在命令行或资源管理器中提交.而且该插件属于开 ...
- 用Qt写软件系列三:一个简单的系统工具(上)
导言 继上篇<用Qt写软件系列二:QIECookieViewer>之后,有一段时间没有更新博客了.这次要写的是一个简单的系统工具,需求来自一个内部项目.功能其实很简单,就是查看当前当前系统 ...
- 用Qt写软件系列一:QCacheViewer(浏览器缓存查看器)
介绍 Cache技术广泛应用于计算机行业的软硬件领域.该技术既是人们对新技术探讨的结果,也是对当前软硬件计算能力的一种妥协.在浏览器中使用cache技术,可以大幅度提高web页面的响应速度,降低数据传 ...
- tensorflow笔记(五)之MNIST手写识别系列二
tensorflow笔记(五)之MNIST手写识别系列二 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7455233.html ...
- Qt写的截图软件包含源代码和可执行程序
http://blog.yundiantech.com/?log=blog&id=14 Qt写的截图软件包含源代码和可执行程序 http://download.csdn.net/downloa ...
- <p>在我们的实际软件项目中,管理团队事实上比写代码或者实现一个客户的需求更为的有挑战性。由于编程实际上是和机器打交道,而和机器打交道,仅仅要你符合机器预定的逻辑,</p>
在我们的实际软件项目中,管理团队事实上比写代码或者实现一个客户的需求更为的有挑战性. 由于编程实际上是和机器打交道.而和机器打交道,仅仅要你符合机器预定的逻辑, 一步步迈向解决这个问题的道路上一点都不 ...
- SAP ECC6安装系列五:安装后 License 的处理
原作者博客 http://www.cnblogs.com/Michael_z/ ======================================== 我发现我确实比较懒,先和各位说声抱歉了 ...
随机推荐
- CSS3之绽放的花朵(网页效果--每日一更)
今天,带来的是纯CSS3打造的效果--绽放的花朵. 先来看效果吧:亲,请点击这里 这是纯CSS3样式打造的效果,关键是采用了animation属性和transform属性.详细请看下面代码. HTML ...
- STC12C5A60S2笔记1(管脚定义)
STC12C5A60S2管脚定义 管脚1:标准IO口P1.0.ADC0 模数转换通道0.CLKOUT2 波特率发生器的时钟输出 管脚2:标准IO口P1.1.ADC1 模数转换通道1 管脚3:标准IO口 ...
- Java提高篇(二八)------TreeSet
与HashSet是基于HashMap实现一样,TreeSet同样是基于TreeMap实现的.在<Java提高篇(二七)-----TreeMap>中LZ详细讲解了TreeMap实现机制,如果 ...
- JavaScript思维导图—数组
JavaScript思维导图-来自@王子墨http://julying.com/blog/the-features-of-javascript-language-summary-maps/
- Java用来进行批量文件重命名,批量提取特定类型文件
原因: 因为在网上下载视频教程,有的名字特别长,一般都是机构或者网站的宣传,不方便直接看到视频的简介,所以做了下面的第一个功能. 因为老师发的课件中,文件夹太多,想把docx都放在同一个文件夹下面,一 ...
- EF架构~充血模型设置不被持久化的属性
回到目录 在Poco实体中,一般只有属性没有方法,这在软件设计中称为贫血模型,而在DDD领域驱动设计中,比较提倡充血模型,即你的Poco实体中,即有属性,也有操作属性的方法,注意这里说的是操作属性的方 ...
- WPF入门教程系列七——布局之WrapPanel与StackPanel(二)
三. WrapPanel WrapPanel布局面板将各个控件从左至右按照行或列的顺序罗列,当长度或高度不够是就会自动调整进行换行,后续排序按照从上至下或从右至左的顺序进行. Orientation— ...
- Mybatis中SqlMapper配置的扩展与应用(1)
奋斗了好几个晚上调试程序,写了好几篇博客,终于建立起了Mybatis配置的扩展机制.虽然扩展机制是重要的,然而如果没有真正实用的扩展功能,那也至少是不那么鼓舞人心的,这篇博客就来举几个扩展的例子. 这 ...
- Archlinux 2015.07.01 和 Windows7 双系统 安装教程
提前在windows7下给Archlinux预留一个分区,大小最好在20G以上(根据自己硬盘情况分配). 第一步,安装前的准备 从arch官网下载最新的ISO文件archlinux-2015.07.0 ...
- 转载:css3 content 生成内容
本文地址:http://www.w3cplus.com/solution/css3content/css3content.html 这篇文章挺不错的,建议看一下. content一般和:before, ...