Блог

Главная - Вопросы по программированию - Как сделать так, чтобы html-содержимое продвигаемого виджета заполняло виджет с разным размером экрана в PyQt5

Как сделать так, чтобы html-содержимое продвигаемого виджета заполняло виджет с разным размером экрана в PyQt5

#javascript #html #pyqt5 #qwidget

#javascript #HTML #pyqt5 #qwidget

Вопрос:

В простом пользовательском интерфейсе, созданном в Qt designer, у меня есть пользовательский виджет, который содержит карту листовки. Ниже приведен мой код 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 designer на изменение размера при изменении размера окна или на весь экран. Проблема в том, что моя карта листовки не изменяется вместе с виджетом. Я знаю, что я устанавливаю постоянный размер для DIV, который содержит карту в html, но без определения фиксированного размера DIV вообще не виден.

Я чувствую, что это проблема HTML с размером DIV, но как я могу убедиться, что размер моей карты изменяется правильно при изменении размера окна.

Ответ №1:

Проблема в том, что div, содержащий карту, имеет фиксированный размер:

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

Решение состоит в том, чтобы указать, что он принимает все возможные размеры:

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

Комментарии:

1. Ах .. Как я и подозревал. Спасибо!