jinlingren的个人主页

http://www.qtcn.org/bbs/u/126501  [收藏] [复制]

jinlingren

ARM - linux - qt

  • 28

    关注

  • 21

    粉丝

  • 15

    访客

  • 等级:新手上路
  • 总积分:7
  • 男,1989-08-14

最后登录:2015-08-19

更多资料

日志

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

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

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

大家可以对比一下,如果在该界面中再添加一些内容,就会越来越像了,后续博文会继续添加内容。
下面讲解具体实现方法,当然方法不只一种,也欢迎各位博友提出自己的看法与实现方式。
1、  自定义主窗口标题栏属于操作系统,我们不能控制标题栏;因此要去掉窗口默认的标题栏,我们使用[[font=&amp]Qt::FramelessWindowHint窗口样式即可,这样就没有了默认的标题栏,这时需增加我们自定义的标题栏部件即可,再依次增加其他部件到布局中;这些都是很基本的,不多阐述,代码如下:
  1. 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安全卫士的主界面是圆角的,我们的主界面当然也要实现圆角的了;在主窗口的重绘事件中添加如下代码即可:
  1. //生成一张位图
    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、主窗口大小
主窗口缩放到一定值之后便不能缩小,所以应该设置其最小宽度和高度;
  1. setMinimumWidth(850);
    setMinimumHeight(600);

[font=&amp]OK,主界面基本看起来有点像样了,当然这个主界面还不能移动,不能缩放,没有工具栏等,这些功能在后续的博文中会阐述添加。
分类:默认分类|回复:0|浏览:504|全站可见|转载
 

Powered by phpwind v8.7 Certificate Copyright Time now is:05-02 23:03
©2005-2016 QTCN开发网 版权所有 Gzip disabled