Qt中达成无边框的窗体,使用网页来安插总体窗口

NanUI文档目录

1 自定义窗体类继承自QWidget

 

2 在构造函数中安装无边框效果

setWindowFlags(Qt::FramelessWindowHint);//无边框   
setAttribute(Qt::WA_TranslucentBackground);//背景透明

 

选用网页来陈设总体窗口

创建NanUI应用的不二等秘书诀本文不再解说,具体方法请参谋小说目录里的相关文章。本文将介绍NanUI的着力功用,用一张网页铺满全数窗体区域,并将叙述怎样运用CSS和HTML来贯彻对窗体的拖动、最大化、最小化、关闭等操作。

葡京会 1

如图所示的分界面,整个窗体的样式都以由HTML和CSS等前端本事来显现的。具体的HTML/CSS/JS代码本文不详细描述,因为这一个和NanUI的关系十分小,依据实际项指标急需,您可认为你的软件分界面设计出更棒的效劳。

在示例分界面中,大家将注重介绍系统命令菜单部分的最小化、最大化和停业按键,以至分界面右侧玉绿的可用作拖动窗体的纵向题目栏的落到实处。

用前端工夫来分析,侧面纵向题目栏其本质是一条宽度固定,中度百分之百的DIV;命令区域内的最小化、最大化和停业按键其本质是七个SPAN标签内嵌套了三个不等的FontAwsome的Logo。上边包车型大巴剧情将介绍它们是如何落到实处对承载窗体状态修改的。

葡京会,3 实现鼠标拖动窗口

    
无边框窗口未有了标题栏,不能够透过鼠标来运动窗口。可行的艺术是重写窗口的鼠标按下,移动和自由等事件。

    
为了参考相像拖动标题栏来运动窗口,能够规定当鼠标单击在某些特定的区域(比方最上端中度为100的矩形区域卡塔尔国才具移动窗口。

   
下边是一个东拉西扯框背景透明的窗体类的代码:

//头文件:BaseWidget.h
#ifndef BASEWIDGET_H
#define BASEWIDGET_H

#include <QWidget>
#include <QMouseEvent>

//继承自QWidget的自定义窗口,单击(左右键皆可)窗口并移动鼠标可拖动窗口
class BaseWidget : public QWidget
{
  Q_OBJECT
public:
  explicit BaseWidget(QWidget *parent = 0);

  //设置鼠标按下可移动窗口的区域,在子窗口中必须设置该区域
  void setAreaMovable(const QRect rt);

protected:
  void mousePressEvent(QMouseEvent *);
  void mouseMoveEvent(QMouseEvent *);
  void mouseReleaseEvent(QMouseEvent *);

private:
  QRect m_areaMovable;//可移动窗口的区域,鼠标只有在该区域按下才能移动窗口
  bool m_bPressed;//鼠标按下标志(不分左右键)
  QPoint m_ptPress;//鼠标按下的初始位置
};

#endif // BASEWIDGET_H

 

源文件:BaseWidget.cpp
#include "basewidget.h"
#include <QDebug>

BaseWidget::BaseWidget(QWidget *parent) :
  QWidget(parent)
{
  //设置无边框透明
  setWindowFlags(Qt::FramelessWindowHint);//无边框
  setAttribute(Qt::WA_TranslucentBackground);//背景透明

  m_areaMovable = geometry();
  m_bPressed = false;
}

void BaseWidget::mousePressEvent(QMouseEvent *e)
{
  //鼠标左键
  if(e->button() == Qt::LeftButton)
  {
  m_ptPress = e->pos();
  qDebug() << pos() << e->pos() << m_ptPress;
  m_bPressed = m_areaMovable.contains(m_ptPress);
  }
}

void BaseWidget::mouseMoveEvent(QMouseEvent *e)
{
  if(m_bPressed)
  {
  qDebug() << pos() << e->pos() << m_ptPress;
  move(pos() + e->pos() - m_ptPress);
  }
}

void BaseWidget::mouseReleaseEvent(QMouseEvent *)
{
  m_bPressed = false;
}

//设置鼠标按下的区域
void BaseWidget::setAreaMovable(const QRect rt)
{
  if(m_areaMovable != rt)
  {
  m_areaMovable = rt;
  }
}

 

怎样通过拖拽HTML元从来移动窗体地点

假定您须要完毕相近示例中拖动侧面深紫区域标题栏来改换窗体地方的功力,那么在该因素对应的CSS中只需点名该因素所在区域的-webkit-app-region属性值为drag就可以兑现:

.some-class{
    -webkit-app-region:drag;
}

点名此体制后,只要鼠标指针在该样式功效的区域内实施拖拽操作,那么NanUI的承前启后窗体的岗位将随鼠标的拖动而爆发变动。

但在策画分界面时,要是你愿意在可拖动成分区域内的有个别区域不采取拖动信号,那么只需求将-webkit-app-region属性值改为no-drag即可。

譬喻说示例中,四个系统命令按键实际上是包蕴在三个DIV成分内,同临时候这么些DIV设置了-webkit-app-region属性值为drag,当时你会意识,拖动那几个DIV所在区域(包蕴两个指令开关的区域卡塔尔国时窗体都落到实处了移动,但是那也阻断了这几个区域内的其它鼠标操作,包含多个指令开关的鼠标点击操作。那鲜明不是所梦想的效率。如下,该区域的HTML代码为:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

在css样式.app-sys-command-container中装置了-webkit-app-region属性值为drag,那招致了ul.sys-commands区域也展现可拖动的景况。为了幸免那些区域被默许的拖动事件影响到别的交事务件的呼应,那么就必要设置.sys-commands的样式-webkit-app-region属性值为no-drag,那么那生龙活虎部分区域将不再相应窗体拖动的事件。这部分的CSS代码为:

.demo-app > content > .app-sys-command-container {
    ...
    -webkit-app-region: drag;
    ...
}

.demo-app > content > .app-sys-command-container > .sys-commands {
    ...
    -webkit-app-region: no-drag;
    ...
}

如此那般,您就可以灵活的调节可拖动来退换窗体地点的区域了。

4 模拟“最大化”“最小化”“关闭”按钮

    
最简便的法子是接纳布局,在窗口最上端左边依次放“最大化”“最小化”“关闭”
3个按键,完毕对应的功力就可以,此处就不生机勃勃一列出。

    
假设想急忙达成无边框的窗体,只需一而再三回九转BaseWidget 类就能够。

什么样通过HTML成分来实践窗体的最大化/最小化/关闭操作

在地点的html代码片段中,浮现了示范程序的两个系统命令按键的兑现方式:

<div class="app-sys-command-container">
    <ul class="sys-commands">
        <li n-ui-command="minimize">
            <i class="fa fa-window-minimize"></i>
        </li>
        <li n-ui-command="maximize">
            <i class="fa fa-window-maximize"></i>
        </li>
        <li n-ui-command="close">
            <i class="fa fa-close"></i>
        </li>
    </ul>
</div>

当中的i标签内,能够看到不普及的html属性n-ui-command,那后生可畏性质是NanUI用来标记按键行为的专项使用属性,通过其属性值minimize/maximize/close轻松看出,通过点击具有那豆蔻梢头专项使用属性的竹签,就可以知道贯彻窗体对应的最小化/最大化/关闭操作。

特意供给提议的,在示范窗体中式茶食击最大化按键后方可观察,最大化按钮的图标从最大化转移成了还原的样式,那是透过接受Javascript监测窗体育赛事件来兑现的。

仿佛上面介绍的专项使用属性,NanUI还停放了有个别专用的平地风波。通过监听那一个事件来得以完结部分格外的功效,举个例子地方所说的最大化窗体时更换系统开关的Logo,又可能是窗体市区大旨时更动标题栏的水彩等。

NanUI 窗体育专科高校用事件

当前NanUI完成的专项使用事件有以下八个:

  • hoststatechange:
    窗体状态(最大化、最小化、还原卡塔 尔(英语:State of Qatar)产生变动时接触。
  • hostactivestate: 窗体获得或错失核心时接触。
  • hostsizechange: 窗体大小退换时接触。

因此监听那么些事件,您就能够依照必要来完毕部分一定的效果。如示例项目中,使用了jQuery来监听那多少个专项使用事件:

$(function () {
    //窗口状态改变
    $(window).on("hoststatechange", function (e) {
        console.log(e.detail);
        $("#label-form-state").text(e.detail.stateName);

    });

    //窗口激活状态改变
    $(window).on("hostactivestate", function (e) {
        console.log(e.detail);
        $("#label-activated-state").text(e.detail.stateName);

        if (e.detail) {
            if (e.detail.state === 1) {
                $("html").addClass("app-active");
            }
            else {
                $("html").removeClass("app-active");
            }
        }
    });
    //窗口尺寸改变
    $(window).on("hostsizechange", function (e) {
        console.log(e.detail);
        $("#label-size-state").text(`width:${e.detail.width} height:${e.detail.height}`);

    });

});

上述代码的求时效果,能够活动对示范程序实行调节和测量试验来查看效果。

内置Javascript对象 – NanUI

NanUI除了完结了上述的专项使用html属性n-ui-command和八个专项使用事件外,在Javascript全局情况中还停放了一个专项使用对象NanUI,通过该对象您能够查询当前NanUI和CEF的本子号,通过hostWindow中的方法来获取当前窗体的情状值,执行最大化、最小化和关闭操作。

葡京会 2

演示源码

git clone https://github.com/NetDimension/NanUI-Examples-03-Design-Your-Form-With-Html.git

社会群众体育和帮衬

GitHub
https://github.com/NetDimension/NanUI/

交流群QQ群
521854872

救助小编

风流浪漫旦您心爱笔者的办事,何况期望NanUI持续的腾飞,请对NanUI项目开展援救以此来慰勉和支撑笔者一而再三番两次NanUI的支付工作。你能够使用微信或者支付宝来围观上面包车型大巴二维码进行协助。

葡京会 3

相关文章

admin

网站地图xml地图