整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          怎么在qt中加載css文件

          怎么在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>

          <div id="demo"></div>

          </body>

          </html>


          <script src="./qwebchannel.js"></script> //把Qt中提供的js加入進來


          <script>

          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>

          <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 端加載html頁面。注冊相應通道

          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();

          html 頁面中調用 qt函數

          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); //發送消息

          //}

          });

          });

          }

          最終效果,本圖片為我們實際應用中的一個效果圖。


          主站蜘蛛池模板: 久久se精品一区精品二区国产| 人妻体内射精一区二区| 一区二区三区国产| 中文字幕一区二区三区人妻少妇| 日韩有码一区二区| 亚洲国产激情在线一区| 久久毛片免费看一区二区三区| 日韩一区二区超清视频| V一区无码内射国产| 日本精品一区二区在线播放| 一区二区三区视频在线| 东京热人妻无码一区二区av| 视频一区二区精品的福利| 国产乱码精品一区二区三区麻豆 | 日韩一区二区超清视频| 精品视频一区二区三三区四区| 日本夜爽爽一区二区三区| 尤物精品视频一区二区三区 | 中文字幕AV一区二区三区人妻少妇 | 国产在线精品一区二区在线看| 国产一区二区不卡在线播放| 内射少妇一区27P| 国产三级一区二区三区| 国产成人免费一区二区三区| 一区二区三区在线播放视频| 国产视频一区二区在线播放| 女同一区二区在线观看| 综合无码一区二区三区四区五区| 中文字幕日韩人妻不卡一区| 插我一区二区在线观看| 无码人妻精品一区二区蜜桃AV| 国产婷婷色一区二区三区深爱网| 日韩人妻无码免费视频一区二区三区 | 人妻无码一区二区三区| AV天堂午夜精品一区| 夜夜嗨AV一区二区三区| 一区二区视频在线播放| 国产成人精品第一区二区| 国产福利一区视频| 一区二区三区视频免费| 久久免费国产精品一区二区|