如何使提升的小部件的html内容在PyQt5中以不同的屏幕大小填充小部件

编程问答 2022-06-03

问题描述

在Qt设计器中创建的简单UI中，我有一个自定义小部件，其中包含一个传单地图。以下是此自定义小部件的python代码：

from PyQt5.QtCore import *
from PyQt5.QtWidgets import *
from PyQt5.QtWebEngineWidgets import *

    
class LeafWidget (QWidget):
    def __init__(self,parent=None):
        QWidget.__init__(self,parent)
        self.browser = QWebEngineView()
        self.browser.settings().setAttribute(QWebEnginesettings.JavascriptEnabled,True)
       
        self.browser.load(QUrl.fromLocalFile(QDir.current().absoluteFilePath('mymap.html')))
        self.browser.loadFinished.connect(self.onLoadFinished)
    

        lay = QVBoxLayout(self)
        lay.addWidget(self.browser)


    def onLoadFinished(self,ok):
        if ok:
            self.browser.page().runJavaScript('')

这是我用来加载传单地图的html文件：

<!DOCTYPE html>
  <head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
    <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

    <style>
    #my-map {
      width:1200px;
      height:450px;
    }
    </style>
  </head>

  <body>
    <div id="my-map"></div>
    <script>
          var osmUrl1 = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png';
          var osm = L.tileLayer(osmUrl1,{id: 'MapID',attribution:'1'});
          var baseMaps = {
            "osm": osm,};
          var map = L.map('my-map').setView([40,-90],8);
          osm.addTo(map)
    </script>
  </body>
</html>

我已经在Qt设计器中将窗口小部件的布局设置为在调整窗口大小或全屏时调整大小。问题是我的传单地图没有随小部件调整大小。我知道我为在HTML中保存地图的DIV设置了恒定的大小，但是没有定义固定的大小，DIV根本不可见。

我觉得这是DIV大小的HTML问题，但是当窗口调整大小时，如何确保我的地图正确调整大小。

解决方法

问题是包含地图的div具有固定大小：

#my-map {
  width:1200px;
  height:450px;
}

解决方案是指出它需要所有可能的大小：

#my-map {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%
}
htmljavascriptpyqt5qwidget