Qt之实现360安全卫士主界面(一)

转自：http://www.cnblogs.com/appsucc/archive/2012/03/14/2395657.html

 

该博文只是模仿360安全卫士的主界面，并不牵涉其中的任何业务功能；重在个人见解以及界面实现；关于360安全卫士的主界面，我想大家都见到过，毕竟基本大部分人都安装过这个软件，基于我对其界面的个人见解，对主界面分割为四部分：分别为标题栏、工具栏、内容区域、状态栏，分割图例如下图所示：

      由于标题栏、工具栏、内容区域和状态栏都不是标准的部件，因此只能子类化部件进行自定义开发；主窗口继承于QFrame，而标题栏、工具栏、内容区域与状态栏都继承于QWidget；最后在主窗口中使用QVBoxLayout布局将其他部件加入到该布局中即可，其中标题栏和工具栏以及状态栏都是固定高度的，宽度和内容区域是随窗口缩放而缩放的。
      使用Qt实现主界面的效果如下图所示（按【Alt+F4】键退出主界面）：

      大家可以对比一下，如果在该界面中再添加一些内容，就会越来越像了，后续博文会继续添加内容。
      下面讲解具体实现方法，当然方法不只一种，也欢迎各位博友提出自己的看法与实现方式。

1、自定义主窗口

      标题栏属于操作系统，我们不能控制标题栏；因此要去掉窗口默认的标题栏，我们使用Qt::FramelessWindowHint窗口样式即可，这样就没有了默认的标题栏，这时需增加我们自定义的标题栏部件即可，再依次增加其他部件到布局中；这些都是很基本的，不多阐述，代码如下：

setWindowFlags(Qt::FramelessWindowHint);
//创建标题栏m_pTitleBar = new TitleBar(this);
//创建工具栏m_pToolBar = new ToolBar(this);
//创建内容区域m_pContentWidget = new ContentWidget(this);
//创建状态栏m_pStatuBar = new StatuBar(this);

//创建布局m_pMainLayout = new QVBoxLayout(this);
//将部件加入到布局中m_pMainLayout->addWidget(m_pTitleBar);
m_pMainLayout->addWidget(m_pToolBar);
m_pMainLayout->addWidget(m_pContentWidget);
m_pMainLayout->addWidget(m_pStatuBar);
//设置间距与边缘空白m_pMainLayout->setSpacing(0);
m_pMainLayout->setContentsMargins(0,0,0,0);

2、主窗口背景以及圆角实现
      主窗口背景使用图片平铺实现，当然使用Qt的样式表是最为简单方便的了；Qt的样式表格式和css基本一致；如果对css熟悉的话，对Qt的样式表(qss)就会很快熟悉起来；

setStyleSheet("QFrame {background-image:url(:/image/frame.jpg);border:1px solid black;}");

      360安全卫士的主界面是圆角的，我们的主界面当然也要实现圆角的了；在主窗口的重绘事件中添加如下代码即可：

//生成一张位图QBitmap objBitmap(size());
//QPainter用于在位图上绘画QPainter painter(&objBitmap);
//填充位图矩形框(用白色填充)painter.fillRect(rect(),Qt::white);
painter.setBrush(QColor(0,0,0));
//在位图上画圆角矩形(用黑色填充)painter.drawRoundedRect(this->rect(),10,10);
//使用setmask过滤即可setMask(objBitmap);

3、主窗口大小

      主窗口缩放到一定值之后便不能缩小，所以应该设置其最小宽度和高度；

setMinimumWidth(850);
setMinimumHeight(600);

      OK，主界面基本看起来有点像样了，当然这个主界面还不能移动，不能缩放，没有工具栏等，这些功能在后续的博文中会阐述添加。