怎么在qt中加载css文件

可以使用Qt的样式表（QSS）来加载CSS文件。首先，您需要将CSS文件添加到资源文件中。然后，您可以在主函数中调用QApplication的setStyleSheet()函数来加载CSS文件。例如，如果您的CSS文件名为“style.css”，则可以使用以下代码加载它：

QApplication::setStyleSheet(":/styles/style.css");

. Qt使用类

1. QWebChannel

2. QWebEngineView

二. Qt JS文件

1. qwebchannel.js 一般在安装目录下 \webchannel\shared\qwebchannel.js

三. Qt代码

1. 定义交互类

#include <QWebEnginePage>

class JsClass: public QObject

{

Q_OBJECT

public:

explicit JsClass(QObject *parent=nullptr);

// qt 调用 js 函数

void qt_exec_js(QWebEnginePage* page, const QString& param) {

page->runJavaScript(QString("print_info(\"%1\")").arg(param)); //调用函数带字符串类型参数一定需要加双引号

//page->runJavaScript(QString("print_info(%1)").arg(12)); //调用函数参数类型为数字类型

//page->runJavaScript(QString("print_info()")); //调用函数无参

}

public slots:

// js 调用 qt 函数

void js_exec_qt(const QString& param) {

qDebug() << param;

}

};

2. 主函数代码片段

QString url="file:///E:/login.html";

QWebEngineView webView

webView.load(QUrl(url));

webView.show();

JsClass jsClass;

QWebChannel webChannel;

webChannel.registerObject("jsClass", &jsClass);

webView.page()->setWebChannel(&webChannel);

connect(&webView, &QWebEngineView::loadFinished, this, [](){ jsClass.qt_exec_js(webView.page(), "Hello word");});

//重要, 必须要等到 QWebEngineView 类把html加载完毕才能执行调用js的函数, 不然会出现找不到js函数的错误

四. HTML 和 JS 代码

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

var jsClassIns;

// 获取qt中 JsClass 类的实例

function initObj(){

if (typeof qt !='undefined'){

new QWebChannel(qt.webChannelTransport, function(channel){

jsClassIns=channel.objects.jsClass; //名字和 webChannel.registerObject("jsClass", &jsClass); 第一个参数保持一致

});

}

// 调用Qt函数

function exec_qt(param){

if(typeof jsClassIns !='undefined'){

jsClassIns.js_exec_qt(param);

}

//Qt 调用 js

function print_info(param) {

document.getElementById("demo").innerHTML=param;

exec_qt("Hello China"); //当Qt调用了 js, Js 也调用Qt函数

}

initObj();

</script>

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

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

主要代码：

<!DOCTYPE html>

<html>

<head>

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

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

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

</style>

</head>

<body>

// 百度地图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); //发送消息

//}

});

}

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

在线咨询

上一篇：再见Swagger UI 国人开源了一款超好用的 A
下一篇：公司未依法清算也可注销：揭开“对公承诺”的迷雾

您的项目需求

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

整合营销服务商

怎么在qt中加载css文件

您的项目需求