zoukankan      html  css  js  c++  java
  • 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,主界面基本看起来有点像样了,当然这个主界面还不能移动,不能缩放,没有工具栏等,这些功能在后续的博文中会阐述添加。

  • 相关阅读:
    使用MobaXterm远程连接Ubuntu,启动Octave,界面不能正常显示
    ABP .Net Core 日志组件集成使用NLog
    ABP .Net Core Entity Framework迁移使用MySql数据库
    ABP前端使用阿里云angular2 UI框架NG-ZORRO分享
    阿里云 Angular 2 UI框架 NG-ZORRO介绍
    Visual Studio 2019 Window Form 本地打包发布猫腻
    VS Code + NWJS(Node-Webkit)0.14.7 + SQLite3 + Angular6 构建跨平台桌面应用
    ABP .Net Core 调用异步方法抛异常A second operation started on this context before a previous asynchronous operation completed
    ABP .Net Core To Json序列化配置
    .Net EF Core数据库使用SQL server 2008 R2分页报错How to avoid the “Incorrect syntax near 'OFFSET'. Invalid usage of the option NEXT in the FETCH statement.”
  • 原文地址:https://www.cnblogs.com/pamxy/p/3061200.html
Copyright © 2011-2022 走看看