整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

Qt使用QSS

QSS介绍

QSS称为QtStyleSheets也就是Qt样式表，它是Qt提供的一种用来自定义控件外观的机制。QSS大量参考了CSS的内容，只不过QSS的功能比CSS要弱很多，体现在选择器要少，可以使用的QSS属性也要少很多，并且并不是所有的属性都可以用在Qt的所有控件上。

CSS，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

借用CSS的灵感，Qt也支持Qt自己的CSS，简称QSS。同CSS相似，CSS的主要功能与最终目的都是能使界面的表现与界面的元素分离，即质与形的分离，就如同一个人可以在不同的时候穿上不同的衣服一样，CSS机制的引入，使得设计一种皮肤与界面控件分离的软件成为可能，应用程序也能像web界面那样随意地改变外观。

2 QSS在Qt中的使用办法

2.1 新建QSS文件

1) 在Qt项目文件夹中，“右键”---“新建”---“文本文档”

2) 在文本文档中写入样式表内容

/* 正常状态或者鼠标松开按钮的状态，按钮颜色 */
QPushButton
{
    background-color:rgb(240,255,255);
    color: rgb(0, 0, 2);
    border-style: outset;
    border-color: beige;
    border-radius: 10px;
}

/* hover按钮悬浮，鼠标悬浮在按钮上的状态，按钮颜色 */
 QPushButton:hover 
{
    background-color:rgb(14, 220, 0);
    border-radius: 10px;
    color: rgb(0, 0, 0);
}

 /* 鼠标按下按钮时的状态，按钮颜色 */
QPushButton:checked 
{
    background-color:rgb(14, 170, 79);
    border-radius: 10px;
    color: rgb(255, 255, 0);
}

3) 将文件名后缀名更改为qss，如更改为“myQss.qss”

2.2 新建资源文件

“右键项目”---“添加新文件”，选择“Qt类”---再选择“Qt Resource File”

点击“choose”，可得到

在“名称”中添加资源文件名“qss”，然后点击“下一步”，得到

点击完成，可以看到添加的资源文件如图所示

2.3 新建Prefix为"/"的空文件夹

右键“qss.qrc”---“Add Prefix”

在“Prefix”中添加“/”，指定文件夹名为“/”，然后点击“OK”

2.4 将qss文件加入qrc资源文件中

右键“/”文件夹，点击“添加现有文件”，选择“myQss.qss”

点击“打开”，就将“myQss.qss”文件加入资源文件“qss.qrc”中啦

2.5 创建QFile对象

通过传入路径\文件名的方式创建一个QFile对象，以readonly的方式打开，然后readAll，最后qApp->setStyleSheet就可以使qss生效。

在main.cpp中，添加以下代码：

#include "mainwindow.h"
#include <QApplication>
#include <QFile>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    /*****************************************/
    QString qss;
    QFile qssFile(":/myQss.qss");
    qssFile.open(QFile::ReadOnly);
    if(qssFile.isOpen())
    {
      qss = QLatin1String(qssFile.readAll());
      qApp->setStyleSheet(qss);
      qssFile.close();
    }
    /*****************************************/
    MainWindow w;
    w.show();
    return a.exec();
}

3 运行效果

运行程序后，按键后出现绿色背景


点击领取Qt学习资料+视频教程~下方链接

http://docs.qq.com/doc/DUlVwTW1FZlZuWE9G

用百度在线地图两个关键点，一是html页面准备；二是qt 与js 语言的交互。

1，html页面的准备，双击页面就可以出现如下效果。


主要代码：

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<title>基于GPS的位置追踪及地理围栏</title>

<style type="text/css">

body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}

p{margin-left:5px; font-size:14px;}

</style>

<script src="./qwebchannel.js"></script>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=FoLM5Y9oQWzihtXGq5cmCMZsC7ElrrLw"></script>

</head>

<body>

<div id="allmap"></div>

<script type="text/javascript">

// 百度地图API功能

//地图初始化

var map = new BMap.Map("allmap");


var navigationControl = new BMap.NavigationControl({

anchor: BMAP_ANCHOR_TOP_LEFT,

type: BMAP_NAVIGATION_CONTROL_LARGE,

enableGeolocation: true

});

map.addControl(navigationControl); // 添加平移缩放控件

map.addControl(new BMap.ScaleControl()); // 添加比例尺控件

var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:true});

map.addControl(overviewControl); // 添加缩略图控件控件

var mapType1 = new BMap.MapTypeControl({anchor: BMAP_ANCHOR_TOP_RIGHT,mapTypes:[BMAP_NORMAL_MAP,BMAP_HYBRID_MAP]});

map.addControl(mapType1); // 添加地图类型控件

map.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用

//map.enableContinuousZoom(); //启用地图惯性拖拽，默认禁用

map.enableKeyboard(); //启用键盘移动地图

map.enableDragging(); //启用地图拖拽

map.enableDoubleClickZoom(); //启用双击放大

//map.setMapType(BMAP_HYBRID_MAP);

map.centerAndZoom(new BMap.Point(55.000883333 , 50.234851667), 5);

map.setCurrentCity("长沙");

</script>

</html>

2，qt 与js 语言的交互

qt　端加载ｈｔｍｌ页面。注册相应通道

m_map = new QWebEngineView(this);


QWebChannel *pWebChannel = new QWebChannel(m_map->page()); //为网页视图页面创建通道channel

pInteractObj = new TInteractObj(this); //创建通道对象用于与JS交互

//"interactObj"为注册名，JS调用的对象名必须和它相同

pWebChannel->registerObject(QStringLiteral("interactObj"), pInteractObj);//注册通道对象供JS调用

m_map->page()->setWebChannel(pWebChannel); /设置通道

//当网页返回数据，则会返回到通道对象pInteractObj中，然后再发送信号到主类OnReceiveMessageFromJS中处理

connect(pInteractObj, &TInteractObj::SigReceivedMessFromJS, this, &MapLoaction::OnReceiveMessageFromJS);


//向网页发送信号需要利用通道对象pInteractObj的SigSendMessageToJS信号

connect(this, &MapLoaction::SigSendMessageToJS, pInteractObj, &TInteractObj::SigSendMessageToJS);


QWebEnginePage *page = m_map->page();

page->load(QUrl("file:///./testData/map.html"));

//map->resize(1000, 1000);

ui.gridLayout_pos->addWidget(m_map);

m_map->show();

ｈｔｍｌ 页面中调用 ｑｔ函数

window.onload = function() {

new QWebChannel(qt.webChannelTransport, function(channel)

{ //浏览器内核自带

var interactObj = channel.objects.interactObj; //注册对象名

// alert("success1");


//Web connect the Qt signal, then Qt can call "output" function

interactObj.SigSendMessageToJS.connect(function(fun,lng,lati,strdev,dg)

{

//alert(lng+" success:"+lati);

if(fun==0)

updateDataTrail(lng,lati);

else

{

x_point=lng;

y_point=lati;

//clearAllMarker();

myAddMarker(strdev);

}

//if(str == "ok")

//{

//alert("success");

//interactObj.JSSendMessage(1,2); //发送消息

//}

});

});

}

最终效果，本图片为我们实际应用中的一个效果图。

# 一、前言

从Qt5.14开始，官方的在线安装提供了qt for webassembly构建套件，这对很多小白来说绝对是个好消息，也绝对是个好东西，好消息是不用再去交叉编译自己生成qt for webassembly的qt库，在线安装版本直接就给你安装好，很多小白就困在如何交叉编译qt for webassembly的qt库上了，环境简直是弄哭了，望而却步；好东西是你可以直接将你现有的qt程序直接编译成wasm文件然后直接网页运行，注意这里不是说activex的形式在IE中运行，而是直接各种支持wasm的浏览器上直接运行，比如谷歌浏览器、火狐浏览器、edge浏览器等，反正主流的浏览器都支持，是不是很牛逼，大致的原理就是借助emsdk中的emscripten编译器将qt的程序直接静态编译生成wasm文件，然后同时生成对应的js文件和html文件，js文件负责加载wasm文件进行编译使用canvs绘制程序。理论上c++程序执行效率要比js高，个人体验下来也是效率蛮高，最激动的就是一行代码不用修改，直接就可以编译成网页程序。

WebAssembly介绍：

- WebAssembly是一种可以使用非JavaScript编程语言编写代码并且能在浏览器上运行的技术方案。

- WebAssembly有一套完整的语义，实际上wasm是体积小且加载快的二进制格式，其目标就是充分发挥硬件能力以达到原生执行效率。

- WebAssembly运行在一个沙箱化的执行环境中，甚至可以在现有的JavaScript虚拟机中实现。在web环境中，WebAssembly将会严格遵守同源策略以及浏览器安全策略。

- WebAssembly设计了一个非常规整的文本格式用来、调试、测试、实验、优化、学习、教学或者编写程序。可以以这种文本格式在web页面上查看wasm模块的源码。

- WebAssembly在web中被设计成无版本、特性可测试、向后兼容的。WebAssembly可以被JavaScript调用，进入JavaScript上下文，也可以像WebAPI一样调用浏览器的功能。当然，WebAssembly不仅可以运行在浏览器上，也可以运行在非web环境下。

1. qt+widget编译的程序网页地址：

[https://feiyangqingyun.gitee.io/qwidgetdemo/](https://feiyangqingyun.gitee.io/qwidgetdemo/)

2. qt+quick编译的程序网页地址：

[https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html](https://feiyangqingyun.gitee.io/qwidgetdemo/gallery.html)

3. WebAssembly中文网

[https://www.wasm.com.cn/](https://www.wasm.com.cn/)

4. qt for webassembly官网介绍

[https://doc.qt.io/qt-5/wasm.html](https://doc.qt.io/qt-5/wasm.html)

## 二、搭建步骤

### （一）、安装Qt集成开发环境

从Qt5.15开始官方不再提供离线安装包，只提供源码包自行编译或者在线安装，在线安装的时候需要输入账号信息登录才能在线下载选择的Qt版本和构建套件及其他工具，慢慢的各位Qt开发者要习惯这种方式，要么自己熟悉编译流程自行编译，对应大部分初学者来说一个是没有这个必要还一个是太难了，建议放弃这种方式，所以从现在开始就慢慢的要习惯在线安装方式，官方提供了在线安装的程序，双击即可运行，相信90%的Qt开发者都使用过，这里直接略过，只需要在选择安装的构建套件的时候记得勾选WebAssembly构建套件就行，这样已经很方便了，之前都是需要自己编译呢。

安装好以后如果勾选了mingw版本的Qt构建套件，则可以自行测试hello跑起来，同时你也会发现qt for webassembly这个构建条件是不可用的，别急，那是因为现在你只安装了qt for webassembly的qt的库，而并没有找到需要的编译器emscripten。

### （二）、安装emsdk编译器

任何编程语言开发环境，都离不开编译器，需要用对应的编译器将代码编译成对应的可执行文件，Qt是一个兼容了N种编译器的通用代码库，你使用何种编译器则调用对应的Qt库然后再编译生成对应的程序，qt for webassembly就需要借助emsdk中的编译器emscripten来编译，而不是使用msvc、mingw、gcc等，所以需要单独安装emsdk编译器。

#### 1、常规安装办法

- 前提：电脑安装有git环境，能从github下载项目，安装有python环境，比如python3.7.4，如果不会玩git命令行请自行百度。

- 第一步：双击python-3.7.4-amd64.exe，安装python开发环境，记得勾选添加环境变量。

- 第二步：获取源码，打开git命令行工具，输入 git clone https://github.com/emscripten-core/emsdk.git ，等待下载完成，一般1-2分钟就下载完成。

- 第三步：打开cmd工具，进入到emsdk目录，执行 emsdk install 1.39.7 安装emsdk编译器（Qt5.15对应的是1.39.7版本，而不是1.39.8，之前下载的1.39.8用下来每次编译都有警告提示版本不一致说是要1.39.7）。这个下载需要点时间请耐心等待，我电脑大概13分钟，具体看网速。

- 第四步：安装完成后继续在当前的cmd命令行窗口执行 emsdk activate --embedded 1.39.7 激活sdk。

- 第五步：激活成功以后，将emsdk目录下的.emscripten文件复制到C:\Users\Administrator目录下（即用户目录），Qt for webass构建套件编译的时候会去这里找编译器和各种编译需要的变量。

- 第六步：用记事本打开.emscripten，将 emsdk_path = os.path.dirname(os.environ.get('EM_CONFIG')).replace('\', '/') 改成emsdk目录的绝对路径，比如 emsdk_path = 'H:/github/emsdk'，如果运行有问题则全部改成绝对路径。

- 第七步：打开QtCreator，配置Qt for WebAssembly构建套件，此时可以看到编译器中能够识别到所需的em编译器。

- 第八步：编译好以后如果弹出的是IE浏览器则复制地址拷贝到谷歌浏览器或者edge或者火狐浏览器运行，目前IE浏览器不支持WebAssembly。

- 第九步：默认采用的是静态编译，意味着可以脱离Qt环境运行，.wasm文件比较大因为静态集成了Qt的运行库。除了编译运行以外，还可以直接发布到有ngix或者apche环境的站点，直接可以运行。他就类似于PHP需要站点环境支持才能运行。

#### 2、小白懒人办法

常规的办法是万能的，包括选用其他版本的编译器等，但是大部分的初学者其实还没有git环境和python环境呢，怎破，此时非常想体验一把将qt程序编译到网页运行的想法超级强烈，马上安排懒人办法，注意此办法针对的是Qt5.15.2版本，本人特意将下载好的编译器整个文件夹中各种无关的文件全部删除。

emsdk地址：[https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A](https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A) 提取码：o05q 名称：emsdk.zip

- 第一步：将下载好的emsdk压缩包解压到目录，为了方便统一管理，我这里放在C:/Qt。

- 第二步：将emsdk目录下的.emscripten文件复制到C:\Users\Administrator目录下（即用户目录），Qt for webass构建套件编译的时候会去这里找编译器和各种编译需要的变量。

- 第三步：默认.emscripten文件中填写的是我这边安装的目录，你可以用记事本打开进行编辑改成你的目录。

- 第四步：重新打开QtCreator，切换到工具-选项-kits，重新设置Qt5.15.2 webassemly的编译器，下拉选择Emscripten Compiler。

- 第五步：新建个项目，拖几个控件放界面，编译大概一分钟左右，由于是静态编译时间会久一点，此时会生成五个文件，其中qtloader.js和qtlogo.svg每个项目是一样的，不同的文件是untitled.js、untitled.html、untitled.wasm。需要发布的话只需要将这5个文件拷贝到网站的WWW目录下就行。

- 第六步：编译完成以后会自动打开电脑默认浏览器比如IE浏览器，因为IE浏览器不支持wasm，所以你需要将地址复制拷贝到edge或者谷歌火狐等浏览器运行。

- 第七步：如果要支持中文则需要将中文字体文件添加到项目的资源文件一起编译。

- 其他说明：首次加载比较慢，后面由于有缓存的原因重新加载非常快，建议发布的时候可以放一个带宽很好的服务器。

### （三）、支持的模块

目前qt for webassembly套件不是支持所有的模块，比如常见的sql数据库模块就不支持，估计现在wasm还是定位在客户端的原因吧，network中的tcp udp也不支持，好消息是websocket client是支持的，也就意味着你可以写个websocket的server端负责监听和解析，web端直接websocket通信交互，比如传输视频数据，这不就是网页中显示实时视频了！亲测无误。

- Qt5Charts

- Qt5Core

- Qt5Gui

- Qt5Quick

- Qt5Svg

- Qt5WebSockets

- Qt5Widgets

- Qt5QuickControls2

- 其他部分模块

## 三、效果图


在线咨询
上一篇：「前端架构师详解Css07」案例“类天猫导航栏实现”及行内标签
下一篇：每日分享，三款纯jquery移动端日期时间选择插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 丘北县 开远市 孟州市 河口区 龙华区 平谷区 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服